/* /Components/Layout/LanguageSelector.razor.rz.scp.css */
.lang-wrapper[b-sbo32qnxge] {
    position: relative;
}

.lang-trigger[b-sbo32qnxge] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--borderSoft);
    background: var(--hoverGlow);
    cursor: pointer;
    padding: 0;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.lang-code[b-sbo32qnxge] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--muted);
    line-height: 1;
}

.lang-trigger:hover[b-sbo32qnxge] {
    border-color: rgba(148, 163, 184, 0.4);
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.1);
}

.lang-dropdown[b-sbo32qnxge] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 180px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
    z-index: 1000;
    overflow: hidden;
    padding: 4px;
    animation: langDropIn-b-sbo32qnxge 0.15s ease-out;
}

@keyframes langDropIn-b-sbo32qnxge {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.lang-option[b-sbo32qnxge] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text);
    transition: background 0.1s;
}

.lang-option:hover[b-sbo32qnxge] {
    background: var(--hoverGlow);
}

.lang-option.active[b-sbo32qnxge] {
    background: rgba(59, 130, 246, 0.12);
}

.lang-option-flag[b-sbo32qnxge] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--muted);
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.lang-option-name[b-sbo32qnxge] {
    flex: 1;
    text-align: left;
    font-weight: 500;
}

.lang-check[b-sbo32qnxge] {
    color: #3b82f6;
    flex-shrink: 0;
}

/* ── Mobile ── */
@media (max-width: 768px) {
    .lang-dropdown[b-sbo32qnxge] {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        border-radius: 16px 16px 0 0;
        animation: langSlideUp-b-sbo32qnxge 0.2s ease-out;
    }

    @keyframes langSlideUp-b-sbo32qnxge {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
}
/* /Components/Layout/LoginDisplay.razor.rz.scp.css */
.user-button-wrapper[b-8x0m7rqkcb] {
    position: relative;
}

/* ── Trigger button ── */
.user-trigger[b-8x0m7rqkcb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--borderSoft);
    background: var(--hoverGlow);
    cursor: pointer;
    padding: 0;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.user-trigger:hover[b-8x0m7rqkcb] {
    border-color: rgba(148, 163, 184, 0.4);
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.1);
}

.trigger-avatar[b-8x0m7rqkcb] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}

.trigger-icon[b-8x0m7rqkcb] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
}

/* ── Dropdown panel ── */
.user-dropdown[b-8x0m7rqkcb] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
    z-index: 1000;
    overflow: hidden;
    animation: dropIn-b-8x0m7rqkcb 0.15s ease-out;
}

@keyframes dropIn-b-8x0m7rqkcb {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Authenticated: header ── */
.dropdown-header[b-8x0m7rqkcb] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
}

.dropdown-avatar[b-8x0m7rqkcb] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.dropdown-user-info[b-8x0m7rqkcb] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dropdown-name[b-8x0m7rqkcb] {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-email[b-8x0m7rqkcb] {
    font-size: 0.78rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Rows ── */
.dropdown-row[b-8x0m7rqkcb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
}

.dropdown-label[b-8x0m7rqkcb] {
    font-size: 0.8rem;
    color: var(--muted);
}

.dropdown-value[b-8x0m7rqkcb] {
    font-size: 0.8rem;
    color: var(--text);
    font-weight: 500;
}

/* ── Tier badges ── */
.tier-badge[b-8x0m7rqkcb] {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.tier-free[b-8x0m7rqkcb] {
    background: rgba(148, 163, 184, 0.1);
    color: var(--muted);
}

.tier-premium[b-8x0m7rqkcb] {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #451a03;
}

/* Founder = a brighter gold with a glowing ring, one notch above plain Premium. */
.tier-founder[b-8x0m7rqkcb] {
    background: linear-gradient(135deg, #fde68a, #f59e0b);
    color: #451a03;
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.55), 0 2px 12px -4px rgba(245, 158, 11, 0.6);
}

/* ── Divider ── */
.dropdown-divider[b-8x0m7rqkcb] {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

/* ── Action links ── */
.dropdown-action[b-8x0m7rqkcb] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 0.85rem;
    color: var(--text);
    text-decoration: none;
    transition: background 0.1s;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
}

.dropdown-action:hover[b-8x0m7rqkcb] {
    background: var(--borderSoft);
    text-decoration: none;
}

.logout-action[b-8x0m7rqkcb] {
    color: #ef4444;
}

.logout-action:hover[b-8x0m7rqkcb] {
    background: rgba(239, 68, 68, 0.1);
}

.admin-action[b-8x0m7rqkcb] {
    color: #818cf8;
}

.admin-action:hover[b-8x0m7rqkcb] {
    background: rgba(99, 102, 241, 0.1);
}

.signin-action[b-8x0m7rqkcb] {
    font-weight: 500;
}

.signup-action[b-8x0m7rqkcb] {
    color: var(--muted);
}

/* ── Mobile ── */
@media (max-width: 768px) {
    .user-dropdown[b-8x0m7rqkcb] {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        border-radius: 16px 16px 0 0;
        animation: slideUp-b-8x0m7rqkcb 0.2s ease-out;
    }

    @keyframes slideUp-b-8x0m7rqkcb {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* ── Guest state ── */
.dropdown-guest-header[b-8x0m7rqkcb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 16px 12px;
    gap: 4px;
}

.guest-icon[b-8x0m7rqkcb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--hoverGlow);
    margin-bottom: 4px;
}

.guest-label[b-8x0m7rqkcb] {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text);
}

.guest-hint[b-8x0m7rqkcb] {
    font-size: 0.78rem;
    color: var(--muted);
    text-align: center;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.main-content[b-n4qxfq516t] {
    padding-top: 72px;
    min-height: 100vh;
}

/* ── Site Footer ── */
.site-footer[b-n4qxfq516t] {
    margin-top: 60px;
    border-top: 1px solid var(--border);
    background: var(--footerBg);
}

.footer-inner[b-n4qxfq516t] {
    max-width: 900px;
    margin: 0 auto;
    padding: 16px 24px 14px;
}

.footer-disclaimer[b-n4qxfq516t] {
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.4;
    text-align: center;
    opacity: 0.6;
    margin-bottom: 10px;
}

.footer-bottom[b-n4qxfq516t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-copy[b-n4qxfq516t] {
    font-size: 0.8rem;
    color: var(--muted);
    font-weight: 500;
}

.footer-links[b-n4qxfq516t] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.footer-links a[b-n4qxfq516t] {
    font-size: 0.78rem;
    color: var(--muted);
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.footer-links a:hover[b-n4qxfq516t] {
    opacity: 1;
    color: var(--blue);
}

.footer-dot[b-n4qxfq516t] {
    font-size: 0.7rem;
    color: var(--muted);
    opacity: 0.4;
}

.footer-legal[b-n4qxfq516t] {
    font-size: 0.78rem;
    color: var(--muted);
    opacity: 0.6;
}

/* ── Footer Mobile ── */
@media (max-width: 640px) {
    .site-footer[b-n4qxfq516t] {
        margin-top: 40px;
    }

    .footer-inner[b-n4qxfq516t] {
        padding: 14px 16px 10px;
    }

    .footer-bottom[b-n4qxfq516t] {
        flex-direction: column;
        gap: 4px;
        text-align: center;
    }
}

#blazor-error-ui[b-n4qxfq516t] {
    display: none;
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    background: #1e293b;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 12px;
    padding: 14px 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(239, 68, 68, 0.1);
    max-width: 480px;
    width: calc(100% - 32px);
    animation: errorSlideUp-b-n4qxfq516t 0.3s ease-out;
}

@keyframes errorSlideUp-b-n4qxfq516t {
    from { opacity: 0; transform: translateX(-50%) translateY(16px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

#blazor-error-ui .error-content[b-n4qxfq516t] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #e2e8f0;
    font-size: 0.88rem;
    line-height: 1.4;
}

#blazor-error-ui .error-icon[b-n4qxfq516t] {
    color: #ef4444;
    flex-shrink: 0;
}

#blazor-error-ui .error-reload[b-n4qxfq516t] {
    color: #60a5fa;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    margin-left: auto;
    padding: 4px 12px;
    border-radius: 6px;
    background: rgba(96, 165, 250, 0.1);
    transition: background 0.15s;
}

#blazor-error-ui .error-reload:hover[b-n4qxfq516t] {
    background: rgba(96, 165, 250, 0.2);
}

#blazor-error-ui .error-dismiss[b-n4qxfq516t] {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
    line-height: 0;
}

#blazor-error-ui .error-dismiss:hover[b-n4qxfq516t] {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.06);
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ── Floating Glass Navbar ─────────────────────────────────── */

.glass-nav[b-oqt82hn74m] {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 48px);
    max-width: 1320px;
    z-index: 1000;
    background: var(--navGlass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--navBorder);
    border-radius: 16px;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.glass-nav.scrolled[b-oqt82hn74m] {
    background: var(--navGlassScrolled);
    border-color: var(--navBorderScrolled);
    box-shadow: var(--shadowSoft);
}

.nav-inner[b-oqt82hn74m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    gap: 16px;
}

/* ── Logo ─────────────────────────────────────────────────── */

.nav-logo[b-oqt82hn74m] {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.nav-logo:hover[b-oqt82hn74m] {
    text-decoration: none;
}

.nav-logo-img[b-oqt82hn74m] {
    height: 32px;
    width: auto;
    display: none;
}

/* Dark theme: show the dark variant (light text on dark bg) */
:global([data-theme="dark"]) .nav-logo-dark[b-oqt82hn74m] {
    display: block;
}

:global([data-theme="dark"]) .nav-logo-light[b-oqt82hn74m] {
    display: none;
}

/* Light theme: show the light variant (dark text on light bg) */
:global([data-theme="light"]) .nav-logo-dark[b-oqt82hn74m] {
    display: none;
}

:global([data-theme="light"]) .nav-logo-light[b-oqt82hn74m] {
    display: block;
}

/* Default (no theme attribute or dark) */
.nav-logo-dark[b-oqt82hn74m] {
    display: block;
}

.nav-logo-light[b-oqt82hn74m] {
    display: none;
}

/* ── Nav Links (center) ──────────────────────────────────── */

.nav-links[b-oqt82hn74m] {
    display: flex;
    gap: 4px;
    align-items: center;
}

.nav-links[b-oqt82hn74m]  .nav-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--muted);
    text-decoration: none;
    transition: all 0.15s ease;
}

.nav-links[b-oqt82hn74m]  .nav-pill:hover {
    color: var(--text);
    background: var(--hoverGlow);
    text-decoration: none;
}

.nav-links[b-oqt82hn74m]  .nav-pill.active {
    color: var(--text);
    background: rgba(59, 130, 246, 0.2);
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.3);
}

.nav-links[b-oqt82hn74m]  .nav-pill svg {
    flex-shrink: 0;
}

/* Contextual bracket pill — only rendered while a live tournament bracket exists.
   Amber accent marks it as a special/live event without shouting. */
.nav-links[b-oqt82hn74m]  .nav-pill-bracket {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.10);
    box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.28);
}

.nav-links[b-oqt82hn74m]  .nav-pill-bracket:hover {
    color: #fcd34d;
    background: rgba(251, 191, 36, 0.16);
}

.nav-links[b-oqt82hn74m]  .nav-pill-bracket.active {
    color: #fcd34d;
    background: rgba(251, 191, 36, 0.20);
    box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.45);
}

/* ── Right section (styled below with theme toggle) ──── */

/* ── Hamburger (mobile) ──────────────────────────────────── */

.hamburger[b-oqt82hn74m] {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 8px;
    border: none;
    background: var(--hoverGlow);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
    flex-shrink: 0;
}

.hamburger:hover[b-oqt82hn74m] {
    background: var(--borderSoft);
}

.hamburger span[b-oqt82hn74m] {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text);
    border-radius: 1px;
    transition: all 0.2s ease;
}

.hamburger.open span:nth-child(1)[b-oqt82hn74m] {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.open span:nth-child(2)[b-oqt82hn74m] {
    opacity: 0;
}

.hamburger.open span:nth-child(3)[b-oqt82hn74m] {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ── Mobile Overlay ──────────────────────────────────────── */

.mobile-overlay[b-oqt82hn74m] {
    position: fixed;
    inset: 0;
    background: var(--overlayBg);
    z-index: 999;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: overlayFadeIn-b-oqt82hn74m 0.2s ease-out;
}

@keyframes overlayFadeIn-b-oqt82hn74m {
    from { opacity: 0; }
    to { opacity: 1; }
}

.mobile-menu[b-oqt82hn74m] {
    position: absolute;
    top: 72px;
    left: 12px;
    right: 12px;
    background: var(--mobileMenu);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--navBorder);
    border-radius: 16px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    animation: slideDown-b-oqt82hn74m 0.25s ease-out;
}

@keyframes slideDown-b-oqt82hn74m {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}

.mobile-menu[b-oqt82hn74m]  .mobile-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    color: var(--text);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: background 0.15s ease;
}

.mobile-menu[b-oqt82hn74m]  .mobile-link:hover,
.mobile-menu[b-oqt82hn74m]  .mobile-link.active {
    background: rgba(59, 130, 246, 0.15);
    color: var(--text);
    text-decoration: none;
}

.mobile-menu[b-oqt82hn74m]  .mobile-link-bracket {
    color: #fbbf24;
}

.mobile-menu[b-oqt82hn74m]  .mobile-link-bracket:hover,
.mobile-menu[b-oqt82hn74m]  .mobile-link-bracket.active {
    background: rgba(251, 191, 36, 0.15);
    color: #fcd34d;
}

.mobile-login[b-oqt82hn74m] {
    padding: 12px 16px 4px;
    border-top: 1px solid var(--navBorder);
    margin-top: 4px;
}

/* ── Theme Toggle ──────────────────────────────────────────── */

.theme-toggle[b-oqt82hn74m] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1.5px solid var(--borderSoft);
    background: var(--hoverGlow);
    border-radius: 50%;
    color: var(--muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.theme-toggle:hover[b-oqt82hn74m] {
    background: var(--borderSoft);
    color: var(--text);
    border-color: var(--muted);
}

.nav-right[b-oqt82hn74m] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Header search slot -- sits between center nav and the right cluster on
   desktop. Hidden on mobile (the search bar lives inside the hamburger menu). */
.nav-search-desktop[b-oqt82hn74m] {
    flex: 1 1 280px;
    min-width: 0;
    max-width: 360px;
    display: flex;
    justify-content: flex-end;
}

.mobile-search-row[b-oqt82hn74m] {
    padding: 4px 4px 8px;
    border-bottom: 1px solid var(--navBorder);
    margin-bottom: 4px;
}

.mobile-lang-row[b-oqt82hn74m] {
    padding: 8px 16px;
    border-top: 1px solid var(--navBorder);
    margin-top: 4px;
}

.mobile-theme-row[b-oqt82hn74m] {
    padding: 8px 16px;
    border-top: 1px solid var(--navBorder);
    margin-top: 4px;
}

.mobile-theme-row .theme-toggle[b-oqt82hn74m] {
    width: 100%;
    height: auto;
    padding: 10px 16px;
    border-radius: 12px;
    gap: 10px;
    font-weight: 600;
    font-size: 0.95rem;
}

/* ── Responsive ──────────────────────────────────────────── */

/* Collapse to the hamburger below 1024px: the full desktop nav (logo + 7-8 pills +
   search + right cluster) needs ~1000px to lay out, so between 768 and ~1000 it used
   to overflow its bar. The hamburger menu carries every item, so switch to it early. */
@media (max-width: 1024px) {
    /* Hide the whole desktop pill row on mobile. It used to collapse to three
       icon-only pills (Data / Picks / Sandbox) with no labels, which read as three
       mystery icons floating between the logo and the hamburger. Everything in it is
       already in the hamburger menu, so drop it entirely for a clean header. */
    .nav-links[b-oqt82hn74m] {
        display: none;
    }

    /* Hide Home and About on mobile — they're in the hamburger */
    .nav-links[b-oqt82hn74m]  .nav-pill-secondary {
        display: none;
    }

    /* Hide Reports on mobile too — it's in the hamburger overlay.
       Reports stays in the desktop top nav (where there's room) but
       drops out of the mobile pill bar so Data + Sandbox don't get
       crowded by a third pill. */
    .nav-links[b-oqt82hn74m]  .nav-pill-desktop-only {
        display: none;
    }

    /* Show Data and Sandbox as compact icon-only pills */
    .nav-links[b-oqt82hn74m]  .nav-pill-primary {
        padding: 6px 10px;
        font-size: 0.72rem;
        gap: 4px;
    }

    /* Hide text labels on very small screens, show icon + text on larger mobile */
    .nav-links[b-oqt82hn74m]  .nav-pill-primary .nav-pill-text {
        display: none;
    }

    .nav-right[b-oqt82hn74m] {
        display: none;
    }

    .nav-search-desktop[b-oqt82hn74m] {
        display: none;
    }

    .hamburger[b-oqt82hn74m] {
        display: flex;
    }

    .glass-nav[b-oqt82hn74m] {
        top: 8px;
        width: calc(100% - 24px);
    }

    .nav-logo[b-oqt82hn74m] {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Show pill text only once there's room for it alongside the logo + hamburger.
   Below this the labels pushed the hamburger off-screen (the logo wordmark is ~107px,
   and three text pills are ~222px, which overflowed a 375px phone). Icon-only pills
   stay compact and the menu button is always reachable. */
@media (min-width: 440px) and (max-width: 768px) {
    .nav-links[b-oqt82hn74m]  .nav-pill-primary .nav-pill-text {
        display: inline;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* ── Visibility rules ── */
.components-reconnect-first-attempt-visible[b-wohe5y875j],
.components-reconnect-repeated-attempt-visible[b-wohe5y875j],
.components-reconnect-failed-visible[b-wohe5y875j],
.components-pause-visible[b-wohe5y875j],
.components-resume-failed-visible[b-wohe5y875j] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-wohe5y875j],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-wohe5y875j],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-wohe5y875j],
#components-reconnect-modal.components-reconnect-retrying[b-wohe5y875j],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-wohe5y875j],
#components-reconnect-modal.components-reconnect-failed[b-wohe5y875j],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-wohe5y875j] {
    display: block;
}

/* Show spinner wrapper (flex) during reconnect states */
#components-reconnect-modal.components-reconnect-show .reconnect-spinner-wrapper[b-wohe5y875j],
#components-reconnect-modal.components-reconnect-retrying .reconnect-spinner-wrapper[b-wohe5y875j] {
    display: flex;
}

/* ── Dialog ── */
#components-reconnect-modal[b-wohe5y875j] {
    background: #131b2e;
    color: #e2e8f0;
    width: 22rem;
    max-width: calc(100vw - 32px);
    margin: 20vh auto;
    padding: 2.5rem 2rem 2rem;
    border: 1px solid rgba(96, 165, 250, 0.15);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(96, 165, 250, 0.08);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: reconnect-fadeOut-b-wohe5y875j 0.5s both;
}

#components-reconnect-modal[open][b-wohe5y875j] {
    animation: reconnect-slideUp-b-wohe5y875j 0.5s cubic-bezier(.05, .89, .25, 1.02) 0.15s,
               reconnect-fadeIn-b-wohe5y875j 0.4s ease-in-out 0.15s;
    animation-fill-mode: both;
}

#components-reconnect-modal[b-wohe5y875j]::backdrop {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    animation: reconnect-fadeIn-b-wohe5y875j 0.4s ease-in-out;
    opacity: 1;
}

/* ── Animations ── */
@keyframes reconnect-slideUp-b-wohe5y875j {
    from { transform: translateY(24px) scale(0.96); }
    to { transform: translateY(0) scale(1); }
}

@keyframes reconnect-fadeIn-b-wohe5y875j {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes reconnect-fadeOut-b-wohe5y875j {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* ── Content layout ── */
.components-reconnect-container[b-wohe5y875j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

/* ── Spinner + Logo wrapper ── */
.reconnect-spinner-wrapper[b-wohe5y875j] {
    display: none;
    position: relative;
    width: 72px;
    height: 72px;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

/* ── Logo icon (centered inside spinner) ── */
.reconnect-logo[b-wohe5y875j] {
    color: #60a5fa;
    position: relative;
    z-index: 1;
}

/* ── Spinner (behind logo) ── */
.components-rejoining-animation[b-wohe5y875j] {
    position: absolute;
    inset: 0;
    width: 72px;
    height: 72px;
}

.components-rejoining-animation div[b-wohe5y875j] {
    position: absolute;
    border: 2px solid #60a5fa;
    opacity: 1;
    border-radius: 50%;
    animation: reconnect-ripple-b-wohe5y875j 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.components-rejoining-animation div:nth-child(2)[b-wohe5y875j] {
    animation-delay: -0.5s;
}

@keyframes reconnect-ripple-b-wohe5y875j {
    0% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 0;
    }
    5% {
        opacity: 0.6;
    }
    100% {
        top: 0;
        left: 0;
        width: 72px;
        height: 72px;
        opacity: 0;
    }
}

/* ── Text ── */
#components-reconnect-modal p[b-wohe5y875j] {
    margin: 0;
    text-align: center;
}

.reconnect-title[b-wohe5y875j] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #e2e8f0;
}

.reconnect-subtitle[b-wohe5y875j] {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 4px;
}

/* ── Button ── */
.reconnect-btn[b-wohe5y875j] {
    border: none;
    background: #2563eb;
    color: white;
    padding: 10px 32px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 12px;
    transition: background 0.15s;
}

.reconnect-btn:hover[b-wohe5y875j] {
    background: #1d4ed8;
}

.reconnect-btn:active[b-wohe5y875j] {
    background: #1e40af;
}

/* ── Reload link ── */
.reconnect-reload-link[b-wohe5y875j] {
    font-size: 0.8rem;
    color: #64748b;
    text-decoration: none;
    margin-top: 6px;
    transition: color 0.15s;
}

.reconnect-reload-link:hover[b-wohe5y875j] {
    color: #60a5fa;
}
/* /Components/Pages/About.razor.rz.scp.css */
.aboutPage[b-403xpwpyd5] {
    max-width: 680px;
    margin: 0 auto;
    padding: 40px 20px 80px;
}

/* ── Hero ── */
.aboutHero[b-403xpwpyd5] {
    margin-bottom: 48px;
}

.aboutTitle[b-403xpwpyd5] {
    font-size: 2rem;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -0.03em;
    margin-bottom: 12px;
}

.aboutLead[b-403xpwpyd5] {
    font-size: 1rem;
    color: var(--muted);
    line-height: 1.7;
    max-width: 560px;
}

/* ── Sections ── */
.aboutSection[b-403xpwpyd5] {
    margin-bottom: 44px;
}

.sectionHeader[b-403xpwpyd5] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.sectionIcon[b-403xpwpyd5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.08);
    color: var(--blue);
    flex-shrink: 0;
}

.sectionLabel[b-403xpwpyd5] {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.01em;
}

.sectionBody[b-403xpwpyd5] {
    padding-left: 48px;
}

.sectionBody p[b-403xpwpyd5] {
    font-size: 0.9rem;
    color: var(--muted);
    line-height: 1.75;
    margin-bottom: 12px;
}

.sectionBody p:last-child[b-403xpwpyd5] {
    margin-bottom: 0;
}

/* ── Steps Grid ── */
.stepsGrid[b-403xpwpyd5] {
    padding-left: 48px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stepCard[b-403xpwpyd5] {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: border-color 0.15s ease;
}

.stepCard:hover[b-403xpwpyd5] {
    border-color: rgba(59, 130, 246, 0.25);
}

.stepNumber[b-403xpwpyd5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.1);
    color: var(--blue);
    font-size: 0.85rem;
    font-weight: 900;
    flex-shrink: 0;
    margin-top: 2px;
}

.stepContent[b-403xpwpyd5] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.stepTitle[b-403xpwpyd5] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
}

.stepDesc[b-403xpwpyd5] {
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.65;
}

.stepConnector[b-403xpwpyd5] {
    display: flex;
    justify-content: center;
    padding: 2px 0;
    color: var(--muted);
}

/* ── Model Cards ── */
.modelCards[b-403xpwpyd5] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0;
}

.modelCard[b-403xpwpyd5] {
    padding: 18px 20px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: border-color 0.15s ease;
}

.modelCard:hover[b-403xpwpyd5] {
    border-color: rgba(59, 130, 246, 0.25);
}

.modelCardTitle[b-403xpwpyd5] {
    font-size: 0.92rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.modelCardTitle--fastTree[b-403xpwpyd5] { color: #60a5fa; }
.modelCardTitle--lightGBM[b-403xpwpyd5] { color: #fbbf24; }
.modelCardTitle--pca[b-403xpwpyd5] { color: #a78bfa; }

.modelCard--fastTree[b-403xpwpyd5] { border-color: rgba(96, 165, 250, 0.15); }
.modelCard--lightGBM[b-403xpwpyd5] { border-color: rgba(251, 191, 36, 0.15); }
.modelCard--pca[b-403xpwpyd5] { border-color: rgba(167, 139, 250, 0.15); }

.modelCard--fastTree:hover[b-403xpwpyd5] { border-color: rgba(96, 165, 250, 0.35); }
.modelCard--lightGBM:hover[b-403xpwpyd5] { border-color: rgba(251, 191, 36, 0.35); }
.modelCard--pca:hover[b-403xpwpyd5] { border-color: rgba(167, 139, 250, 0.35); }

.modelCardDesc[b-403xpwpyd5] {
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.65;
    margin: 0;
}

/* ── FAQ ── */
.faqList[b-403xpwpyd5] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.faqItem[b-403xpwpyd5] {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
}

.faqItem:last-child[b-403xpwpyd5] {
    border-bottom: none;
    padding-bottom: 0;
}

.faqQuestion[b-403xpwpyd5] {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
}

.faqAnswer[b-403xpwpyd5] {
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.7;
    margin: 0;
}

/* ── Disclaimer ── */
.disclaimerSection[b-403xpwpyd5] {
    margin-top: 8px;
}

.sectionIconWarn[b-403xpwpyd5] {
    background: rgba(234, 179, 8, 0.08);
    color: #eab308;
}

.disclaimerBody p[b-403xpwpyd5] {
    font-size: 0.84rem;
    color: var(--muted);
    opacity: 0.85;
}

/* ── Contact Link ── */
.contactLink[b-403xpwpyd5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding: 10px 18px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 10px;
    color: var(--blue);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s ease;
}

.contactLink:hover[b-403xpwpyd5] {
    background: rgba(59, 130, 246, 0.14);
    border-color: rgba(59, 130, 246, 0.3);
}

/* ── Mobile ── */
@media (max-width: 640px) {
    .aboutTitle[b-403xpwpyd5] {
        font-size: 1.6rem;
    }

    .sectionBody[b-403xpwpyd5],
    .stepsGrid[b-403xpwpyd5] {
        padding-left: 0;
    }

    .stepCard[b-403xpwpyd5] {
        padding: 16px;
    }
}
/* /Components/Pages/Account.razor.rz.scp.css */
.accountPage[b-bfeixh8137] {
    max-width: 820px;
    margin: 40px auto;
    padding: 0 20px;
}

.pageTitle[b-bfeixh8137] {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 28px;
    letter-spacing: -0.02em;
}

/* ── Profile Card ── */
.profileCard[b-bfeixh8137] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 4px 0;
    box-shadow: var(--shadowSoft);
}

.profileRow[b-bfeixh8137] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
}

.profileLabel[b-bfeixh8137] {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--muted);
}

.profileValue[b-bfeixh8137] {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
}

.profileDivider[b-bfeixh8137] {
    height: 1px;
    background: var(--border);
    margin: 0 24px;
}

/* ── Tier Badges ── */
.tierBadge[b-bfeixh8137] {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tierFree[b-bfeixh8137] {
    background: rgba(148, 163, 184, 0.12);
    color: var(--muted);
}

.tierPremium[b-bfeixh8137] {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #451a03;
}

/* Founder = a brighter gold with a glowing ring, one notch above plain Premium. */
.tierFounder[b-bfeixh8137] {
    background: linear-gradient(135deg, #fde68a, #f59e0b);
    color: #451a03;
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.55), 0 2px 14px -4px rgba(245, 158, 11, 0.6);
}

.acctFounderWrap[b-bfeixh8137] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ── Upgrade Card ── */
.upgradeCard[b-bfeixh8137] {
    margin-top: 28px;
    background: var(--panel);
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}

.upgradeCard[b-bfeixh8137]::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[b-bfeixh8137] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.upgradeIcon[b-bfeixh8137] {
    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[b-bfeixh8137] {
    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;
}

/* ── Perk Items ── */
.perksList[b-bfeixh8137] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 24px;
}

.perkItem[b-bfeixh8137] {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.perkIcon[b-bfeixh8137] {
    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[b-bfeixh8137] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

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

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

/* ── Plan Toggle ── */
.planToggle[b-bfeixh8137] {
    display: flex;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 3px;
    margin-bottom: 16px;
}

.planOption[b-bfeixh8137] {
    flex: 1;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}

.planOption:hover:not(.planOptionActive)[b-bfeixh8137] {
    color: var(--text);
}

.planOptionActive[b-bfeixh8137] {
    background: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
}

/* ── Price Display ── */
.planPrice[b-bfeixh8137] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    margin-bottom: 20px;
    padding: 8px 0;
}

.priceAmount[b-bfeixh8137] {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.02em;
}

.priceSkeleton[b-bfeixh8137] {
    display: inline-block;
    width: 64px;
    height: 1.8rem;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 200% 100%;
    animation: priceShimmer-b-bfeixh8137 1.2s ease-in-out infinite;
    vertical-align: middle;
}

@keyframes priceShimmer-b-bfeixh8137 {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.pricePeriod[b-bfeixh8137] {
    font-size: 0.9rem;
    color: var(--muted);
    font-weight: 500;
}

.priceSave[b-bfeixh8137] {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-left: 8px;
}

/* ── CTA Button ── */
.upgradeCta[b-bfeixh8137] {
    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;
}

.upgradeCta:hover[b-bfeixh8137] {
    box-shadow: 0 4px 20px rgba(251, 191, 36, 0.35);
    transform: translateY(-1px);
}

/* ── Stripe trust badge (under CTA, reassures users before they click) ── */
.trustBadge[b-bfeixh8137] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 0.78rem;
    color: var(--muted);
    font-weight: 500;
    letter-spacing: 0.01em;
}

.trustBadgeIcon[b-bfeixh8137] {
    color: #34d399;
    flex-shrink: 0;
}

.trustBadgeBrand[b-bfeixh8137] {
    color: var(--text);
    font-weight: 700;
}

/* ── Premium Since (reused inside upgradeCard for active premium) ── */
.premiumSince[b-bfeixh8137] {
    font-size: 0.82rem;
    color: var(--muted);
}

/* ── Manage Subscription Button ── */
.manageBtn[b-bfeixh8137] {
    margin-top: 16px;
    padding: 10px 24px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    background: transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}

.manageBtn:hover[b-bfeixh8137] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(148, 163, 184, 0.3);
}

/* ── Sidebar Layout ── */
.accountLayout[b-bfeixh8137] {
    display: flex;
    gap: 24px;
    align-items: start;
}

.accountSidebar[b-bfeixh8137] {
    flex: 0 0 196px;
    position: sticky;
    top: 88px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px;
    box-shadow: var(--shadowSoft);
}

.accountTab[b-bfeixh8137] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: var(--muted);
    font-size: 0.92rem;
    font-weight: 600;
    text-align: left;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.accountTab:hover[b-bfeixh8137] {
    background: var(--panelSoft);
    color: var(--text);
}

.accountTab.accountTabActive[b-bfeixh8137] {
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
}

[data-theme="light"] .accountTab.accountTabActive[b-bfeixh8137] {
    background: rgba(99, 102, 241, 0.1);
    color: #4f46e5;
}

.accountTabIcon[b-bfeixh8137] {
    flex-shrink: 0;
}

.accountContent[b-bfeixh8137] {
    flex: 1 1 560px;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

@media (max-width: 800px) {
    .accountLayout[b-bfeixh8137] {
        flex-direction: column;
    }

    .accountSidebar[b-bfeixh8137] {
        flex: 0 0 auto;
        width: 100%;
        position: static;
        flex-direction: row;
        overflow-x: auto;
        padding: 6px;
        gap: 4px;
    }

    .accountContent[b-bfeixh8137] {
        flex: 1 1 auto;
        max-width: 100%;
        width: 100%;
    }

    .accountTab[b-bfeixh8137] {
        flex: 1;
        justify-content: center;
        white-space: nowrap;
        padding: 10px 12px;
    }

    .accountTab span[b-bfeixh8137] {
        display: none;
    }

    .accountTabIcon[b-bfeixh8137] {
        width: 22px;
        height: 22px;
    }
}

/* ── Settings Cards (Email Prefs / Change Password) ── */
.emailPrefsCard[b-bfeixh8137] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 24px;
    box-shadow: var(--shadowSoft);
}

.emailPrefsCard .sectionTitle[b-bfeixh8137] {
    margin-bottom: 14px;
}

.emailPrefRow[b-bfeixh8137] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.emailPrefText[b-bfeixh8137] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.emailPrefTitle[b-bfeixh8137] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
}

.emailPrefDesc[b-bfeixh8137] {
    font-size: 0.84rem;
    color: var(--muted);
    line-height: 1.4;
}

.emailPrefBtn[b-bfeixh8137] {
    flex-shrink: 0;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    min-width: 110px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.emailPrefBtn:disabled[b-bfeixh8137] {
    cursor: not-allowed;
    opacity: 0.7;
}

.emailPrefBtnSubscribe[b-bfeixh8137] {
    background: #6366f1;
    color: #fff;
    border-color: #6366f1;
}

.emailPrefBtnSubscribe:hover:not(:disabled)[b-bfeixh8137] {
    background: #4f46e5;
    border-color: #4f46e5;
}

.emailPrefBtnUnsubscribe[b-bfeixh8137] {
    background: transparent;
    color: var(--text);
    border-color: var(--border);
}

.emailPrefBtnUnsubscribe:hover:not(:disabled)[b-bfeixh8137] {
    background: rgba(248, 113, 113, 0.08);
    border-color: rgba(248, 113, 113, 0.4);
    color: #ef4444;
}

.emailPrefMessage[b-bfeixh8137] {
    margin-top: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
    font-size: 0.82rem;
}

.emailPrefMessageError[b-bfeixh8137] {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.emailPrefStatus[b-bfeixh8137] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    align-self: flex-start;
    margin-top: 4px;
}

.emailPrefStatusOn[b-bfeixh8137] {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.emailPrefStatusOff[b-bfeixh8137] {
    background: rgba(148, 163, 184, 0.12);
    color: var(--muted);
    border: 1px solid rgba(148, 163, 184, 0.3);
}

.emailPrefStatusDot[b-bfeixh8137] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}

.changePwForm[b-bfeixh8137] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
}

.changePwField[b-bfeixh8137] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.changePwLabel[b-bfeixh8137] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
}

.changePwInput[b-bfeixh8137] {
    width: 100%;
    padding: 10px 12px;
    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;
}

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

.changePwSubmit[b-bfeixh8137] {
    align-self: flex-start;
    margin-top: 4px;
    min-width: 160px;
}

@media (max-width: 600px) {
    .emailPrefRow[b-bfeixh8137] {
        flex-direction: column;
        align-items: stretch;
    }

    .emailPrefBtn[b-bfeixh8137] {
        width: 100%;
    }

    .changePwSubmit[b-bfeixh8137] {
        width: 100%;
    }
}

/* ── Payment History ── */
.paymentSection[b-bfeixh8137] {
    margin-top: 28px;
}

.sectionTitle[b-bfeixh8137] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 16px;
    letter-spacing: -0.01em;
}

.paymentTable[b-bfeixh8137] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radiusSm);
    overflow: hidden;
}

.paymentHeader[b-bfeixh8137] {
    display: grid;
    grid-template-columns: 120px 1fr 90px;
    padding: 12px 20px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--border);
}

.paymentRow[b-bfeixh8137] {
    display: grid;
    grid-template-columns: 120px 1fr 90px;
    padding: 14px 20px;
    font-size: 0.88rem;
    color: var(--text);
    border-bottom: 1px solid var(--border);
}

.paymentRow:last-child[b-bfeixh8137] {
    border-bottom: none;
}

.paymentAmountCol[b-bfeixh8137] {
    text-align: right;
    font-weight: 600;
}

.noPayments[b-bfeixh8137] {
    font-size: 0.88rem;
    color: var(--muted);
    text-align: center;
    padding: 24px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radiusSm);
}

/* ── Cancelled Card ── */
.cancelledCard[b-bfeixh8137] {
    margin-top: 28px;
    background: var(--panel);
    border: 1px solid rgba(248, 113, 113, 0.3);
    border-radius: var(--radius);
    padding: 32px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.cancelledIcon[b-bfeixh8137] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(248, 113, 113, 0.1);
    margin-bottom: 4px;
}

.cancelledTitle[b-bfeixh8137] {
    font-size: 1.15rem;
    font-weight: 800;
    color: #f87171;
}

.cancelledInfo[b-bfeixh8137] {
    font-size: 0.88rem;
    color: var(--muted);
    line-height: 1.6;
    max-width: 400px;
    margin-top: 4px;
}

.cancelledInfo strong[b-bfeixh8137] {
    color: var(--text);
}

.resubscribeCta[b-bfeixh8137] {
    margin-top: 20px;
    width: 100%;
    max-width: 280px;
    padding: 12px 24px;
    border: none;
    border-radius: 10px;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #451a03;
    letter-spacing: 0.02em;
}

.resubscribeCta:hover[b-bfeixh8137] {
    box-shadow: 0 4px 20px rgba(251, 191, 36, 0.35);
    transform: translateY(-1px);
}

/* ── Loading ── */
.loadingText[b-bfeixh8137] {
    color: var(--muted);
    text-align: center;
    padding: 60px 0;
}

/* ── Mobile ── */
@media (max-width: 600px) {
    .accountPage[b-bfeixh8137] {
        margin: 20px auto;
        padding: 0 14px;
    }

    .pageTitle[b-bfeixh8137] {
        font-size: 1.3rem;
        margin-bottom: 20px;
    }

    .profileRow[b-bfeixh8137] {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 12px 16px;
    }

    .profileDivider[b-bfeixh8137] {
        margin: 0 16px;
    }

    .upgradeCard[b-bfeixh8137],
    .premiumCard[b-bfeixh8137],
    .cancelledCard[b-bfeixh8137] {
        padding: 20px;
    }

    .upgradeTitle[b-bfeixh8137] {
        font-size: 1.05rem;
    }

    .priceAmount[b-bfeixh8137] {
        font-size: 1.5rem;
    }

    .paymentHeader[b-bfeixh8137],
    .paymentRow[b-bfeixh8137] {
        grid-template-columns: 90px 1fr 70px;
        padding: 10px 14px;
        font-size: 0.8rem;
    }

    .paymentHeader[b-bfeixh8137] {
        font-size: 0.7rem;
    }
}

/* ─── Stake Tracker tab ───────────────────────────────────────────────────────
   Mirrors the Value Engine card visual idiom on Home.razor: hero metrics card
   with big ROI %, secondary stats grid, then section lists below. Currency-free
   ("units" suffix `u` everywhere) and CTA-free framing keeps it readable as a
   personal-tracking journal rather than a bookmaker dashboard. */

.stakeHeroCard[b-bfeixh8137] {
    background: linear-gradient(180deg, color-mix(in srgb, #22c55e 8%, var(--panel)), var(--panel));
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 20px;
}

.stakeHeroCard.stakeRoiNeg[b-bfeixh8137] {
    background: linear-gradient(180deg, color-mix(in srgb, #f87171 8%, var(--panel)), var(--panel));
}

.stakeHero[b-bfeixh8137] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

.stakeHeroLeft[b-bfeixh8137] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.stakeRoi[b-bfeixh8137] {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.stakeRoi.pos[b-bfeixh8137] { color: #22c55e; }
.stakeRoi.neg[b-bfeixh8137] { color: #f87171; }

.stakeRoiSub[b-bfeixh8137] {
    font-size: 0.92rem;
    color: var(--muted);
}

.stakeRoiSub strong.pos[b-bfeixh8137] { color: #22c55e; }
.stakeRoiSub strong.neg[b-bfeixh8137] { color: #f87171; }

.stakeHitRate[b-bfeixh8137] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: 10px;
    min-width: 80px;
}

.stakeHitNum[b-bfeixh8137] {
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1;
}

.stakeHitNum.pos[b-bfeixh8137] { color: #22c55e; }
.stakeHitNum.neg[b-bfeixh8137] { color: #f87171; }

.stakeHitLabel[b-bfeixh8137] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 700;
    margin-top: 4px;
}

.stakeStatsGrid[b-bfeixh8137] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.stakeStatK[b-bfeixh8137] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 700;
    margin-bottom: 4px;
}

.stakeStatV[b-bfeixh8137] {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text);
}

@media (max-width: 640px) {
    .stakeStatsGrid[b-bfeixh8137] {
        grid-template-columns: repeat(2, 1fr);
    }
    .stakeRoi[b-bfeixh8137] {
        font-size: 1.5rem;
    }
}

/* ── Section heads ── */
.stakeSection[b-bfeixh8137] {
    margin-top: 24px;
}

.stakeSectionHead[b-bfeixh8137] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
}

.stakeSectionTitle[b-bfeixh8137] {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    font-weight: 800;
}

.stakeSectionCount[b-bfeixh8137] {
    font-size: 0.78rem;
    color: var(--mutedFaint);
    font-weight: 700;
}

.stakeSectionEmpty[b-bfeixh8137] {
    padding: 16px;
    background: var(--panel);
    border: 1px dashed var(--border);
    border-radius: 10px;
    color: var(--muted);
    font-size: 0.85rem;
    text-align: center;
}

/* ── Pick row ── */
.stakeRow[b-bfeixh8137] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 8px;
    overflow: hidden;
    transition: background 160ms ease, border-color 160ms ease;
}

.stakeRow:hover[b-bfeixh8137] {
    background: color-mix(in srgb, var(--panel) 90%, var(--text));
}

.stakeRowExpanded[b-bfeixh8137] {
    border-color: color-mix(in srgb, #60a5fa 40%, var(--border));
}

.stakeRowHeader[b-bfeixh8137] {
    display: grid;
    /* Auto-sized columns so content doesn't overflow on narrow account-content widths.
       The middle "match" column is the only flexible one — everything else is sized to
       its content, with minmax(0, ...) to allow shrinking if the page narrows. */
    grid-template-columns:
        minmax(110px, auto)   /* date + league */
        minmax(0, 1fr)         /* match teams */
        minmax(0, auto)        /* pick */
        minmax(0, auto)        /* stake */
        minmax(0, auto)        /* status badge */
        minmax(0, auto);       /* actions / net */
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    font-size: 0.85rem;
    overflow: hidden;
}

.stakeRowMeta[b-bfeixh8137] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.stakeRowDate[b-bfeixh8137] {
    color: var(--text);
    font-weight: 700;
    font-size: 0.85rem;
}

.stakeRowLeague[b-bfeixh8137] {
    color: var(--muted);
    font-size: 0.75rem;
}

.stakeRowFormat[b-bfeixh8137] {
    display: inline-block;
    margin-top: 2px;
    font-size: 0.65rem;
    color: var(--mutedFaint);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stakeRowMatch[b-bfeixh8137] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
}

.stakeRowTeam[b-bfeixh8137] {
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stakeRowVs[b-bfeixh8137] {
    color: var(--mutedFaint);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stakeRowPick[b-bfeixh8137] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stakeRowPickLabel[b-bfeixh8137],
.stakeRowStakeLabel[b-bfeixh8137] {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--mutedFaint);
    font-weight: 700;
}

.stakeRowPickTeam[b-bfeixh8137] {
    font-weight: 800;
    color: var(--text);
}

.stakeRowPickOdds[b-bfeixh8137] {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.stakeRowStake[b-bfeixh8137] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stakeRowStakeVal[b-bfeixh8137] {
    font-weight: 800;
    color: var(--text);
}

.stakeRowStatus[b-bfeixh8137] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.stakeStatusOpen[b-bfeixh8137] {
    background: rgba(96, 165, 250, 0.14);
    color: #93c5fd;
    border: 1px solid rgba(96, 165, 250, 0.32);
}

.stakeStatusWon[b-bfeixh8137] {
    background: rgba(34, 197, 94, 0.14);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.32);
}

.stakeStatusLost[b-bfeixh8137] {
    background: rgba(248, 113, 113, 0.14);
    color: #fca5a5;
    border: 1px solid rgba(248, 113, 113, 0.32);
}

.stakeStatusVoided[b-bfeixh8137] {
    background: rgba(148, 163, 184, 0.14);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.28);
}

.stakeRowNet[b-bfeixh8137] {
    text-align: right;
    font-weight: 900;
}

.stakeNetPos[b-bfeixh8137] { color: #22c55e; }
.stakeNetNeg[b-bfeixh8137] { color: #f87171; }

/* Actions on open rows take the rightmost grid slot in place of the net column.
   flex-shrink:0 + whitespace-nowrap on the button so the column won't squeeze the
   "Edit"/"Cancel" label off-screen when the row is constrained. */
.stakeRowActions[b-bfeixh8137] {
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
    white-space: nowrap;
}

.stakeRowActions .stakeRowBtn[b-bfeixh8137] { white-space: nowrap; }

.stakeRowBtn[b-bfeixh8137] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}

.stakeRowBtn:hover:not(:disabled)[b-bfeixh8137] {
    background: rgba(255, 255, 255, 0.08);
    border-color: color-mix(in srgb, var(--border) 50%, var(--text));
}

.stakeRowBtn:disabled[b-bfeixh8137] {
    opacity: 0.5;
    cursor: not-allowed;
}

.stakeRowBtnSave[b-bfeixh8137] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #052812;
    border: 0;
}

.stakeRowBtnRemove[b-bfeixh8137] {
    background: rgba(248, 113, 113, 0.1);
    color: #fca5a5;
    border: 1px solid rgba(248, 113, 113, 0.3);
}

/* ── Inline editor (open rows) ── */
.stakeRowEditor[b-bfeixh8137] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 14px 14px 16px 14px;
    border-top: 1px dashed var(--border);
    background: rgba(96, 165, 250, 0.04);
}

.stakeRowEditorField[b-bfeixh8137] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stakeRowEditorField > label[b-bfeixh8137] {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--mutedFaint);
    font-weight: 700;
}

.stakeRowEditorTeams[b-bfeixh8137] {
    display: flex;
    gap: 6px;
}

.stakeRowEditorTeamBtn[b-bfeixh8137] {
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}

.stakeRowEditorTeamBtn:hover[b-bfeixh8137] {
    background: rgba(255, 255, 255, 0.08);
}

.stakeRowEditorTeamBtnActive[b-bfeixh8137] {
    background: rgba(96, 165, 250, 0.16);
    border-color: #60a5fa;
}

.stakeRowEditorInput[b-bfeixh8137] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 8px;
    color: var(--text);
    font-weight: 800;
    font-size: 0.85rem;
    width: 90px;
    font-family: inherit;
    -moz-appearance: textfield;
}

.stakeRowEditorInput[b-bfeixh8137]::-webkit-outer-spin-button,
.stakeRowEditorInput[b-bfeixh8137]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.stakeRowEditorInput:focus[b-bfeixh8137] {
    outline: none;
    border-color: #60a5fa;
}

.stakeRowEditorStakeWrap[b-bfeixh8137] {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.stakeRowEditorUnit[b-bfeixh8137] {
    font-size: 0.78rem;
    color: var(--mutedFaint);
    font-weight: 800;
}

.stakeRowEditorError[b-bfeixh8137] {
    flex: 1 1 100%;
    color: #fca5a5;
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.25);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.78rem;
}

.stakeRowEditorActions[b-bfeixh8137] {
    flex: 1 1 100%;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ── Pager ── */
.stakePager[b-bfeixh8137] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}

.stakePagerBtn[b-bfeixh8137] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.stakePagerBtn:hover:not(:disabled)[b-bfeixh8137] {
    background: rgba(255, 255, 255, 0.08);
}

.stakePagerBtn:disabled[b-bfeixh8137] {
    opacity: 0.5;
    cursor: not-allowed;
}

.stakePagerLabel[b-bfeixh8137] {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
}

/* ── Disclaimer + empty state ── */
.stakeDisclaimer[b-bfeixh8137] {
    margin-top: 18px;
    font-size: 0.72rem;
    color: var(--mutedFaint);
    line-height: 1.5;
    text-align: center;
}

.stakeTrackerEmpty[b-bfeixh8137] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 20px;
    background: var(--panel);
    border: 1px dashed var(--border);
    border-radius: 12px;
    color: var(--muted);
}

.stakeTrackerEmpty svg[b-bfeixh8137] {
    color: var(--mutedFaint);
}

.stakeTrackerEmptyTitle[b-bfeixh8137] {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text);
    margin: 4px 0 0 0;
}

.stakeTrackerEmptyText[b-bfeixh8137] {
    font-size: 0.9rem;
    line-height: 1.5;
    max-width: 360px;
    text-align: center;
    margin: 0;
}

/* ── Responsive: collapse the row grid to a stack on small screens ── */
@media (max-width: 900px) {
    .stakeRowHeader[b-bfeixh8137] {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .stakeRowMatch[b-bfeixh8137] { grid-column: 1 / -1; order: 1; }
    .stakeRowMeta[b-bfeixh8137] { grid-column: 1 / -1; order: 0; flex-direction: row; gap: 8px; align-items: center; }
    .stakeRowPick[b-bfeixh8137] { order: 2; }
    .stakeRowStake[b-bfeixh8137] { order: 3; }
    .stakeRowStatus[b-bfeixh8137] { order: 4; grid-column: 1; justify-self: start; }
    .stakeRowNet[b-bfeixh8137],
    .stakeRowActions[b-bfeixh8137] { order: 5; grid-column: 2; justify-self: end; }
}

/* ── Combo (parlay) UI ──
   Combos are visually distinct from standalone pick rows: they get a left-edge
   accent stripe (matching the model-color convention from elsewhere in the app),
   an explicit "N-leg combo" badge, and an expandable legs section. The combine
   affordance in the section head turns from neutral text into a primary button
   when 2+ rows are selected. */

.stakeRowSelect[b-bfeixh8137] {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding: 0 4px 0 0;
}
.stakeRowSelect input[type="checkbox"][b-bfeixh8137] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #60a5fa;
}
.stakeRowSelected[b-bfeixh8137] {
    background: color-mix(in srgb, #60a5fa 8%, var(--panel));
    border-color: color-mix(in srgb, #60a5fa 35%, var(--borderSoft));
}

.stakeComboCombineBtn[b-bfeixh8137] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #60a5fa, #4f80d8);
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter 120ms ease;
}
.stakeComboCombineBtn:hover[b-bfeixh8137] { filter: brightness(1.08); }

.stakeComboHint[b-bfeixh8137] {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--mutedFaint);
    font-style: italic;
}

.stakeComboRow[b-bfeixh8137] {
    border-left: 3px solid #60a5fa;
    background: linear-gradient(135deg, color-mix(in srgb, #60a5fa 5%, transparent), var(--panel) 60%);
}
.stakeComboHeader[b-bfeixh8137] {
    cursor: pointer;
}
.stakeComboBadge[b-bfeixh8137] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: color-mix(in srgb, #60a5fa 14%, transparent);
    color: #60a5fa;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 5px;
    letter-spacing: 0.01em;
}
.stakeComboChev[b-bfeixh8137] {
    color: var(--mutedFaint);
    transition: transform 160ms ease;
    margin-left: auto;
}
.stakeComboRowExpanded .stakeComboChev[b-bfeixh8137] {
    transform: rotate(180deg);
}

.stakeComboLegs[b-bfeixh8137] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 14px 14px;
    border-top: 1px solid var(--borderSoft);
    background: color-mix(in srgb, var(--text) 2%, transparent);
}
.stakeComboLeg[b-bfeixh8137] {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    align-items: center;
    gap: 12px;
    padding: 6px 8px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--text) 3%, transparent);
    font-size: 0.78rem;
}
/* When the leg's inline editor is open, drop the leg row's bottom corners so the
   editor visually attaches as the same card rather than floating below a rounded
   chip. Matches the stakeRowExpanded treatment for standalone picks. */
.stakeComboLegEditing[b-bfeixh8137] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.stakeComboLegEditBtn[b-bfeixh8137] {
    padding: 3px 9px;
    font-size: 0.7rem;
    border-radius: 5px;
}
/* Editor reuses .stakeRowEditor visuals; this override tightens the padding so it
   nests cleanly inside the combo legs container (which already has its own padding)
   and aligns the top edge with the leg row above. */
.stakeComboLegEditor[b-bfeixh8137] {
    margin: 0 0 4px;
    padding: 10px 12px;
    border: 1px solid var(--borderSoft);
    border-top: 0;
    border-radius: 0 0 6px 6px;
    background: color-mix(in srgb, var(--text) 4%, transparent);
}
.stakeComboLegLeague[b-bfeixh8137] {
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--mutedFaint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.stakeComboLegMatch[b-bfeixh8137] {
    color: var(--text);
    /* Flex column so the team names sit on top and the kickoff date stacks underneath
       as a small muted line. Without this the inner spans would lay out inline and the
       date would crowd the teams horizontally. */
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0; /* allow truncation if a team name is long */
}
.stakeComboLegTeams[b-bfeixh8137] {
    color: var(--text);
}
.stakeComboLegDate[b-bfeixh8137] {
    font-size: 0.66rem;
    color: var(--mutedFaint);
    letter-spacing: 0.02em;
}
.stakeComboLegPick[b-bfeixh8137] {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    color: var(--text);
}
.stakeComboActions[b-bfeixh8137] {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}
.stakeComboDeleteBtn[b-bfeixh8137] {
    background: transparent;
    color: #f87171;
    border: 1px solid color-mix(in srgb, #f87171 30%, transparent);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 100ms ease;
}
.stakeComboDeleteBtn:hover[b-bfeixh8137] {
    background: color-mix(in srgb, #f87171 12%, transparent);
}

.stakeStatusPending[b-bfeixh8137] {
    background: color-mix(in srgb, var(--text) 10%, transparent);
    color: var(--textSoft);
}

/* ── Combo creation modal ──
   Position:fixed overlay backdrop + centered modal box. The backdrop swallows
   click events to close the modal; the modal itself stops propagation so clicks
   inside don't dismiss. */
.stakeComboModalBackdrop[b-bfeixh8137] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
    padding: 16px;
    backdrop-filter: blur(2px);
}
.stakeComboModal[b-bfeixh8137] {
    background: var(--panel);
    border: 1px solid var(--borderSoft);
    border-radius: 14px;
    width: 100%;
    max-width: 540px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    padding: 18px 20px 16px;
}
.stakeComboModalHead[b-bfeixh8137] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.stakeComboModalTitle[b-bfeixh8137] {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.01em;
}
.stakeComboModalClose[b-bfeixh8137] {
    background: transparent;
    border: 0;
    color: var(--mutedFaint);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: background-color 100ms ease, color 100ms ease;
}
.stakeComboModalClose:hover[b-bfeixh8137] {
    background: color-mix(in srgb, var(--text) 8%, transparent);
    color: var(--text);
}

.stakeComboModalLegs[b-bfeixh8137] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: color-mix(in srgb, var(--text) 3%, transparent);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 14px;
}
.stakeComboModalLeg[b-bfeixh8137] {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    font-size: 0.78rem;
}
.stakeComboModalLegLeague[b-bfeixh8137] {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--mutedFaint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.stakeComboModalLegMatch[b-bfeixh8137] {
    color: var(--text);
    /* Same flex-column stack as stakeComboLegMatch — keep teams + kickoff aligned. */
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.stakeComboModalLegPick[b-bfeixh8137] {
    color: #60a5fa;
    font-weight: 600;
}
.stakeComboModalLegOdds[b-bfeixh8137] {
    font-weight: 700;
    color: var(--text);
}

.stakeComboModalFields[b-bfeixh8137] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 14px;
}
.stakeComboModalField[b-bfeixh8137] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.stakeComboModalFieldLabel[b-bfeixh8137] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.stakeComboModalFieldRow[b-bfeixh8137] {
    display: flex;
    align-items: center;
    gap: 10px;
}
.stakeComboModalInput[b-bfeixh8137] {
    background: color-mix(in srgb, var(--text) 5%, transparent);
    border: 1px solid var(--borderSoft);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    width: 110px;
    outline: none;
    transition: border-color 120ms ease;
}
.stakeComboModalInput:focus[b-bfeixh8137] {
    border-color: #60a5fa;
}
.stakeComboModalUnits[b-bfeixh8137] {
    color: var(--mutedFaint);
    font-weight: 600;
    font-size: 0.85rem;
}
.stakeComboModalResetBtn[b-bfeixh8137] {
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
    color: var(--textSoft);
    border-radius: 6px;
    padding: 5px 9px;
    font-size: 0.68rem;
    cursor: pointer;
    font-weight: 600;
}
.stakeComboModalResetBtn:hover[b-bfeixh8137] {
    background: color-mix(in srgb, var(--text) 8%, transparent);
}
.stakeComboModalComputedNote[b-bfeixh8137] {
    font-size: 0.7rem;
    color: var(--mutedFaint);
    font-style: italic;
}

.stakeComboModalPreview[b-bfeixh8137] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: color-mix(in srgb, #10b981 7%, transparent);
    border: 1px solid color-mix(in srgb, #10b981 25%, transparent);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
}
.stakeComboModalPreviewLabel[b-bfeixh8137] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--textSoft);
}
.stakeComboModalPreviewValue[b-bfeixh8137] {
    font-size: 1.15rem;
    font-weight: 800;
    color: #10b981;
}

.stakeComboModalError[b-bfeixh8137] {
    background: color-mix(in srgb, #f87171 10%, transparent);
    color: #f87171;
    border: 1px solid color-mix(in srgb, #f87171 30%, transparent);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.78rem;
    margin-bottom: 12px;
}

.stakeComboModalActions[b-bfeixh8137] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.stakeComboModalCancelBtn[b-bfeixh8137],
.stakeComboModalConfirmBtn[b-bfeixh8137] {
    border: 0;
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter 120ms ease, background-color 120ms ease;
}
.stakeComboModalCancelBtn[b-bfeixh8137] {
    background: color-mix(in srgb, var(--text) 8%, transparent);
    color: var(--textSoft);
}
.stakeComboModalCancelBtn:hover[b-bfeixh8137] { background: color-mix(in srgb, var(--text) 14%, transparent); }
.stakeComboModalConfirmBtn[b-bfeixh8137] {
    background: linear-gradient(135deg, #60a5fa, #4f80d8);
    color: #fff;
}
.stakeComboModalConfirmBtn:hover[b-bfeixh8137] { filter: brightness(1.08); }
.stakeComboModalConfirmBtn:disabled[b-bfeixh8137],
.stakeComboModalCancelBtn:disabled[b-bfeixh8137] {
    opacity: 0.55;
    cursor: not-allowed;
}

@media (max-width: 540px) {
    .stakeComboLeg[b-bfeixh8137], .stakeComboModalLeg[b-bfeixh8137] {
        grid-template-columns: 1fr auto;
        row-gap: 4px;
    }
    .stakeComboLegLeague[b-bfeixh8137], .stakeComboModalLegLeague[b-bfeixh8137] { grid-column: 1 / -1; }
    .stakeComboBadge[b-bfeixh8137] { font-size: 0.62rem; padding: 3px 7px; }
}
/* /Components/Pages/AdminPipeline.razor.rz.scp.css */
.pipelinePage[b-h37hlm2wlt] {
    max-width: 760px;
    margin: 40px auto;
    padding: 0 20px;
}

.pageHeader[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.pageTitle[b-h37hlm2wlt] {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.02em;
}

.adminBadge[b-h37hlm2wlt] {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: linear-gradient(135deg, #f43f5e, #e11d48);
    color: #fff;
}

.pageDesc[b-h37hlm2wlt] {
    font-size: 0.9rem;
    color: var(--muted);
    margin-bottom: 32px;
    line-height: 1.5;
}

/* ── Access Denied ── */
.accessDenied[b-h37hlm2wlt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 80px 20px;
    text-align: center;
}

.accessTitle[b-h37hlm2wlt] {
    font-size: 1.3rem;
    font-weight: 800;
    color: #f87171;
}

.accessMsg[b-h37hlm2wlt] {
    font-size: 0.9rem;
    color: var(--muted);
}

/* ── Host Status Card ── */
.hostCard[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    margin-bottom: 16px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.hostRow[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
}

.hostInfo[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hostDot[b-h37hlm2wlt] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.hostDotOnline[b-h37hlm2wlt] {
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

.hostDotOffline[b-h37hlm2wlt] {
    background: #64748b;
}

.hostDotStarting[b-h37hlm2wlt] {
    background: #f59e0b;
    animation: hostPulse-b-h37hlm2wlt 1.2s ease-in-out infinite;
}

@keyframes hostPulse-b-h37hlm2wlt {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.hostLabel[b-h37hlm2wlt] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
}

.hostStatus[b-h37hlm2wlt] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hostStatus-online[b-h37hlm2wlt] { color: #22c55e; }
.hostStatus-offline[b-h37hlm2wlt] { color: #64748b; }
.hostStatus-starting[b-h37hlm2wlt] { color: #f59e0b; }

.hostBtn[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.1);
    color: #60a5fa;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.hostBtn:hover:not(:disabled)[b-h37hlm2wlt] {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.3);
}

.hostBtnOnline[b-h37hlm2wlt] {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    cursor: default;
}

.hostBtnOnline:hover[b-h37hlm2wlt] {
    background: rgba(34, 197, 94, 0.08) !important;
    border-color: rgba(34, 197, 94, 0.2) !important;
}

.hostActions[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hostBtnRestart[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid rgba(251, 191, 36, 0.25);
    border-radius: 10px;
    background: rgba(251, 191, 36, 0.08);
    color: #fbbf24;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.hostBtnRestart:hover:not(:disabled)[b-h37hlm2wlt] {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.4);
}

.hostBtnRestart:disabled[b-h37hlm2wlt] {
    opacity: 0.5;
    cursor: not-allowed;
}

.hostBtnDisabled[b-h37hlm2wlt] {
    opacity: 0.7;
    cursor: not-allowed;
}

.btnSpinnerSmall[b-h37hlm2wlt] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-h37hlm2wlt 0.7s linear infinite;
}

/* ── Controls Card ── */
.controlsCard[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}

.controlsRow[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.selectAllBtn[b-h37hlm2wlt] {
    padding: 10px 20px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.selectAllBtn:hover:not(:disabled)[b-h37hlm2wlt] {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.15);
}

.selectAllBtn:disabled[b-h37hlm2wlt] {
    opacity: 0.5;
    cursor: not-allowed;
}

.terminateBtn[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid rgba(248, 113, 113, 0.3);
    border-radius: 10px;
    background: rgba(248, 113, 113, 0.1);
    color: #f87171;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.terminateBtn:hover[b-h37hlm2wlt] {
    background: rgba(248, 113, 113, 0.2);
    border-color: rgba(248, 113, 113, 0.5);
    box-shadow: 0 0 12px rgba(248, 113, 113, 0.15);
}

.runBtn[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    letter-spacing: 0.01em;
}

.runBtn:hover:not(.runBtnDisabled)[b-h37hlm2wlt] {
    box-shadow: 0 4px 24px rgba(99, 102, 241, 0.4);
    transform: translateY(-1px);
}

.runBtnDisabled[b-h37hlm2wlt] {
    opacity: 0.7;
    cursor: not-allowed;
}

.startedAt[b-h37hlm2wlt] {
    font-size: 0.82rem;
    color: var(--muted);
}

.btnSpinner[b-h37hlm2wlt] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-h37hlm2wlt 0.7s linear infinite;
}

/* ── Checkbox ── */
.stepCheckbox[b-h37hlm2wlt] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    cursor: pointer;
}

.stepCheckbox input[type="checkbox"][b-h37hlm2wlt] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.checkmark[b-h37hlm2wlt] {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 2px solid var(--border);
    background: rgba(255, 255, 255, 0.03);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stepCheckbox input[type="checkbox"]:checked ~ .checkmark[b-h37hlm2wlt] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-color: #6366f1;
}

.stepCheckbox input[type="checkbox"]:checked ~ .checkmark[b-h37hlm2wlt]::after {
    content: '';
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translateY(-1px);
}

.stepCheckbox:hover .checkmark[b-h37hlm2wlt] {
    border-color: rgba(99, 102, 241, 0.5);
}

.stepCheckbox input[type="checkbox"]:disabled ~ .checkmark[b-h37hlm2wlt] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Steps ── */
.stepsContainer[b-h37hlm2wlt] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.stepDisabled[b-h37hlm2wlt] {
    opacity: 0.5;
}

.stepDisabled .stepName[b-h37hlm2wlt],
.stepDisabled .stepDesc[b-h37hlm2wlt] {
    color: var(--muted);
}

.stepSkipped[b-h37hlm2wlt] {
    opacity: 0.6;
}

.stepSkipped[b-h37hlm2wlt]::before {
    background: #64748b;
}

.stepCard[b-h37hlm2wlt] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 24px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.stepCard[b-h37hlm2wlt]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--border);
    transition: background 0.3s ease;
}

.stepRunning[b-h37hlm2wlt] {
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 0 24px rgba(99, 102, 241, 0.08);
}

.stepRunning[b-h37hlm2wlt]::before {
    background: linear-gradient(180deg, #6366f1, #8b5cf6);
    animation: pulseGlow-b-h37hlm2wlt 2s ease-in-out infinite;
}

.stepCompleted[b-h37hlm2wlt]::before {
    background: #22c55e;
}

.stepFailed[b-h37hlm2wlt]::before {
    background: #f87171;
}

.stepHeader[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.stepIndicator[b-h37hlm2wlt] {
    position: relative;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stepNumber[b-h37hlm2wlt] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
}

.pulseRing[b-h37hlm2wlt] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #6366f1;
    animation: pulseExpand-b-h37hlm2wlt 1.5s ease-out infinite;
}

.pulseDot[b-h37hlm2wlt] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #6366f1;
    animation: pulse-b-h37hlm2wlt 1.5s ease-in-out infinite;
}

.stepInfo[b-h37hlm2wlt] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.stepName[b-h37hlm2wlt] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
}

.stepDesc[b-h37hlm2wlt] {
    font-size: 0.8rem;
    color: var(--muted);
}

.stepMeta[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.stepBadge[b-h37hlm2wlt] {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.stepBadge-running[b-h37hlm2wlt] {
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
}

.stepBadge-completed[b-h37hlm2wlt] {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
}

.stepBadge-failed[b-h37hlm2wlt] {
    background: rgba(248, 113, 113, 0.12);
    color: #f87171;
}

.stepBadge-skipped[b-h37hlm2wlt] {
    background: rgba(148, 163, 184, 0.12);
    color: #94a3b8;
}

.stepDuration[b-h37hlm2wlt] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.stepDurationLive[b-h37hlm2wlt] {
    color: #818cf8;
}

/* ── Tournament Selection ── */
.tournamentSelection[b-h37hlm2wlt] {
    margin-top: 16px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.tournamentSelHeader[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.tournamentSelTitle[b-h37hlm2wlt] {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
}

.tournamentSelActions[b-h37hlm2wlt] {
    display: flex;
    gap: 6px;
}

.tournamentSelBtn[b-h37hlm2wlt] {
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.tournamentSelBtn:hover:not(:disabled)[b-h37hlm2wlt] {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.15);
}

.tournamentSelBtn:disabled[b-h37hlm2wlt] {
    opacity: 0.5;
    cursor: not-allowed;
}

.tournamentGrid[b-h37hlm2wlt] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tournamentItem[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
    user-select: none;
}

.tournamentItem:hover[b-h37hlm2wlt] {
    background: rgba(255, 255, 255, 0.04);
}

.tournamentItemActive[b-h37hlm2wlt] {
    background: rgba(99, 102, 241, 0.06);
}

.tournamentItemActive:hover[b-h37hlm2wlt] {
    background: rgba(99, 102, 241, 0.1);
}

.tournamentItem input[type="checkbox"][b-h37hlm2wlt] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.tournamentCheckmark[b-h37hlm2wlt] {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 2px solid var(--border);
    background: rgba(255, 255, 255, 0.03);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.tournamentItem input[type="checkbox"]:checked ~ .tournamentCheckmark[b-h37hlm2wlt] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-color: #6366f1;
}

.tournamentItem input[type="checkbox"]:checked ~ .tournamentCheckmark[b-h37hlm2wlt]::after {
    content: '';
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translateY(-1px);
}

.tournamentName[b-h37hlm2wlt] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    flex: 1;
}

.tournamentIntlBadge[b-h37hlm2wlt] {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ── Progress Bar ── */
.progressContainer[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.progressTrack[b-h37hlm2wlt] {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
}

.progressFill[b-h37hlm2wlt] {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #8b5cf6, #a78bfa);
    border-radius: 3px;
    transition: width 0.5s ease;
    position: relative;
}

.progressFill[b-h37hlm2wlt]::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-b-h37hlm2wlt 2s infinite;
}

.progressText[b-h37hlm2wlt] {
    font-size: 0.78rem;
    font-weight: 700;
    color: #a78bfa;
    min-width: 36px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── Phase Info ── */
.phaseInfo[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(99, 102, 241, 0.06);
    border-radius: 8px;
    flex-wrap: wrap;
}

.phaseLabel[b-h37hlm2wlt] {
    font-size: 0.78rem;
    color: var(--muted);
    white-space: nowrap;
}

.phaseValue[b-h37hlm2wlt] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #818cf8;
}

.progressDetail[b-h37hlm2wlt] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #a78bfa;
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

/* ── ETA Info ── */
.etaInfo[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 6px 12px;
    background: rgba(251, 191, 36, 0.05);
    border-radius: 8px;
}

.etaValue[b-h37hlm2wlt] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #fbbf24;
    font-variant-numeric: tabular-nums;
}

/* ── Completed Items List ── */
.completedItemsList[b-h37hlm2wlt] {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 4px;
}

.completedItem[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.4;
}

.completedItem svg[b-h37hlm2wlt] {
    flex-shrink: 0;
}

.moreItems[b-h37hlm2wlt] {
    color: var(--muted);
    opacity: 0.6;
    font-style: italic;
    padding-left: 20px;
}

/* ── Metrics Grid ── */
.metricsGrid[b-h37hlm2wlt] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.metricItem[b-h37hlm2wlt] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 14px;
    background: rgba(34, 197, 94, 0.06);
    border: 1px solid rgba(34, 197, 94, 0.12);
    border-radius: 8px;
}

.metricValue[b-h37hlm2wlt] {
    font-size: 0.88rem;
    font-weight: 700;
    color: #22c55e;
    font-variant-numeric: tabular-nums;
}

.metricLabel[b-h37hlm2wlt] {
    font-size: 0.7rem;
    color: var(--muted);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Best Config ── */
.bestConfigInfo[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(251, 191, 36, 0.06);
    border-radius: 8px;
}

.bestConfigLabel[b-h37hlm2wlt] {
    font-size: 0.78rem;
    color: var(--muted);
    white-space: nowrap;
}

.bestConfigValue[b-h37hlm2wlt] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #fbbf24;
}

/* ── Error Info ── */
.errorInfo[b-h37hlm2wlt] {
    margin-top: 12px;
    padding: 10px 14px;
    background: rgba(248, 113, 113, 0.06);
    border: 1px solid rgba(248, 113, 113, 0.15);
    border-radius: 8px;
    font-size: 0.82rem;
    color: #f87171;
    line-height: 1.5;
}

/* ── Log Section ── */
.logSection[b-h37hlm2wlt] {
    margin-top: 32px;
}

.logTitle[b-h37hlm2wlt] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}

.logContainer[b-h37hlm2wlt] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 0;
    max-height: 320px;
    overflow-y: auto;
}

.logEntry[b-h37hlm2wlt] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 6px 20px;
    font-size: 0.82rem;
    line-height: 1.5;
}

.logEntry:hover[b-h37hlm2wlt] {
    background: rgba(255, 255, 255, 0.02);
}

.logTime[b-h37hlm2wlt] {
    font-weight: 600;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    font-size: 0.78rem;
}

.logMsg[b-h37hlm2wlt] {
    color: var(--text);
}

.logEntry-error .logMsg[b-h37hlm2wlt] {
    color: #f87171;
}

.logEntry-success .logMsg[b-h37hlm2wlt] {
    color: #22c55e;
}

.logEntry-warn .logMsg[b-h37hlm2wlt] {
    color: #fbbf24;
}

/* ── Animations ── */
@keyframes spin-b-h37hlm2wlt {
    to { transform: rotate(360deg); }
}

@keyframes pulse-b-h37hlm2wlt {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.9); }
}

@keyframes pulseExpand-b-h37hlm2wlt {
    0% { transform: scale(0.8); opacity: 0.8; }
    100% { transform: scale(1.5); opacity: 0; }
}

@keyframes pulseGlow-b-h37hlm2wlt {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes shimmer-b-h37hlm2wlt {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ── Mobile ── */
@media (max-width: 600px) {
    .pipelinePage[b-h37hlm2wlt] {
        margin: 20px auto;
        padding: 0 14px;
    }

    .pageTitle[b-h37hlm2wlt] {
        font-size: 1.3rem;
    }

    .runBtn[b-h37hlm2wlt] {
        padding: 12px 20px;
        font-size: 0.88rem;
        width: 100%;
        justify-content: center;
    }

    .controlsCard[b-h37hlm2wlt] {
        flex-direction: column;
        align-items: stretch;
    }

    .controlsRow[b-h37hlm2wlt] {
        flex-direction: column;
        gap: 10px;
    }

    .selectAllBtn[b-h37hlm2wlt] {
        width: 100%;
        text-align: center;
    }

    .stepCard[b-h37hlm2wlt] {
        padding: 16px;
    }

    .stepHeader[b-h37hlm2wlt] {
        flex-wrap: wrap;
    }

    .stepMeta[b-h37hlm2wlt] {
        width: 100%;
        justify-content: flex-end;
        margin-top: 4px;
    }

    .metricsGrid[b-h37hlm2wlt] {
        grid-template-columns: repeat(2, 1fr);
    }

    .logEntry[b-h37hlm2wlt] {
        padding: 6px 12px;
        font-size: 0.76rem;
    }

    .bestConfigInfo[b-h37hlm2wlt],
    .phaseInfo[b-h37hlm2wlt] {
        flex-direction: column;
        align-items: flex-start;
    }

    .deployTaskCard[b-h37hlm2wlt] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* ── Database Migrations Section ── */

.migrationsSection[b-h37hlm2wlt] {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.migrationsSectionHeader[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.migrationsSectionTitle[b-h37hlm2wlt] {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
}

.migrationsRefreshBtn[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.08);
    color: #60a5fa;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    margin-left: auto;
}

.migrationsRefreshBtn:hover:not(:disabled)[b-h37hlm2wlt] {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.4);
}

.migrationsRefreshBtn:disabled[b-h37hlm2wlt] {
    opacity: 0.6;
    cursor: not-allowed;
}

.migrationsSectionDesc[b-h37hlm2wlt] {
    font-size: 0.85rem;
    color: var(--muted);
    margin-bottom: 24px;
    line-height: 1.5;
}

.migrationsUpToDate[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    background: rgba(34, 197, 94, 0.06);
    border: 1px solid rgba(34, 197, 94, 0.15);
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #22c55e;
}

.migrationDbGroup[b-h37hlm2wlt] {
    margin-bottom: 24px;
}

.migrationDbHeader[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    color: var(--text);
}

.migrationDbName[b-h37hlm2wlt] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}

.migrationDbCount[b-h37hlm2wlt] {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.migrationCard[b-h37hlm2wlt] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 8px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.migrationCard[b-h37hlm2wlt]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #f59e0b;
    transition: background 0.3s ease;
}

.migrationApplied[b-h37hlm2wlt]::before {
    background: #22c55e;
}

.migrationFailed[b-h37hlm2wlt]::before {
    background: #f87171;
}

.migrationApplying[b-h37hlm2wlt]::before {
    background: linear-gradient(180deg, #6366f1, #8b5cf6);
    animation: pulseGlow-b-h37hlm2wlt 2s ease-in-out infinite;
}

.migrationApplied[b-h37hlm2wlt] {
    border-color: rgba(34, 197, 94, 0.2);
    opacity: 0.7;
}

.migrationFailed[b-h37hlm2wlt] {
    border-color: rgba(248, 113, 113, 0.3);
}

.migrationApplying[b-h37hlm2wlt] {
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.08);
}

.migrationHeader[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.migrationInfo[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.migrationNameBlock[b-h37hlm2wlt] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.migrationName[b-h37hlm2wlt] {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
    font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.migrationTimestamp[b-h37hlm2wlt] {
    font-size: 0.72rem;
    color: var(--muted);
    font-weight: 500;
}

.migrationActions[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.migrationToggleSql[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.migrationToggleSql:hover[b-h37hlm2wlt] {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.15);
}

.migrationSqlContainer[b-h37hlm2wlt] {
    margin-top: 14px;
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 10px;
    overflow: hidden;
}

.migrationSqlHeader[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: rgba(99, 102, 241, 0.06);
    border-bottom: 1px solid rgba(99, 102, 241, 0.1);
}

.migrationSqlLabel[b-h37hlm2wlt] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #818cf8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.migrationSqlLines[b-h37hlm2wlt] {
    font-size: 0.72rem;
    color: var(--muted);
    font-weight: 500;
}

.migrationSqlCode[b-h37hlm2wlt] {
    margin: 0;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.3);
    font-size: 0.78rem;
    line-height: 1.6;
    color: #a5b4fc;
    font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', monospace;
    overflow-x: auto;
    max-height: 400px;
    overflow-y: auto;
    white-space: pre;
    tab-size: 4;
}

.migrationSqlCode code[b-h37hlm2wlt] {
    font-family: inherit;
    font-size: inherit;
}

.migrationError[b-h37hlm2wlt] {
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(248, 113, 113, 0.06);
    border: 1px solid rgba(248, 113, 113, 0.15);
    border-radius: 8px;
    font-size: 0.82rem;
    color: #f87171;
    line-height: 1.5;
}

.migrationSuccessMsg[b-h37hlm2wlt] {
    margin-top: 8px;
    font-size: 0.78rem;
    color: #22c55e;
    font-weight: 600;
}

.migrationApplyRow[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.migrationApplyBtn[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border: none;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    transition: all 0.2s ease;
}

.migrationApplyBtn:hover:not(:disabled)[b-h37hlm2wlt] {
    box-shadow: 0 4px 20px rgba(34, 197, 94, 0.35);
    transform: translateY(-1px);
}

.migrationApplyBtn:disabled[b-h37hlm2wlt] {
    opacity: 0.6;
    cursor: not-allowed;
}

.migrationDeclineBtn[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border: 1px solid rgba(248, 113, 113, 0.25);
    border-radius: 10px;
    background: rgba(248, 113, 113, 0.06);
    color: #f87171;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.migrationDeclineBtn:hover[b-h37hlm2wlt] {
    background: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.4);
}

/* ── Production Deployment Section ── */

.deploySection[b-h37hlm2wlt] {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.deploySectionHeader[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.deploySectionTitle[b-h37hlm2wlt] {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
}

.deployBadge[b-h37hlm2wlt] {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
}

.deploySectionDesc[b-h37hlm2wlt] {
    font-size: 0.85rem;
    color: var(--muted);
    margin-bottom: 24px;
    line-height: 1.5;
}

.deployStepsContainer[b-h37hlm2wlt] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.deployTaskCard[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 10px;
    background: var(--card);
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: border-color 0.2s, background 0.2s;
}

.deployTaskCard:hover[b-h37hlm2wlt] {
    border-color: rgba(255, 255, 255, 0.08);
}

.deployTaskRunning[b-h37hlm2wlt] {
    border-color: rgba(99, 102, 241, 0.4);
    background: rgba(99, 102, 241, 0.04);
}

.deployTaskCompleted[b-h37hlm2wlt] {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.03);
}

.deployTaskFailed[b-h37hlm2wlt] {
    border-color: rgba(248, 113, 113, 0.3);
    background: rgba(248, 113, 113, 0.03);
}

.deployTaskInfo[b-h37hlm2wlt] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.deployTaskHeader[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.deployTaskName[b-h37hlm2wlt] {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
}

.deployTaskDesc[b-h37hlm2wlt] {
    font-size: 0.78rem;
    color: var(--muted);
}

.deployTaskStatus[b-h37hlm2wlt] {
    font-size: 0.75rem;
    margin-top: 4px;
    font-weight: 500;
}

.deployTaskStatusInfo[b-h37hlm2wlt] {
    color: #818cf8;
}

.deployTaskStatusError[b-h37hlm2wlt] {
    color: #f87171;
}

.deployControlsRow[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.deployBtn[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border: none;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    transition: opacity 0.2s, transform 0.1s;
}

.deployBtn:hover:not(.deployBtnDisabled)[b-h37hlm2wlt] {
    opacity: 0.9;
    transform: translateY(-1px);
}

.deployBtnDisabled[b-h37hlm2wlt] {
    opacity: 0.4;
    cursor: not-allowed;
}

.pulseRingSmall[b-h37hlm2wlt] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #818cf8;
    animation: pulseRing 1.5s ease-out infinite;
    position: absolute;
}

.pulseDotSmall[b-h37hlm2wlt] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #818cf8;
    animation: pulseDot 1.5s ease-in-out infinite;
}

/* ── Training Exclusions Section ── */

.exclusionsSection[b-h37hlm2wlt] {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.exclusionsSectionHeader[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.exclusionsSectionTitle[b-h37hlm2wlt] {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
}

.exclusionsRefreshBtn[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.08);
    color: #60a5fa;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    margin-left: auto;
}

.exclusionsRefreshBtn:hover:not(:disabled)[b-h37hlm2wlt] {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.4);
}

.exclusionsRefreshBtn:disabled[b-h37hlm2wlt] {
    opacity: 0.6;
    cursor: not-allowed;
}

.exclusionsSectionDesc[b-h37hlm2wlt] {
    font-size: 0.85rem;
    color: var(--muted);
    margin-bottom: 24px;
    line-height: 1.5;
}

.exclusionsContent[b-h37hlm2wlt] {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.exclusionsSubsection[b-h37hlm2wlt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.exclusionsSubHeader[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.exclusionsSubTitle[b-h37hlm2wlt] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
}

.exclusionsSubCount[b-h37hlm2wlt] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted);
    padding: 2px 10px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
}

.exclusionsEmpty[b-h37hlm2wlt] {
    font-size: 0.85rem;
    color: var(--muted);
    padding: 16px 20px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.exclusionsList[b-h37hlm2wlt] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.exclusionItem[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    gap: 12px;
}

.exclusionInfo[b-h37hlm2wlt] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.exclusionPattern[b-h37hlm2wlt] {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
}

.exclusionReason[b-h37hlm2wlt] {
    font-size: 0.75rem;
    color: var(--muted);
}

.exclusionMatchCount[b-h37hlm2wlt] {
    font-size: 0.72rem;
    color: #f59e0b;
    font-weight: 600;
}

.exclusionRemoveBtn[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(248, 113, 113, 0.2);
    border-radius: 8px;
    background: rgba(248, 113, 113, 0.06);
    color: #f87171;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.exclusionRemoveBtn:hover:not(:disabled)[b-h37hlm2wlt] {
    background: rgba(248, 113, 113, 0.15);
    border-color: rgba(248, 113, 113, 0.4);
}

.exclusionRemoveBtn:disabled[b-h37hlm2wlt] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── All Tournaments Table ── */

.tournamentsTableContainer[b-h37hlm2wlt] {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel);
}

.tournamentsTable[b-h37hlm2wlt] {
    display: flex;
    flex-direction: column;
}

.tournamentRow[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    gap: 12px;
}

.tournamentRow:last-child[b-h37hlm2wlt] {
    border-bottom: none;
}

.tournamentRow:hover[b-h37hlm2wlt] {
    background: rgba(255, 255, 255, 0.02);
}

.tournamentRowExcluded[b-h37hlm2wlt] {
    opacity: 0.55;
}

.tournamentRowInfo[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.tournamentRowName[b-h37hlm2wlt] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tournamentRowMeta[b-h37hlm2wlt] {
    font-size: 0.72rem;
    color: var(--muted);
    white-space: nowrap;
}

.tournamentRowActions[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.tournamentExclBadge[b-h37hlm2wlt] {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(248, 113, 113, 0.12);
    color: #f87171;
    border: 1px solid rgba(248, 113, 113, 0.2);
}

.tournamentExclBtn[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.tournamentExclBtn:hover:not(:disabled)[b-h37hlm2wlt] {
    background: rgba(248, 113, 113, 0.08);
    border-color: rgba(248, 113, 113, 0.3);
    color: #f87171;
}

.tournamentExclBtn:disabled[b-h37hlm2wlt] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Add Exclusion Form ── */

.addExclusionForm[b-h37hlm2wlt] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.addExclusionInput[b-h37hlm2wlt] {
    flex: 1;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel);
    color: var(--text);
    font-size: 0.82rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s ease;
}

.addExclusionInput:focus[b-h37hlm2wlt] {
    border-color: rgba(99, 102, 241, 0.5);
}

.addExclusionInput[b-h37hlm2wlt]::placeholder {
    color: var(--muted);
    opacity: 0.6;
}

.addExclusionReasonInput[b-h37hlm2wlt] {
    flex: 1.5;
}

.addExclusionBtn[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: 10px;
    background: rgba(34, 197, 94, 0.08);
    color: #22c55e;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.addExclusionBtn:hover:not(:disabled)[b-h37hlm2wlt] {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.4);
}

.addExclusionBtn:disabled[b-h37hlm2wlt] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Re-evaluate Predictions ── */

.reevalSection[b-h37hlm2wlt] {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.reevalSectionHeader[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.reevalSectionTitle[b-h37hlm2wlt] {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
}

.reevalSectionDesc[b-h37hlm2wlt] {
    font-size: 0.85rem;
    color: var(--muted);
    margin-bottom: 24px;
    line-height: 1.5;
}

.reevalControls[b-h37hlm2wlt] {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 20px;
}

.reevalBtn[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid rgba(96, 165, 250, 0.3);
    background: rgba(96, 165, 250, 0.08);
    color: #60a5fa;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.reevalBtn:hover:not(:disabled)[b-h37hlm2wlt] {
    background: rgba(96, 165, 250, 0.15);
    border-color: rgba(96, 165, 250, 0.5);
}

.reevalBtn:disabled[b-h37hlm2wlt] {
    opacity: 0.5;
    cursor: not-allowed;
}

.reevalResults[b-h37hlm2wlt] {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.reevalResultRow[b-h37hlm2wlt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}

.reevalResultLabel[b-h37hlm2wlt] {
    font-size: 0.85rem;
    color: var(--muted);
}

.reevalResultValue[b-h37hlm2wlt] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.reevalResultHighlight[b-h37hlm2wlt] {
    color: #60a5fa;
}

/* ── Bet365 Odds Fetch ─────────────────────────────────────────── */
.oddsFetchSection[b-h37hlm2wlt] {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.oddsFetchSectionHeader[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.oddsFetchSectionTitle[b-h37hlm2wlt] {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
}

.oddsFetchSectionDesc[b-h37hlm2wlt] {
    font-size: 0.85rem;
    color: var(--muted);
    margin-bottom: 24px;
    line-height: 1.5;
}

.oddsFetchControls[b-h37hlm2wlt] {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.oddsFetchInputGroup[b-h37hlm2wlt] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.oddsFetchInputLabel[b-h37hlm2wlt] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--mutedFaint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.oddsFetchInput[b-h37hlm2wlt] {
    width: 120px;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.oddsFetchInput:focus[b-h37hlm2wlt] {
    outline: none;
    border-color: rgba(74, 222, 128, 0.4);
    background: rgba(74, 222, 128, 0.06);
}

.oddsFetchBtn[b-h37hlm2wlt] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid rgba(74, 222, 128, 0.3);
    background: rgba(74, 222, 128, 0.08);
    color: #4ade80;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.oddsFetchBtn:hover:not(:disabled)[b-h37hlm2wlt] {
    background: rgba(74, 222, 128, 0.15);
    border-color: rgba(74, 222, 128, 0.5);
}

.oddsFetchBtn:disabled[b-h37hlm2wlt] {
    opacity: 0.5;
    cursor: not-allowed;
}

.oddsFetchResults[b-h37hlm2wlt] {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.oddsFetchResultRow[b-h37hlm2wlt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}

.oddsFetchResultLabel[b-h37hlm2wlt] {
    font-size: 0.85rem;
    color: var(--muted);
}

.oddsFetchResultValue[b-h37hlm2wlt] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.oddsFetchResultHighlight[b-h37hlm2wlt] {
    color: #4ade80;
}

/* /Components/Pages/ApiDocs.razor.rz.scp.css */
.docsPage[b-5yk9nvxnqf] { max-width: 880px; margin: 0 auto; padding: 2rem 1.25rem 4rem; color: #dbe4f2; }

.docsHero[b-5yk9nvxnqf] { padding: 1.5rem 0 1rem; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 1.5rem; }
.docsH1[b-5yk9nvxnqf] { font-size: 2.1rem; font-weight: 800; margin: 0 0 .6rem; color: #fff; }
.docsLede[b-5yk9nvxnqf] { color: #aab4c4; font-size: 1.05rem; line-height: 1.6; max-width: 680px; margin: 0 0 1.25rem; }

.docsCta[b-5yk9nvxnqf] { display: inline-block; background: #a78bfa; color: #1a1230; font-weight: 700; padding: .6rem 1.2rem; border-radius: 10px; text-decoration: none; transition: background .15s; }
.docsCta:hover[b-5yk9nvxnqf] { background: #b79dff; }
.docsAccountNote[b-5yk9nvxnqf] { color: #8b97a8; font-size: .88rem; margin: .85rem 0 0; }

.docsToc[b-5yk9nvxnqf] { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; padding: .9rem 0; margin-bottom: 1rem; }
.docsToc a[b-5yk9nvxnqf] { color: #a78bfa; text-decoration: none; font-size: .9rem; font-weight: 600; }
.docsToc a:hover[b-5yk9nvxnqf] { text-decoration: underline; }

.docsSection[b-5yk9nvxnqf] { padding: 1.25rem 0; border-top: 1px solid rgba(255,255,255,.06); scroll-margin-top: 1rem; }
.docsSection h2[b-5yk9nvxnqf] { font-size: 1.45rem; font-weight: 700; margin: 0 0 .75rem; color: #fff; display: flex; align-items: center; gap: .6rem; }
.docsH3[b-5yk9nvxnqf] { font-size: 1.05rem; font-weight: 700; margin: 1.25rem 0 .6rem; color: #dbe4f2; display: flex; align-items: center; gap: .5rem; }
.docsP[b-5yk9nvxnqf] { color: #aab4c4; line-height: 1.65; margin: 0 0 .9rem; }
.docsLink[b-5yk9nvxnqf] { color: #a78bfa; }

.docsFree[b-5yk9nvxnqf] { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #10b981; background: rgba(16,185,129,.12); padding: .15rem .5rem; border-radius: 999px; }
.docsCost[b-5yk9nvxnqf] { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #fbbf24; background: rgba(251,191,36,.12); padding: .15rem .5rem; border-radius: 999px; }

.docsCode[b-5yk9nvxnqf] { background: #0f131c; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 1rem; color: #cdd6e4; font-family: ui-monospace, monospace; font-size: .82rem; line-height: 1.5; overflow-x: auto; white-space: pre; margin: 0 0 1rem; }

.docsP code[b-5yk9nvxnqf], .docsEndpoints code[b-5yk9nvxnqf], .docsTable code[b-5yk9nvxnqf] { background: rgba(255,255,255,.07); padding: .1rem .4rem; border-radius: 5px; font-family: ui-monospace, monospace; font-size: .85em; color: #dbe4f2; }

.docsTable[b-5yk9nvxnqf] { width: 100%; border-collapse: collapse; margin: 0 0 1rem; font-size: .9rem; }
.docsTable th[b-5yk9nvxnqf] { text-align: left; color: #8b97a8; font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; padding: .5rem .6rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.docsTable td[b-5yk9nvxnqf] { padding: .55rem .6rem; border-bottom: 1px solid rgba(255,255,255,.06); color: #cdd6e4; vertical-align: top; }

.docsEndpoints[b-5yk9nvxnqf] { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: .55rem; }
.docsEndpoints li[b-5yk9nvxnqf] { color: #aab4c4; font-size: .92rem; }

.docsGet[b-5yk9nvxnqf], .docsPost[b-5yk9nvxnqf] { font-size: .68rem; font-weight: 800; padding: .12rem .45rem; border-radius: 5px; letter-spacing: .05em; }
.docsGet[b-5yk9nvxnqf] { background: rgba(96,165,250,.15); color: #60a5fa; }
.docsPost[b-5yk9nvxnqf] { background: rgba(167,139,250,.15); color: #a78bfa; }
/* /Components/Pages/Auth/AuthLayout.razor.rz.scp.css */
.auth-page[b-kogswozd7u] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
    padding: 2rem 1rem;
}

.auth-logo[b-kogswozd7u] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #e2e8f0;
    text-decoration: none;
    margin-bottom: 2rem;
    letter-spacing: -0.02em;
}

.auth-logo:hover[b-kogswozd7u] {
    color: #fff;
    text-decoration: none;
}
/* /Components/Pages/Bracket.razor.rz.scp.css */
.brkSection[b-njwl7pm1fk] { padding-top: 8px; }

/* ── Header ── */
.brkHeader[b-njwl7pm1fk] {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.brkHeaderMain[b-njwl7pm1fk] { display: flex; align-items: center; gap: 12px; }
.brkLeagueLogo[b-njwl7pm1fk] { width: 40px; height: 40px; object-fit: contain; }
.brkTitle[b-njwl7pm1fk] { font-size: 1.4rem; font-weight: 700; color: var(--text); margin: 0; }
.brkSubtitle[b-njwl7pm1fk] { font-size: 0.85rem; color: var(--muted); margin: 2px 0 0; }
.brkLegend[b-njwl7pm1fk] { display: flex; gap: 14px; flex-wrap: wrap; }
.brkLegItem[b-njwl7pm1fk] { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--muted); }
.brkDot[b-njwl7pm1fk] { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }

/* ── Model performance scorecard (top-right, tabbed per model) ── */
.brkPerf[b-njwl7pm1fk] {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: var(--radiusSm); padding: 10px 12px; width: 360px; max-width: 100%;
}
.brkPerfHead[b-njwl7pm1fk] {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--mutedFaint); font-weight: 700; margin-bottom: 8px;
}
.brkPerfHelp[b-njwl7pm1fk] {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 13px; height: 13px; border-radius: 50%; font-size: 0.6rem; font-weight: 700;
    color: var(--muted); border: 1px solid var(--border); cursor: help; text-transform: none;
}
.brkPerfHelp:hover[b-njwl7pm1fk] { color: var(--text); border-color: var(--muted); }
/* Stylised on-hover tooltip window (title + body). */
.brkTip[b-njwl7pm1fk] {
    position: absolute; top: calc(100% + 7px); left: -4px; z-index: 30;
    width: 234px; max-width: 74vw; padding: 10px 12px; border-radius: 9px;
    background: #1b2233; border: 1px solid var(--border);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    text-transform: none; letter-spacing: 0; text-align: left;
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity 0.14s ease, transform 0.14s ease; pointer-events: none;
}
.brkPerfHelp:hover .brkTip[b-njwl7pm1fk], .brkPerfHelp:focus .brkTip[b-njwl7pm1fk] { opacity: 1; visibility: visible; transform: translateY(0); }
.brkTipTitle[b-njwl7pm1fk] { display: block; font-weight: 700; font-size: 0.74rem; color: var(--text); margin-bottom: 4px; }
.brkTipBody[b-njwl7pm1fk] { display: block; font-weight: 400; font-size: 0.7rem; color: var(--muted); line-height: 1.45; }
.brkPerfTabs[b-njwl7pm1fk] { display: flex; gap: 4px; margin-bottom: 10px; }
.brkPerfTab[b-njwl7pm1fk] {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
    font-size: 0.72rem; padding: 5px 4px; border-radius: 7px; min-width: 0;
    border: 1px solid var(--border); background: transparent; color: var(--muted);
    cursor: pointer; transition: all 0.15s ease;
}
.brkPerfTab:hover[b-njwl7pm1fk] { color: var(--text); border-color: var(--muted); }
.brkPerfTab .brkDot[b-njwl7pm1fk] { width: 7px; height: 7px; }
.brkPerfTabName[b-njwl7pm1fk] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brkPerfTabOn[b-njwl7pm1fk] {
    color: var(--text); font-weight: 600;
    border-color: var(--brkPerfClr); background: color-mix(in srgb, var(--brkPerfClr) 12%, transparent);
}
.brkPerfBody[b-njwl7pm1fk] { display: flex; flex-direction: column; gap: 6px; }
.brkPerfStat[b-njwl7pm1fk] { display: flex; align-items: center; gap: 8px; }
.brkPerfMkt[b-njwl7pm1fk] { width: 66px; flex-shrink: 0; font-size: 0.72rem; color: var(--muted); }
.brkPerfBar[b-njwl7pm1fk] {
    flex: 1; height: 6px; border-radius: 999px; overflow: hidden;
    background: color-mix(in srgb, var(--border) 60%, transparent); min-width: 36px;
}
.brkPerfFill[b-njwl7pm1fk] { display: block; height: 100%; border-radius: 999px; }
.brkPerfVal[b-njwl7pm1fk] { flex-shrink: 0; font-size: 0.72rem; color: var(--textSoft); min-width: 122px; text-align: right; display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; }
.brkPerfVal b[b-njwl7pm1fk] { color: var(--text); font-weight: 700; }
.brkPerfPct[b-njwl7pm1fk] { color: var(--mutedFaint); }
.brkPerfRoi[b-njwl7pm1fk] { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 72px; text-align: right; white-space: nowrap; }
.brkPerfRoiPos[b-njwl7pm1fk] { color: #4ade80; }
.brkPerfRoiNeg[b-njwl7pm1fk] { color: #f87171; }
.brkPerfRoiNa[b-njwl7pm1fk] { color: var(--mutedFaint); min-width: 72px; text-align: right; }
/* Trailing fixed cell keeps bars aligned whether or not a row carries the BEST tag. */
.brkPerfTagCell[b-njwl7pm1fk] { width: 38px; flex-shrink: 0; display: flex; justify-content: flex-end; }
.brkPerfBestTag[b-njwl7pm1fk] {
    font-size: 0.55rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
    color: #4ade80; padding: 1px 5px; border-radius: 4px; line-height: 1.4;
    border: 1px solid rgba(74, 222, 128, 0.4); background: rgba(74, 222, 128, 0.12);
}

/* ── Stage tabs ── */
.brkTabs[b-njwl7pm1fk] { display: flex; gap: 8px; margin-bottom: 16px; }
.brkTab[b-njwl7pm1fk] {
    font-size: 0.85rem; padding: 7px 16px; border-radius: 999px;
    border: 1px solid var(--border); background: transparent; color: var(--muted);
    cursor: pointer; transition: all 0.15s ease;
}
.brkTab:hover[b-njwl7pm1fk] { color: var(--text); border-color: var(--muted); }
.brkTabOn[b-njwl7pm1fk] { background: var(--panel); border-color: var(--blueLight); color: var(--text); font-weight: 600; }

/* ── Bracket columns ── */
.brkScroll[b-njwl7pm1fk] { overflow-x: auto; padding-bottom: 8px; min-width: 0; max-width: 100%; }
.brkCols[b-njwl7pm1fk] { display: flex; gap: 20px; min-width: min-content; align-items: flex-start; }
.brkCol[b-njwl7pm1fk] { display: flex; flex-direction: column; gap: 18px; width: 300px; flex-shrink: 0; }
.brkCell[b-njwl7pm1fk] { display: flex; flex-direction: column; gap: 10px; }
.brkRoundLabel[b-njwl7pm1fk] {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--mutedFaint); font-weight: 600; padding-left: 2px;
}

/* ── Match card ── */
.brkMatch[b-njwl7pm1fk] {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: var(--radiusSm); padding: 8px; display: flex; flex-direction: column; gap: 4px;
}
.brkMatchLive[b-njwl7pm1fk] { border-color: rgba(96, 165, 250, 0.4); }
.brkMatchLiveNow[b-njwl7pm1fk] { border-color: rgba(74, 222, 128, 0.55); box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.25); }

/* Team-info area links to the match page (only when both teams are known → [href]). */
.brkMatchLink[b-njwl7pm1fk] { display: block; text-decoration: none; color: inherit; border-radius: 6px; }
.brkMatchLink[href][b-njwl7pm1fk] { cursor: pointer; }
.brkMatchLink[href]:hover[b-njwl7pm1fk] { background: color-mix(in srgb, var(--blueLight) 8%, transparent); }
.brkMatchLink[href]:hover .brkNm[b-njwl7pm1fk] { color: var(--text); }

.brkDate[b-njwl7pm1fk] { font-size: 0.68rem; color: var(--mutedFaint); font-weight: 500; margin: 0 0 5px 3px; }

/* ── Live-series badge + score ── */
.brkLiveTag[b-njwl7pm1fk] {
    display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
    font-size: 0.64rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    color: #4ade80; margin: 0 0 5px 3px;
}
.brkLiveDot[b-njwl7pm1fk] {
    width: 7px; height: 7px; border-radius: 50%; background: #4ade80; flex-shrink: 0;
    animation: brkLivePulse-b-njwl7pm1fk 1.6s ease-out infinite;
}
@keyframes brkLivePulse-b-njwl7pm1fk {
    0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); }
    70% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
.brkScLive[b-njwl7pm1fk] { color: #4ade80; }

.brkRow[b-njwl7pm1fk] { display: flex; align-items: center; gap: 9px; padding: 4px 5px; border-radius: 7px; }
.brkWin[b-njwl7pm1fk] { background: rgba(96, 165, 250, 0.10); }
.brkTbd[b-njwl7pm1fk] { opacity: 0.55; }
.brkLogo[b-njwl7pm1fk] { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.brkLogoPh[b-njwl7pm1fk] {
    width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.55rem; font-weight: 600; color: var(--muted); flex-shrink: 0;
}
.brkNm[b-njwl7pm1fk] {
    flex: 1; font-size: 0.85rem; color: var(--textSoft); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.brkWin .brkNm[b-njwl7pm1fk] { color: var(--text); font-weight: 600; }
.brkSc[b-njwl7pm1fk] { font-size: 0.9rem; font-weight: 700; color: var(--muted); min-width: 14px; text-align: center; }
.brkWin .brkSc[b-njwl7pm1fk] { color: var(--blueLight); }
/* Market odds on the team row (upcoming only — completed shows the score instead). */
.brkTrack[b-njwl7pm1fk] { margin-top: 6px; }

.brkOdds[b-njwl7pm1fk] {
    font-size: 0.74rem; font-weight: 700; color: var(--textSoft); flex-shrink: 0;
    padding: 1px 6px; border-radius: 5px; border: 1px solid var(--border);
    background: color-mix(in srgb, var(--border) 30%, transparent); font-variant-numeric: tabular-nums;
}
/* Closing line on a finished game — muted, so the result score stays dominant. */
.brkOddsFinal[b-njwl7pm1fk] { font-weight: 600; color: var(--mutedFaint); background: transparent; border-color: transparent; padding: 1px 2px; }

/* ── Prediction overlay ── */
.brkPred[b-njwl7pm1fk] { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 7px; }
.brkPending[b-njwl7pm1fk] { font-size: 0.72rem; color: var(--mutedFaint); font-style: italic; }
.brkPredLabel[b-njwl7pm1fk] {
    font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--mutedFaint); margin-bottom: 5px;
}
.brkBar[b-njwl7pm1fk] {
    height: 7px; border-radius: 999px; background: rgba(148, 163, 184, 0.18);
    overflow: hidden; margin-bottom: 5px;
}
.brkBarFill[b-njwl7pm1fk] { display: block; height: 100%; background: #22d3ee; border-radius: 999px; }
.brkPredPick[b-njwl7pm1fk] { font-size: 0.78rem; color: var(--text); font-weight: 600; margin-bottom: 7px; }
.brkPredPct[b-njwl7pm1fk] { color: var(--muted); font-weight: 500; }

.brkChips[b-njwl7pm1fk] { display: flex; flex-wrap: wrap; gap: 8px; }
.brkChip[b-njwl7pm1fk] { display: flex; align-items: center; gap: 4px; font-size: 0.72rem; color: var(--muted); }
.brkChipLabel[b-njwl7pm1fk] { color: var(--mutedFaint); }
.brkChipPct[b-njwl7pm1fk] { color: var(--textSoft); font-weight: 600; }
.brkBlur[b-njwl7pm1fk] { filter: blur(4px); user-select: none; }

/* ── Series strip + model legend ── */
.brkSeries[b-njwl7pm1fk] { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border); }
.brkLegend2[b-njwl7pm1fk] { display: flex; flex-wrap: wrap; gap: 5px 10px; margin-top: 8px; }
.brkLeg[b-njwl7pm1fk] { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; }
.brkLegName[b-njwl7pm1fk] { color: var(--mutedFaint); }
.brkLegVal[b-njwl7pm1fk] { color: var(--textSoft); font-weight: 600; }
.brkLegLock[b-njwl7pm1fk] { color: var(--mutedFaint); }

/* Locked (free-tier, upcoming) single-model strip */
.brkStripLite[b-njwl7pm1fk] { display: flex; align-items: center; gap: 8px; }
.brkStripRail[b-njwl7pm1fk] { font-size: 0.68rem; font-weight: 600; color: var(--muted); flex-shrink: 0; min-width: 26px; text-align: center; }
.brkStripTrack[b-njwl7pm1fk] { position: relative; flex: 1; height: 22px; }
.brkStripLine[b-njwl7pm1fk] { position: absolute; top: 50%; left: 0; right: 0; height: 2px; background: rgba(148, 163, 184, 0.25); transform: translateY(-50%); }
.brkStripMid[b-njwl7pm1fk] { position: absolute; top: 50%; left: 50%; width: 2px; height: 10px; background: rgba(148, 163, 184, 0.35); transform: translate(-50%, -50%); }
.brkStripDot[b-njwl7pm1fk] { position: absolute; top: 50%; transform: translate(-50%, -50%); background: #60a5fa; color: #0b1220; font-size: 0.5rem; font-weight: 700; width: 22px; height: 14px; border-radius: 999px; display: flex; align-items: center; justify-content: center; }

.brkMktLock[b-njwl7pm1fk] { color: #a78bfa; min-width: 32px; display: inline-flex; justify-content: flex-end; text-decoration: none; }
.brkMktLock:hover[b-njwl7pm1fk] { color: #c4b5fd; }

/* ── Free-tier upsell ── */
.brkUpsell[b-njwl7pm1fk] {
    display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
    margin-top: 18px; padding: 12px 16px; border: 1px solid var(--border);
    border-radius: var(--radiusSm); background: var(--panelDeep);
    font-size: 0.82rem; color: var(--muted);
}
.brkUpsellCta[b-njwl7pm1fk] {
    font-size: 0.82rem; font-weight: 600; color: #fbbf24; text-decoration: none;
    padding: 6px 14px; border: 1px solid rgba(251, 191, 36, 0.4); border-radius: 999px;
}
.brkUpsellCta:hover[b-njwl7pm1fk] { background: rgba(251, 191, 36, 0.10); }

/* ── Match footer: accuracy badge + expand toggle ── */
.brkFoot[b-njwl7pm1fk] { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.brkBadge[b-njwl7pm1fk] { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 9px; border-radius: 999px; }
.brkBadgeNum[b-njwl7pm1fk] { font-size: 0.8rem; font-weight: 700; line-height: 1; }
.brkBadgeLbl[b-njwl7pm1fk] { font-size: 0.6rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.85; }
.brkBadgeGood[b-njwl7pm1fk] { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.brkBadgeMid[b-njwl7pm1fk] { background: rgba(251, 191, 36, 0.15); color: #f59e0b; }
.brkBadgeBad[b-njwl7pm1fk] { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

.brkExpand[b-njwl7pm1fk] { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; background: transparent; border: none; color: var(--muted); font-size: 0.72rem; font-weight: 500; cursor: pointer; padding: 3px 4px; }
.brkExpand:hover[b-njwl7pm1fk] { color: var(--text); }
.brkChevron[b-njwl7pm1fk] { transition: transform 0.15s ease; }
.brkChevronUp[b-njwl7pm1fk] { transform: rotate(180deg); }

/* ── Expanded markets panel ── */
.brkPanel[b-njwl7pm1fk] { margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 13px; }
.brkMktHead[b-njwl7pm1fk] { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.brkMktHeadSub[b-njwl7pm1fk] { color: var(--mutedFaint); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 0.66rem; }
/* Favoured team (whose % the rows show) on the Series/Game winner headers. */
.brkMktHeadTeam[b-njwl7pm1fk] { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; min-width: 0; text-transform: none; letter-spacing: 0; }
.brkMktHeadLogo[b-njwl7pm1fk] { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }
.brkMktHeadTeamName[b-njwl7pm1fk] { font-size: 0.72rem; font-weight: 600; color: var(--textSoft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brkMktRow[b-njwl7pm1fk] { display: flex; align-items: center; gap: 8px; padding: 2px 0; font-size: 0.76rem; }
.brkMktName[b-njwl7pm1fk] { color: var(--textSoft); min-width: 84px; flex-shrink: 0; }
.brkMiniBar[b-njwl7pm1fk] { flex: 1; height: 5px; border-radius: 999px; background: rgba(148, 163, 184, 0.18); overflow: hidden; min-width: 36px; }
.brkMiniFill[b-njwl7pm1fk] { display: block; height: 100%; background: #22d3ee; border-radius: 999px; }
.brkMiniModal[b-njwl7pm1fk] { opacity: 1; }
.brkMktVal[b-njwl7pm1fk] { min-width: 32px; text-align: right; color: var(--text); font-weight: 600; font-size: 0.74rem; }
.brkMktUnder[b-njwl7pm1fk] { color: var(--mutedFaint); font-size: 0.66rem; min-width: 62px; text-align: right; }
.brkMktCap[b-njwl7pm1fk] { font-size: 0.62rem; color: var(--mutedFaint); margin-top: 5px; }

/* Free-tier teaser where the premium markets (handicap / totals / exact) would sit. */
.brkMktPremium[b-njwl7pm1fk] {
    display: flex; align-items: center; gap: 8px; margin-top: 10px;
    padding: 9px 11px; border-radius: 8px; text-decoration: none;
    color: #a78bfa; font-size: 0.74rem; font-weight: 600;
    border: 1px solid rgba(167, 139, 250, 0.35);
    background: color-mix(in srgb, #a78bfa 10%, transparent);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.brkMktPremium:hover[b-njwl7pm1fk] {
    border-color: rgba(167, 139, 250, 0.6);
    background: color-mix(in srgb, #a78bfa 16%, transparent);
}

/* Per-model market line: label + a row of model chips (dot + %, plus ✓/✗ once settled). */
.brkMktLine[b-njwl7pm1fk] { display: flex; align-items: center; gap: 8px; padding: 3px 0; flex-wrap: wrap; }
.brkMktLineLabel[b-njwl7pm1fk] { font-size: 0.74rem; color: var(--textSoft); min-width: 76px; flex-shrink: 0; }
.brkModelRow[b-njwl7pm1fk] { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.brkModelChip[b-njwl7pm1fk] { display: inline-flex; align-items: center; gap: 3px; font-size: 0.7rem; }
.brkModelPct[b-njwl7pm1fk] { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.brkModelLock[b-njwl7pm1fk] { color: #a78bfa; display: inline-flex; }
.brkModelLock:hover[b-njwl7pm1fk] { color: #c4b5fd; }
.brkTick[b-njwl7pm1fk] { display: inline-flex; align-items: center; flex-shrink: 0; }
.brkTickOk[b-njwl7pm1fk] { color: #22c55e; }
.brkTickNo[b-njwl7pm1fk] { color: #ef4444; }
.brkExactScore[b-njwl7pm1fk] { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--textSoft); min-width: 32px; }
.brkExactActual .brkExactScore[b-njwl7pm1fk] { color: #22d3ee; }
.brkExactFlag[b-njwl7pm1fk] { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.03em; color: #22d3ee; border: 1px solid rgba(34, 211, 238, 0.4); border-radius: 4px; padding: 0 5px; }

/* ── Empty state ── */
.brkEmpty[b-njwl7pm1fk] { text-align: center; padding: 60px 20px; }
.brkEmptyTitle[b-njwl7pm1fk] { font-size: 1.3rem; color: var(--text); margin: 0 0 8px; }
.brkEmptyText[b-njwl7pm1fk] { font-size: 0.9rem; color: var(--muted); margin: 0 0 18px; }
.brkEmptyLink[b-njwl7pm1fk] { font-size: 0.9rem; color: var(--blueLight); text-decoration: none; }

@media (max-width: 640px) {
    .brkHeader[b-njwl7pm1fk] { gap: 10px; }
    .brkLegend[b-njwl7pm1fk] { gap: 10px; }
    .brkCol[b-njwl7pm1fk] { width: 270px; }
    .brkPerf[b-njwl7pm1fk] { width: 100%; }
}
/* /Components/Pages/Contact.razor.rz.scp.css */
.contactPage[b-iqpbv45ecs] {
    max-width: 680px;
    margin: 0 auto;
    padding: 40px 20px 80px;
}

.contactHero[b-iqpbv45ecs] {
    margin-bottom: 44px;
}

.contactTitle[b-iqpbv45ecs] {
    font-size: 2rem;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -0.03em;
    margin-bottom: 12px;
}

.contactLead[b-iqpbv45ecs] {
    font-size: 0.95rem;
    color: var(--muted);
    line-height: 1.7;
    max-width: 520px;
}

/* ── Cards ── */
.contactCards[b-iqpbv45ecs] {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
}

.contactCard[b-iqpbv45ecs] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 24px;
    border-radius: 12px;
    background: var(--card);
    border: 1px solid var(--border);
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.contactCard:hover[b-iqpbv45ecs] {
    border-color: var(--blue);
    box-shadow: 0 0 0 1px var(--blue);
    text-decoration: none;
}

.contactCardIcon[b-iqpbv45ecs] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(59, 130, 246, 0.08);
    color: var(--blue);
}

.contactCardLabel[b-iqpbv45ecs] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.contactCardValue[b-iqpbv45ecs] {
    font-size: 0.9rem;
    color: var(--text);
    font-weight: 500;
    word-break: break-all;
}

/* ── Note ── */
.contactNote[b-iqpbv45ecs] {
    text-align: center;
}

.contactNote p[b-iqpbv45ecs] {
    font-size: 0.84rem;
    color: var(--muted);
    opacity: 0.7;
    line-height: 1.6;
}

/* ── Mobile ── */
@media (max-width: 640px) {
    .contactTitle[b-iqpbv45ecs] {
        font-size: 1.6rem;
    }

    .contactCards[b-iqpbv45ecs] {
        flex-direction: column;
    }
}
/* /Components/Pages/Dev/LiveMarketsPreview.razor.rz.scp.css */
.lmpWrap[b-1zsiixbs1k] {
    max-width: 760px;
    margin: 0 auto;
    padding: 28px 16px 60px;
}

.lmpTitle[b-1zsiixbs1k] {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 6px;
}

.lmpSub[b-1zsiixbs1k] {
    font-size: 0.82rem;
    color: var(--muted, #94a3b8);
    line-height: 1.5;
    margin-bottom: 18px;
}

.lmpToggle[b-1zsiixbs1k] {
    margin-bottom: 12px;
    font-size: 0.78rem;
    color: var(--muted, #94a3b8);
}

.lmpToggle input[b-1zsiixbs1k] { margin-right: 6px; }
/* /Components/Pages/Home.razor.rz.scp.css */
/* ── Design Tokens (inherited from :root / [data-theme]) ──── */

/* ── Hero Header ───────────────────────────────────────────── */

.hero[b-l0rg40o53e] {
    background: linear-gradient(135deg, #0b1120 0%, #162044 40%, #1e1145 70%, #0f1623 100%);
    padding: 56px 32px 48px;
    text-align: center;
    border-radius: 0;
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
}

.hero[b-l0rg40o53e]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 20%, rgba(37,99,235,0.12) 0%, transparent 60%),
                radial-gradient(ellipse at 70% 80%, rgba(139,92,246,0.10) 0%, transparent 60%);
    pointer-events: none;
}

.heroContent[b-l0rg40o53e] {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
}

.heroBanner[b-l0rg40o53e] {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}

.heroBannerImg[b-l0rg40o53e] {
    width: 100%;
    max-width: 680px;
    height: auto;
}

.heroTagline[b-l0rg40o53e] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #60cfff;
}

/* Hero value proposition — headline + supporting subhead. Replaces the bare
   tagline so a first-time visitor sees what Riftcast does and the calibrated-
   accuracy differentiator before scrolling into the match cards. */
.heroHeadline[b-l0rg40o53e] {
    margin: 16px auto 12px;
    max-width: 600px;
    font-size: 1.95rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #f1f5fb;
}

.heroSubhead[b-l0rg40o53e] {
    margin: 0 auto;
    max-width: 540px;
    font-size: 1rem;
    line-height: 1.6;
    color: #94a3b8;
}

/* Stats ribbon */
.statsRibbon[b-l0rg40o53e] {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 28px;
    flex-wrap: wrap;
}

.statChip[b-l0rg40o53e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 20px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    backdrop-filter: blur(8px);
}

.statValue[b-l0rg40o53e] {
    font-size: 1.4rem;
    font-weight: 900;
    color: #e2e8f0;
    letter-spacing: -0.02em;
}

.statLabel[b-l0rg40o53e] {
    font-size: 0.7rem;
    color: rgba(148, 163, 184, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

/* Calibrated-confidence trust strip — honest, data-sourced reliability signal
   (real hit rate of our 80-90% picks). Cyan accent ties to the Consensus colour. */
.heroTrust[b-l0rg40o53e] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 18px auto 0;
    padding: 8px 16px;
    max-width: 560px;
    background: rgba(34, 211, 238, 0.08);
    border: 1px solid rgba(34, 211, 238, 0.22);
    border-radius: 999px;
}
.heroTrustIcon[b-l0rg40o53e] {
    display: inline-flex;
    flex-shrink: 0;
    color: #22d3ee;
}
.heroTrustText[b-l0rg40o53e] {
    font-size: 0.86rem;
    line-height: 1.4;
    color: #c8d5e4;
    text-align: left;
}
.heroTrustLabel[b-l0rg40o53e] {
    font-weight: 700;
    color: #22d3ee;
}
/* Dynamic stat values (ROI %, hit rate) — bright + bold so the numbers pop
   against the muted body text. ::deep because the .htv spans are injected via
   MarkupString and so don't carry this component's scoped-CSS attribute. */
.heroTrust[b-l0rg40o53e]  .htv {
    color: #4ade80;
    font-weight: 700;
}

/* CTA buttons */
.heroCtas[b-l0rg40o53e] {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 28px;
    flex-wrap: wrap;
}

.ctaBtn[b-l0rg40o53e] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.15s ease;
    letter-spacing: 0.01em;
}

.ctaPrimary[b-l0rg40o53e] {
    background: linear-gradient(180deg, #3b82f6, #2563eb);
    color: #fff;
    box-shadow: 0 4px 14px rgba(37,99,235,0.35);
}

.ctaPrimary:hover[b-l0rg40o53e] {
    background: linear-gradient(180deg, #60a5fa, #3b82f6);
    box-shadow: 0 6px 20px rgba(37,99,235,0.45);
    transform: translateY(-1px);
}

.ctaSecondary[b-l0rg40o53e] {
    background: rgba(255,255,255,0.08);
    color: #e2e8f0;
    border: 1px solid rgba(255,255,255,0.15);
}

.ctaSecondary:hover[b-l0rg40o53e] {
    background: rgba(255,255,255,0.14);
    color: #fff;
    transform: translateY(-1px);
}

/* Premium CTA — the canonical purple premium gradient used across the app
   (UpcomingMatchCard, MatchDetail, etc.) so "Go Premium" reads as the same
   premium treatment users see everywhere. */
.ctaPremium[b-l0rg40o53e] {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff;
    box-shadow: 0 4px 14px rgba(124,58,237,0.35);
}

.ctaPremium:hover[b-l0rg40o53e] {
    background: linear-gradient(135deg, #6d28d9, #9333ea);
    box-shadow: 0 6px 20px rgba(124,58,237,0.45);
    transform: translateY(-1px);
}

/* Live-event bracket CTA — amber/gold so it reads as a special international event
   (MSI / Worlds), distinct from the blue "matches" and purple "premium" buttons.
   Rendered only while a tournament bracket is live. */
.ctaBracket[b-l0rg40o53e] {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: #422006;
    box-shadow: 0 4px 14px rgba(245,158,11,0.35);
}

.ctaBracket:hover[b-l0rg40o53e] {
    background: linear-gradient(135deg, #d97706, #f59e0b);
    box-shadow: 0 6px 20px rgba(245,158,11,0.5);
    transform: translateY(-1px);
}

.ctaBracketLogo[b-l0rg40o53e] {
    width: 22px;
    height: 22px;
    object-fit: contain;
    border-radius: 5px;
    background: rgba(0,0,0,0.18);
    padding: 1px;
}

/* Bracket CTA sits on its own centered row below the main two so PC never shows
   three buttons crammed on one line. */
.heroBracketRow[b-l0rg40o53e] {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
}

/* ── Preview Cards (Neon Outline) ────────────────────────── */

.previewCardGrid[b-l0rg40o53e] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 12px 24px 14px;
    margin: 0 auto 28px;
    max-width: 1200px;
    background: rgba(15,22,35,0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 0 0 16px 16px;
}

.previewCard[b-l0rg40o53e] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(18,24,40,0.9), rgba(14,20,35,0.95));
    cursor: pointer;
    transition: all 0.3s ease, box-shadow 0.3s ease;
    font-family: inherit;
    text-align: left;
    color: #c1c9d4;
    min-height: 92px;
}

/* ── Per-tab neon colors (inactive) ── */
.previewCardLive:not(.previewCardDisabled)[b-l0rg40o53e] {
    border-color: rgba(52,211,153,0.25);
    box-shadow: 0 0 8px rgba(52,211,153,0.06), inset 0 0 12px rgba(52,211,153,0.03);
}
.previewCardUpcoming[b-l0rg40o53e] {
    border-color: rgba(96,165,250,0.25);
    box-shadow: 0 0 8px rgba(96,165,250,0.06), inset 0 0 12px rgba(96,165,250,0.03);
}
.previewCardRecent[b-l0rg40o53e] {
    border-color: rgba(251,191,36,0.2);
    box-shadow: 0 0 8px rgba(251,191,36,0.05), inset 0 0 12px rgba(251,191,36,0.02);
}
.previewCardModels[b-l0rg40o53e] {
    border-color: rgba(167,139,250,0.25);
    box-shadow: 0 0 8px rgba(167,139,250,0.06), inset 0 0 12px rgba(167,139,250,0.03);
}

/* ── Per-tab hover glow ── */
.previewCardLive:hover:not(.previewCardDisabled):not(.previewCardActive)[b-l0rg40o53e] {
    border-color: rgba(52,211,153,0.45);
    box-shadow: 0 0 18px rgba(52,211,153,0.12), inset 0 0 20px rgba(52,211,153,0.05);
    transform: translateY(-1px);
}
.previewCardUpcoming:hover:not(.previewCardActive)[b-l0rg40o53e] {
    border-color: rgba(96,165,250,0.45);
    box-shadow: 0 0 18px rgba(96,165,250,0.12), inset 0 0 20px rgba(96,165,250,0.05);
    transform: translateY(-1px);
}
.previewCardRecent:hover:not(.previewCardActive)[b-l0rg40o53e] {
    border-color: rgba(251,191,36,0.4);
    box-shadow: 0 0 18px rgba(251,191,36,0.1), inset 0 0 20px rgba(251,191,36,0.04);
    transform: translateY(-1px);
}
.previewCardModels:hover:not(.previewCardActive)[b-l0rg40o53e] {
    border-color: rgba(167,139,250,0.45);
    box-shadow: 0 0 18px rgba(167,139,250,0.12), inset 0 0 20px rgba(167,139,250,0.05);
    transform: translateY(-1px);
}

/* ── Per-tab active neon glow ── */
.previewCardLive.previewCardActive[b-l0rg40o53e] {
    border-color: rgba(52,211,153,0.6);
    box-shadow: 0 0 24px rgba(52,211,153,0.2), 0 0 48px rgba(52,211,153,0.08), inset 0 0 24px rgba(52,211,153,0.06);
    background: linear-gradient(145deg, rgba(16,55,45,0.8), rgba(14,20,35,0.95));
    color: #fff;
    animation: neonPulseLive-b-l0rg40o53e 2.5s ease-in-out infinite;
}
.previewCardUpcoming.previewCardActive[b-l0rg40o53e] {
    border-color: rgba(96,165,250,0.6);
    box-shadow: 0 0 24px rgba(96,165,250,0.2), 0 0 48px rgba(96,165,250,0.08), inset 0 0 24px rgba(96,165,250,0.06);
    background: linear-gradient(145deg, rgba(20,35,70,0.8), rgba(14,20,35,0.95));
    color: #fff;
    animation: neonPulseBlue-b-l0rg40o53e 2.5s ease-in-out infinite;
}
.previewCardRecent.previewCardActive[b-l0rg40o53e] {
    border-color: rgba(251,191,36,0.5);
    box-shadow: 0 0 24px rgba(251,191,36,0.18), 0 0 48px rgba(251,191,36,0.07), inset 0 0 24px rgba(251,191,36,0.05);
    background: linear-gradient(145deg, rgba(55,40,12,0.7), rgba(14,20,35,0.95));
    color: #fff;
    animation: neonPulseAmber-b-l0rg40o53e 2.5s ease-in-out infinite;
}
.previewCardModels.previewCardActive[b-l0rg40o53e] {
    border-color: rgba(167,139,250,0.6);
    box-shadow: 0 0 24px rgba(167,139,250,0.2), 0 0 48px rgba(167,139,250,0.08), inset 0 0 24px rgba(167,139,250,0.06);
    background: linear-gradient(145deg, rgba(45,30,80,0.8), rgba(14,20,35,0.95));
    color: #fff;
    animation: neonPulseViolet-b-l0rg40o53e 2.5s ease-in-out infinite;
}

@keyframes neonPulseLive-b-l0rg40o53e {
    0%, 100% { box-shadow: 0 0 24px rgba(52,211,153,0.2), 0 0 48px rgba(52,211,153,0.08), inset 0 0 24px rgba(52,211,153,0.06); }
    50% { box-shadow: 0 0 30px rgba(52,211,153,0.28), 0 0 60px rgba(52,211,153,0.12), inset 0 0 30px rgba(52,211,153,0.08); }
}
@keyframes neonPulseBlue-b-l0rg40o53e {
    0%, 100% { box-shadow: 0 0 24px rgba(96,165,250,0.2), 0 0 48px rgba(96,165,250,0.08), inset 0 0 24px rgba(96,165,250,0.06); }
    50% { box-shadow: 0 0 30px rgba(96,165,250,0.28), 0 0 60px rgba(96,165,250,0.12), inset 0 0 30px rgba(96,165,250,0.08); }
}
@keyframes neonPulseAmber-b-l0rg40o53e {
    0%, 100% { box-shadow: 0 0 24px rgba(251,191,36,0.18), 0 0 48px rgba(251,191,36,0.07), inset 0 0 24px rgba(251,191,36,0.05); }
    50% { box-shadow: 0 0 30px rgba(251,191,36,0.25), 0 0 60px rgba(251,191,36,0.10), inset 0 0 30px rgba(251,191,36,0.07); }
}
@keyframes neonPulseViolet-b-l0rg40o53e {
    0%, 100% { box-shadow: 0 0 24px rgba(167,139,250,0.2), 0 0 48px rgba(167,139,250,0.08), inset 0 0 24px rgba(167,139,250,0.06); }
    50% { box-shadow: 0 0 30px rgba(167,139,250,0.28), 0 0 60px rgba(167,139,250,0.12), inset 0 0 30px rgba(167,139,250,0.08); }
}

/* ── Disabled state ── */
.previewCardDisabled[b-l0rg40o53e] {
    opacity: 0.35;
    cursor: not-allowed;
    border-color: rgba(148,163,184,0.12);
    box-shadow: none;
    animation: none;
}

/* ── Label ── */
.previewCardLabel[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(148,163,184,0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Per-tab label colors */
.previewCardLive:not(.previewCardDisabled) .previewCardLabel[b-l0rg40o53e] { color: rgba(52,211,153,0.7); }
.previewCardUpcoming .previewCardLabel[b-l0rg40o53e] { color: rgba(96,165,250,0.7); }
.previewCardRecent .previewCardLabel[b-l0rg40o53e] { color: rgba(251,191,36,0.7); }
.previewCardModels .previewCardLabel[b-l0rg40o53e] { color: rgba(167,139,250,0.7); }

/* Active label colors (brighter) */
.previewCardLive.previewCardActive .previewCardLabel[b-l0rg40o53e] { color: #6ee7b7; }
.previewCardUpcoming.previewCardActive .previewCardLabel[b-l0rg40o53e] { color: #93c5fd; }
.previewCardRecent.previewCardActive .previewCardLabel[b-l0rg40o53e] { color: #fcd34d; }
.previewCardModels.previewCardActive .previewCardLabel[b-l0rg40o53e] { color: #c4b5fd; }

/* Disabled label */
.previewCardDisabled .previewCardLabel[b-l0rg40o53e] { color: rgba(148,163,184,0.4); }

/* ── Live dot ── */
.previewCardLiveDot[b-l0rg40o53e] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34d399;
    animation: previewLiveBlink-b-l0rg40o53e 1.5s ease-in-out infinite;
    box-shadow: 0 0 6px rgba(52,211,153,0.7);
}

@keyframes previewLiveBlink-b-l0rg40o53e {
    0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(52,211,153,0.7); }
    50% { opacity: 0.3; box-shadow: 0 0 2px rgba(52,211,153,0.2); }
}

/* ── Card body ── */
.previewCardBody[b-l0rg40o53e] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
}

.previewCardTeams[b-l0rg40o53e] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.previewCardHighlight[b-l0rg40o53e] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #e2e8f0;
}

.previewCardDetail[b-l0rg40o53e] {
    font-size: 0.75rem;
    color: rgba(203,213,225,0.95);
    font-weight: 600;
}

.previewCardExtra[b-l0rg40o53e] {
    font-size: 0.68rem;
    color: rgba(148,163,184,0.55);
    font-weight: 600;
}

.previewCardMuted[b-l0rg40o53e] {
    font-size: 0.95rem;
    color: rgba(148,163,184,0.6);
    font-style: italic;
}

.previewCardSkeleton[b-l0rg40o53e] {
    display: block;
    height: 14px;
    width: 70%;
    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-b-l0rg40o53e 1.8s ease-in-out infinite;
}

@keyframes skeletonShimmer-b-l0rg40o53e {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ── Section Layout ────────────────────────────────────────── */

.section[b-l0rg40o53e] {
    padding: 0 24px;
    margin-bottom: 36px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Wraps the PicksTeaserBanner shared component so it lines up with .section
   and .previewCardGrid (same 1200px max-width, same horizontal padding).
   Without this the banner stretches edge-to-edge while the surrounding
   content is centered, which looks broken. */
.picksTeaserWrap[b-l0rg40o53e] {
    padding: 0 24px;
    max-width: 1200px;
    margin: 0 auto 20px;
}

.sectionTitle[b-l0rg40o53e] {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -0.02em;
}

.sectionSubtitle[b-l0rg40o53e] {
    margin: 4px 0 20px;
    color: var(--muted);
    font-size: 0.88rem;
}

/* "View weekly reports →" link sitting under the MODEL PERFORMANCES
   heading. Treats it as a quiet secondary CTA — the primary content
   below is the spotlight cards. */
.modelReportsLink[b-l0rg40o53e] {
    display: inline-block;
    margin: -12px 0 16px;
    color: #22d3ee;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color 0.15s, transform 0.15s;
}

.modelReportsLink:hover[b-l0rg40o53e] {
    color: #67e8f9;
    transform: translateX(2px);
}



/* ── Split Tabs (Model Performances) ─────────────────────────
   Split 2 (current) uses the standard purple accent. Split 1 (legacy)
   is styled as an "archived" tab — muted palette, dashed outline,
   reduced opacity — to signal that the data belongs to a previous
   split + a previous generation of model hyperparameters. It stays
   clickable so users can still inspect legacy numbers. */
.splitTabs[b-l0rg40o53e] {
    display: flex;
    gap: 6px;
    max-width: 560px;
    margin: 0 auto 14px;
    padding: 4px;
    background: var(--panelSoft);
    border-radius: 10px;
}
.splitTab[b-l0rg40o53e] {
    flex: 1;
    padding: 9px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--mutedFaint);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    letter-spacing: 0.02em;
}
.splitTab:hover[b-l0rg40o53e] { color: var(--muted); background: rgba(255,255,255,0.04); }

.splitTabArchived[b-l0rg40o53e] {
    border: 1px dashed rgba(148, 163, 184, 0.35);
    opacity: 0.72;
    color: rgba(148, 163, 184, 0.85);
}
.splitTabArchived:hover[b-l0rg40o53e] { opacity: 0.9; color: rgba(203, 213, 225, 1); }
.splitTabArchived.active[b-l0rg40o53e] {
    background: rgba(100, 116, 139, 0.18);
    border-color: rgba(148, 163, 184, 0.6);
    color: #cbd5e1;
    opacity: 1;
}

.splitTabCurrent.active[b-l0rg40o53e] {
    background: rgba(124, 58, 237, 0.22);
    border-color: rgba(124, 58, 237, 0.55);
    color: #ddd6fe;
}

/* ── Time Range Tabs (Model Performances) ─────────────────────
   Secondary filter sitting below the Split tabs. Zooms the Model
   Performances panels into a recent window (24h / 1w / 1m) while
   staying within the selected split. Styled more subtly than the
   split tabs so the visual hierarchy stays clear. */
.timeRangeTabs[b-l0rg40o53e] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 560px;
    margin: 0 auto 18px;
    padding: 3px;
    background: var(--panelSoft);
    border-radius: 8px;
}
.timeRangeTab[b-l0rg40o53e] {
    flex: 1;
    min-width: 72px;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--mutedFaint);
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.timeRangeTab:hover[b-l0rg40o53e] {
    color: var(--muted);
    background: rgba(255,255,255,0.04);
}
.timeRangeTab.active[b-l0rg40o53e] {
    background: rgba(56, 189, 248, 0.18);
    border-color: rgba(56, 189, 248, 0.5);
    color: #bae6fd;
}

.emptyTimeRange[b-l0rg40o53e] {
    text-align: center;
    padding: 24px 16px;
    margin: 8px 0 16px;
    color: var(--mutedFaint);
    font-size: 0.88rem;
    font-style: italic;
    background: var(--panelSoft);
    border: 1px dashed rgba(148, 163, 184, 0.25);
    border-radius: 10px;
}


/* ── Model Selector Tabs ──────────────────────────────────── */

.modelTabs[b-l0rg40o53e] {
    display: flex;
    gap: 4px;
    max-width: 800px;
    margin: 0 auto 20px;
    padding: 4px;
    background: var(--panelSoft);
    border-radius: 12px;
}

.modelTab[b-l0rg40o53e] {
    flex: 1;
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--mutedFaint);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.modelTab:hover[b-l0rg40o53e] { color: var(--muted); background: rgba(255,255,255,0.04); }
.modelTab.active[b-l0rg40o53e] { color: #fff; }
.modelTab.active.tab-blue[b-l0rg40o53e] { background: rgba(96,165,250,0.25); color: #93c5fd; }
.modelTab.active.tab-amber[b-l0rg40o53e] { background: rgba(245,158,11,0.25); color: #fcd34d; }
.modelTab.active.tab-purple[b-l0rg40o53e] { background: rgba(167,139,250,0.25); color: #c4b5fd; }
.modelTab.active.tab-cyan[b-l0rg40o53e] { background: rgba(34,211,238,0.2); color: #67e8f9; }

.tabBadge[b-l0rg40o53e] {
    font-size: 0.55rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Spotlight Card ──────────────────────────────────────── */

.spotlightCard[b-l0rg40o53e] {
    max-width: 800px;
    margin: 0 auto;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.3);
}
.spotlightCard.accent-blue[b-l0rg40o53e] { border-top: 3px solid #60a5fa; }
.spotlightCard.accent-amber[b-l0rg40o53e] { border-top: 3px solid #f59e0b; }
.spotlightCard.accent-purple[b-l0rg40o53e] { border-top: 3px solid #a78bfa; }
.spotlightCard.accent-cyan[b-l0rg40o53e] { border-top: 3px solid #22d3ee; }

.spotlightHeader[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px;
}
.spotlightLeft[b-l0rg40o53e] { display: flex; align-items: center; gap: 10px; }
.spotlightBadges[b-l0rg40o53e] { display: flex; gap: 4px; }

.spotlightName[b-l0rg40o53e] { font-weight: 900; font-size: 1.3rem; }
.spotlightName.name-blue[b-l0rg40o53e] { color: #60a5fa; }
.spotlightName.name-amber[b-l0rg40o53e] { color: #f59e0b; }
.spotlightName.name-purple[b-l0rg40o53e] { color: #a78bfa; }
.spotlightName.name-cyan[b-l0rg40o53e] { color: #22d3ee; }

.spotlightTrained[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mutedFaint);
    padding: 5px 10px;
    border-radius: 6px;
}
.spotlightTrained svg[b-l0rg40o53e] { opacity: 0.6; flex-shrink: 0; }
.spotlightTrained.modelTrainedFastTree[b-l0rg40o53e] { color: #60a5fa; background: rgba(96,165,250,0.08); border: 1px solid rgba(96,165,250,0.15); }
.spotlightTrained.modelTrainedLightGBM[b-l0rg40o53e] { color: #fbbf24; background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.15); }
.spotlightTrained.modelTrainedPcaSweep[b-l0rg40o53e] { color: #a78bfa; background: rgba(167,139,250,0.08); border: 1px solid rgba(167,139,250,0.15); }

/* ── Hero Stats (Real-Life Accuracy) ────────────────────── */

.heroRow[b-l0rg40o53e] {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}
.heroBlock[b-l0rg40o53e] {
    flex: 1;
    text-align: center;
    padding: 20px 16px;
    background: var(--panelDeep);
    border: 1px solid var(--borderSoft);
    border-radius: 12px;
}
.heroValue[b-l0rg40o53e] {
    font-size: 2.8rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 8px;
}
.heroValue.blue[b-l0rg40o53e] { color: #60a5fa; }
.heroValue.amber[b-l0rg40o53e] { color: #fbbf24; }
.heroValue.purple[b-l0rg40o53e] { color: #a78bfa; }
.heroValue.cyan[b-l0rg40o53e] { color: #22d3ee; }

.heroProgress[b-l0rg40o53e] {
    width: 80%;
    height: 6px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    margin: 0 auto 8px;
    overflow: hidden;
}
.heroProgressFill[b-l0rg40o53e] { height: 100%; border-radius: 3px; transition: width 0.5s ease; }
.heroProgressFill.blue[b-l0rg40o53e] { background: #60a5fa; }
.heroProgressFill.amber[b-l0rg40o53e] { background: #fbbf24; }
.heroProgressFill.purple[b-l0rg40o53e] { background: #a78bfa; }
.heroProgressFill.cyan[b-l0rg40o53e] { background: #22d3ee; }

.heroLabel[b-l0rg40o53e] {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--mutedFaint);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.heroFraction[b-l0rg40o53e] {
    font-size: 0.8rem;
    color: var(--muted);
    font-weight: 500;
    margin-top: 2px;
}

/* Live log loss row sitting under the X/Y fraction. Slightly larger than
   .heroFraction (this is a real metric, not a sample-size footnote) but
   smaller than the big % above. Inline label + value so the row stays
   compact and visually subordinate to the headline accuracy number. */
.heroSubMetric[b-l0rg40o53e] {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 6px;
    font-size: 0.78rem;
    font-weight: 600;
}
.heroSubLabel[b-l0rg40o53e] {
    color: var(--mutedFaint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.heroSubValue[b-l0rg40o53e] {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* ── Recent Form Strip ──────────────────────────────────── */

/* ── Value Engine (positive-EV ROI panel) ──────────────────
   Full-width panel between the accuracy hero and the confidence
   mini-cards. Renders for every model. Top-right radial "shine"
   makes it read as a premium feature on first glance. On mobile
   the ROI text and donut stay side-by-side (donut shrinks) — the
   stats grid collapses to 2 columns and the series/game footer
   stacks vertically. Color accent comes from the same .blue/.amber/
   .purple/.cyan class the rest of the card uses. */

.valueEngine[b-l0rg40o53e] {
    position: relative;
    margin: 0 0 16px;
    padding: 20px 22px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.04) 0%, var(--panelDeep) 65%);
    border: 1px solid var(--borderSoft);
    border-left: 3px solid #60a5fa;
    border-radius: 12px;
    overflow: hidden;
}
.valueEngine.amber[b-l0rg40o53e]  { border-left-color: #fbbf24; }
.valueEngine.purple[b-l0rg40o53e] { border-left-color: #a78bfa; }
.valueEngine.cyan[b-l0rg40o53e]   { border-left-color: #22d3ee; }

/* Negative ROI repaints with a red tint so the sign is unmistakable
   even before the user reads the percentage. The accent stripe color
   stays the model's color — the body tint carries the sign. */
.valueEngine.valueEngineNeg[b-l0rg40o53e] {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.04) 0%, var(--panelDeep) 65%);
}

/* Subtle radial glow in the top-right corner — premium feel without
   a literal sparkle/star icon. Color follows the accent class. */
.valueEngine[b-l0rg40o53e]::after {
    content: '';
    position: absolute;
    top: 0; right: 0; width: 220px; height: 80px;
    background: radial-gradient(ellipse at top right, #60a5fa, transparent 70%);
    opacity: 0.08;
    pointer-events: none;
}
.valueEngine.amber[b-l0rg40o53e]::after  { background: radial-gradient(ellipse at top right, #fbbf24, transparent 70%); }
.valueEngine.purple[b-l0rg40o53e]::after { background: radial-gradient(ellipse at top right, #a78bfa, transparent 70%); }
.valueEngine.cyan[b-l0rg40o53e]::after   { background: radial-gradient(ellipse at top right, #22d3ee, transparent 70%); }

.veHead[b-l0rg40o53e] {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
    flex-wrap: wrap; gap: 8px;
    position: relative;
    /* z-index 10 so this row's stacking context — and the league dropdown
       menu rendered inside it — sits above the hero (.veHero z-index: 1),
       stats grid, and pick-history list that come after it in source order.
       Without this lift, the absolutely-positioned menu was rendering BEHIND
       the page content even though it was visible on screen, which meant the
       only clickable parts of each row were the spots where no underlying
       text occluded them. Lifting the parent stacking context fixes both the
       visual layering and the dead-zones-in-click-targets issue at once. */
    z-index: 10;
}
.veHeadLeft[b-l0rg40o53e]  { display: flex; align-items: center; gap: 10px; }
.veHeadRight[b-l0rg40o53e] { display: flex; align-items: center; gap: 10px; }

/* Stake-per-pick input row. Sits between the title and the ROI hero, on its
   own line so the input doesn't compete with the title for horizontal space.
   Bound to _stakePerPick — typing scales every $ value in the panel live. */
.veStakeBar[b-l0rg40o53e] {
    display: flex; align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    position: relative; z-index: 1;
}
.veStakeLabel[b-l0rg40o53e] {
    font-size: 0.6rem; font-weight: 700;
    color: var(--mutedFaint);
    text-transform: uppercase; letter-spacing: 0.08em;
}
.veStakeInputWrap[b-l0rg40o53e] {
    display: inline-flex; align-items: baseline;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--borderSoft);
    border-radius: 6px;
    padding: 4px 8px 4px 8px;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.veStakeInputWrap:hover[b-l0rg40o53e] { background: rgba(255, 255, 255, 0.06); }
.veStakeInputWrap:focus-within[b-l0rg40o53e] { border-color: #60a5fa; }
.valueEngine.amber  .veStakeInputWrap:focus-within[b-l0rg40o53e] { border-color: #fbbf24; }
.valueEngine.purple .veStakeInputWrap:focus-within[b-l0rg40o53e] { border-color: #a78bfa; }
.valueEngine.cyan   .veStakeInputWrap:focus-within[b-l0rg40o53e] { border-color: #22d3ee; }
.veStakeCurrency[b-l0rg40o53e] {
    /* Renders as the unit suffix ("u") after the stake input now that the
       Value Engine is denominated in units instead of dollars — see the
       "units" framing in Home.razor. Margin flipped from right→left so the
       suffix has 2px of breathing room from the number. */
    color: var(--mutedFaint); font-weight: 800;
    font-size: 0.8rem;
    margin-left: 2px;
}
.veStakeInput[b-l0rg40o53e] {
    background: transparent;
    border: 0;
    color: var(--text);
    font-family: inherit;
    font-weight: 800;
    font-size: 0.85rem;
    width: 58px;
    padding: 0;
    text-align: left;
    -moz-appearance: textfield;
}
.veStakeInput[b-l0rg40o53e]::-webkit-outer-spin-button,
.veStakeInput[b-l0rg40o53e]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.veStakeInput:focus[b-l0rg40o53e] { outline: none; }
.veTitle[b-l0rg40o53e] {
    font-size: 0.7rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: #60a5fa;
}
.valueEngine.amber  .veTitle[b-l0rg40o53e] { color: #fbbf24; }
.valueEngine.purple .veTitle[b-l0rg40o53e] { color: #a78bfa; }
.valueEngine.cyan   .veTitle[b-l0rg40o53e] { color: #22d3ee; }

.veSubtitle[b-l0rg40o53e] {
    font-size: 0.62rem; color: var(--mutedFaint);
    text-transform: uppercase; letter-spacing: 0.08em;
}

/* "Show with low confidence leagues" toggle in the Value Engine head row. Reads as a
   small chip-like control next to the league dropdown — faint, uppercase, low-key so
   it doesn't compete with the headline ROI. */
.veLowConfToggle[b-l0rg40o53e] {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.62rem; color: var(--mutedFaint);
    text-transform: uppercase; letter-spacing: 0.06em;
    cursor: pointer; user-select: none; white-space: nowrap;
}
.veLowConfToggle input[b-l0rg40o53e] { accent-color: var(--accent, #60a5fa); cursor: pointer; margin: 0; }
.veLowConfToggle:hover[b-l0rg40o53e] { color: var(--muted); }

/* League-scope filter sitting alongside the subtitle in veHeadRight. Native
   <select> so it inherits OS-level keyboard / a11y. Styled to feel like a
   chip — small caps label, faint background, no borders — so it visually
   belongs in the Value Engine head row instead of looking grafted on. */
.veLeagueSelect[b-l0rg40o53e] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: color-mix(in srgb, var(--text) 5%, transparent);
    color: var(--text);
    border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    border-radius: 8px;
    padding: 5px 26px 5px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23808a9a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: border-color 120ms ease, background-color 120ms ease;
}
.veLeagueSelect:hover[b-l0rg40o53e] {
    border-color: color-mix(in srgb, var(--text) 24%, transparent);
    background-color: color-mix(in srgb, var(--text) 8%, transparent);
}
.veLeagueSelect:focus[b-l0rg40o53e] {
    outline: none;
    border-color: color-mix(in srgb, var(--text) 32%, transparent);
}
.veLeagueSelect option[b-l0rg40o53e] {
    background: var(--panel);
    color: var(--text);
}
@media (max-width: 540px) {
    .veLeagueSelect[b-l0rg40o53e] {
        font-size: 0.68rem;
        padding: 4px 22px 4px 8px;
    }
}

/* ── League-scope dropdown ──
   Custom (not native <select>) so we can put league logos + colored ROI
   into the option list. Same `@onfocusout` + 200ms delay close pattern as
   the Picks page model dropdown so the option click registers before the
   wrapper loses focus.
   Trigger is a chip. Menu is positioned absolutely below the trigger with
   a generous max-height so 10+ leagues paginate via scroll instead of
   pushing the rest of the panel down. */
.veLeagueDropdown[b-l0rg40o53e] {
    position: relative;
    outline: none;
}
.veLeagueDropdownTrigger[b-l0rg40o53e] {
    appearance: none;
    background: color-mix(in srgb, var(--text) 5%, transparent);
    color: var(--text);
    border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    border-radius: 9px;
    padding: 7px 10px 7px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    line-height: 1.15;
    white-space: nowrap;
    min-width: 150px;
    transition: border-color 120ms ease, background-color 120ms ease;
}
.veLeagueDropdownTrigger:hover[b-l0rg40o53e] {
    border-color: color-mix(in srgb, var(--text) 24%, transparent);
    background: color-mix(in srgb, var(--text) 8%, transparent);
}
.veLeagueDropdownOpen > .veLeagueDropdownTrigger[b-l0rg40o53e] {
    border-color: color-mix(in srgb, var(--text) 32%, transparent);
    background: color-mix(in srgb, var(--text) 9%, transparent);
}
.veLeagueDropdownTriggerIcon[b-l0rg40o53e] {
    width: 18px; height: 18px;
    border-radius: 4px;
    object-fit: contain;
    flex: 0 0 auto;
}
.veLeagueDropdownTriggerName[b-l0rg40o53e] {
    flex: 0 0 auto;
}
.veLeagueDropdownTriggerRoi[b-l0rg40o53e] {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--text) 7%, transparent);
}
.veLeagueDropdownChev[b-l0rg40o53e] {
    color: var(--mutedFaint);
    margin-left: 2px;
    transition: transform 160ms ease;
    flex: 0 0 auto;
}
.veLeagueDropdownOpen > .veLeagueDropdownTrigger .veLeagueDropdownChev[b-l0rg40o53e] {
    transform: rotate(180deg);
}

/* Menu — absolutely positioned below the trigger, right-aligned to the
   trigger so it doesn't punch outside the panel on the right side. */
.veLeagueDropdownMenu[b-l0rg40o53e] {
    position: absolute;
    top: calc(100% + 6px);
    /* Anchor to the trigger's LEFT edge: the trigger sits at the card's left, and the
       card clips with overflow:hidden, so a right-anchored menu extended off the left
       edge and cropped the league icon/name columns. */
    left: 0;
    min-width: 280px;
    max-width: 360px;
    max-height: 360px;
    overflow-y: auto;
    background: var(--panel);
    border: 1px solid var(--borderSoft);
    border-radius: 10px;
    box-shadow: 0 14px 32px rgba(0,0,0,0.32);
    padding: 4px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 2px;
    outline: none;
}
.veLeagueDropdownOption[b-l0rg40o53e] {
    appearance: none;
    background: transparent;
    color: var(--text);
    border: 0;
    border-radius: 7px;
    padding: 8px 10px;
    text-align: left;
    cursor: pointer;
    display: grid;
    grid-template-columns: 20px 1fr auto auto;
    gap: 10px;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.15;
    transition: background-color 100ms ease;
}
.veLeagueDropdownOption:hover[b-l0rg40o53e] {
    background: color-mix(in srgb, var(--text) 8%, transparent);
}
.veLeagueDropdownOptionActive[b-l0rg40o53e] {
    background: color-mix(in srgb, var(--text) 11%, transparent);
}
.veLeagueDropdownOptionAll[b-l0rg40o53e] {
    /* "All Leagues" option has no logo / picks / ROI — collapse the
       grid columns so the label uses the full row width. */
    grid-template-columns: 1fr;
    font-weight: 700;
}
.veLeagueDropdownOptionIcon[b-l0rg40o53e] {
    width: 20px; height: 20px;
    border-radius: 4px;
    object-fit: contain;
}
.veLeagueDropdownOptionName[b-l0rg40o53e] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.veLeagueDropdownOptionBets[b-l0rg40o53e] {
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--mutedFaint);
    text-transform: lowercase;
    letter-spacing: 0.01em;
}
.veLeagueDropdownOptionRoi[b-l0rg40o53e] {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--text) 6%, transparent);
    min-width: 56px;
    text-align: right;
}

/* Shared ROI color helpers — applied on both trigger pill and menu options. */
.veLeagueRoiPos[b-l0rg40o53e] { color: #10b981; }
.veLeagueRoiNeg[b-l0rg40o53e] { color: #f87171; }

/* Mobile: trigger stays the same shape but tightens; menu widens to use
   most of the viewport so logos + ROI don't collide. */
@media (max-width: 720px) {
    .veLeagueDropdownTrigger[b-l0rg40o53e] {
        font-size: 0.74rem;
        padding: 6px 9px 6px 11px;
        min-width: 0;
    }
    .veLeagueDropdownMenu[b-l0rg40o53e] {
        min-width: 240px;
        max-width: calc(100vw - 32px);
    }
}
@media (max-width: 540px) {
    .veLeagueDropdownTrigger[b-l0rg40o53e] { font-size: 0.7rem; gap: 6px; }
    .veLeagueDropdownTriggerIcon[b-l0rg40o53e] { width: 16px; height: 16px; }
    .veLeagueDropdownTriggerRoi[b-l0rg40o53e] { font-size: 0.64rem; padding: 1px 5px; }
    .veLeagueDropdownOption[b-l0rg40o53e] { font-size: 0.72rem; padding: 7px 8px; gap: 8px; }
    .veLeagueDropdownOptionIcon[b-l0rg40o53e] { width: 18px; height: 18px; }
    .veLeagueDropdownOptionBets[b-l0rg40o53e] { font-size: 0.6rem; }
    .veLeagueDropdownOptionRoi[b-l0rg40o53e] { font-size: 0.66rem; padding: 1px 5px; min-width: 48px; }
}

.veHelp[b-l0rg40o53e] {
    width: 14px; height: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.7rem; color: var(--mutedFaint); cursor: help;
    border-radius: 50%; border: 1px solid var(--borderSoft);
    font-style: italic;
}

.veHero[b-l0rg40o53e] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: center;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}
.veHeroLeft[b-l0rg40o53e] { display: flex; flex-direction: column; gap: 4px; }
.veRoi[b-l0rg40o53e] {
    font-size: 2.6rem; font-weight: 900; line-height: 1;
    letter-spacing: -0.01em;
}
.veRoiSub[b-l0rg40o53e] {
    font-size: 0.92rem; color: var(--textSoft); font-weight: 600;
}
.veRoiSub strong[b-l0rg40o53e] { font-weight: 800; }

/* Hit-rate donut — radius 15.915 gives circumference ≈ 100 so
   stroke-dasharray maps directly to percentages. */
.veDonutWrap[b-l0rg40o53e] {
    position: relative; width: 84px; height: 84px; flex-shrink: 0;
}
.veDonut[b-l0rg40o53e] { width: 100%; height: 100%; transform: rotate(-90deg); }
.veDonutTrack[b-l0rg40o53e] { fill: none; stroke: rgba(255,255,255,0.07); stroke-width: 3.5; }
.veDonutFill[b-l0rg40o53e] {
    fill: none; stroke-width: 3.5; stroke-linecap: round;
    transition: stroke-dasharray 0.6s ease;
}
.veDonutLabel[b-l0rg40o53e] {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    line-height: 1;
}
.veDonutLabel .vdNum[b-l0rg40o53e] { font-size: 1.05rem; font-weight: 900; }
.veDonutLabel .vdK[b-l0rg40o53e] {
    font-size: 0.5rem; color: var(--mutedFaint); margin-top: 2px;
    text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
}

.veStats[b-l0rg40o53e] {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--borderSoft);
    margin-bottom: 12px;
    position: relative; z-index: 1;
}
.veStats .veK[b-l0rg40o53e] {
    font-size: 0.58rem; font-weight: 700; color: var(--mutedFaint);
    text-transform: uppercase; letter-spacing: 0.08em; line-height: 1;
}
.veStats .veV[b-l0rg40o53e] {
    font-size: 0.95rem; font-weight: 800; color: var(--textSoft);
    margin-top: 4px;
}

.veFooter[b-l0rg40o53e] {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    position: relative; z-index: 1;
}
.veSplitCard[b-l0rg40o53e] {
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--borderSoft);
    border-radius: 8px;
    padding: 10px 14px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
}
/* Button-as-tile variant — used when the SplitCard toggles the per-card
   Series/Games scope filter. Resets the default <button> chrome so it visually
   matches the non-clickable card while still being keyboard-focusable. */
.veSplitCardClickable[b-l0rg40o53e] {
    width: 100%;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: left;
    transition: border-color 0.12s ease, background-color 0.12s ease, transform 0.12s ease;
}
.veSplitCardClickable:hover[b-l0rg40o53e] {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
}
.veSplitCardClickable:focus-visible[b-l0rg40o53e] {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}
/* Active state — the tile reflects the currently-applied scope filter.
   Picks up the model card's accent color via currentColor on the border so
   the highlight matches FastTree blue / LightGBM amber / PCA purple / Consensus
   cyan without needing per-model rules. */
.veSplitCardActive[b-l0rg40o53e] {
    border-color: currentColor;
    background: rgba(96, 165, 250, 0.07);
    box-shadow: inset 0 0 0 1px currentColor;
}
.veSplitCardActive .veSplitKind[b-l0rg40o53e] { color: currentColor; }

/* Total Maps + Exact Score tiles carry the markets' own accent colors (teal /
   indigo, matching how those markets are tinted on the prediction cards) so the
   user can tell the two new markets apart from the team-based Series / Game /
   Handicap tiles. A small colored dot before the Kind label plus a faint matching
   border tint when the tile is active. */
.veSplitCardTotalMaps .veSplitKind[b-l0rg40o53e]::before,
.veSplitCardExactScore .veSplitKind[b-l0rg40o53e]::before {
    content: "";
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
}
.veSplitCardTotalMaps .veSplitKind[b-l0rg40o53e]::before { background: #2dd4bf; }
.veSplitCardExactScore .veSplitKind[b-l0rg40o53e]::before { background: #818cf8; }
.veSplitCardTotalMaps.veSplitCardActive[b-l0rg40o53e] {
    border-color: #2dd4bf;
    background: rgba(45, 212, 191, 0.08);
    box-shadow: inset 0 0 0 1px #2dd4bf;
}
.veSplitCardExactScore.veSplitCardActive[b-l0rg40o53e] {
    border-color: #818cf8;
    background: rgba(129, 140, 248, 0.08);
    box-shadow: inset 0 0 0 1px #818cf8;
}
.veSplitCardTotalMaps.veSplitCardActive .veSplitKind[b-l0rg40o53e] { color: #2dd4bf; }
.veSplitCardExactScore.veSplitCardActive .veSplitKind[b-l0rg40o53e] { color: #818cf8; }

.veSplitLeft[b-l0rg40o53e] { display: flex; flex-direction: column; gap: 2px; }
.veSplitKind[b-l0rg40o53e] {
    font-size: 0.6rem; font-weight: 800; color: var(--mutedFaint);
    text-transform: uppercase; letter-spacing: 0.08em;
}
.veSplitSub[b-l0rg40o53e] { font-size: 0.72rem; color: var(--muted); }
/* Per-scope ROI percentage rendered inline after the W/picks count.
   Inherits pos/neg classes (green/red) from the same .valueEngine .pos
   / .neg rules that color the hero ROI — keeps the tile's numerical
   feedback visually consistent with the main +X.X% above it. */
.veSplitRoi[b-l0rg40o53e] { font-weight: 700; margin-left: 4px; }
.veSplitValue[b-l0rg40o53e] { font-size: 1.1rem; font-weight: 900; line-height: 1; }

/* Tile header row — wraps the SERIES/GAMES label and the optional BEST tag
   side-by-side so the tag sits inline with the kind, not on its own line. */
.veSplitKindRow[b-l0rg40o53e] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* BEST PERFORMER tag — only rendered on the tile whose model has the highest
   ROI in that scope (sole-leader only — ties suppress the tag). Soft green
   pill matching the rest of the ROI-positive palette so the visual hierarchy
   stays consistent with the +X.X% / +Yu values inside the tile. */
.veSplitBestTag[b-l0rg40o53e] {
    display: inline-block;
    padding: 1px 6px;
    background: rgba(34, 197, 94, 0.18);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4;
    white-space: nowrap;
}

/* Tile background highlight for the BEST PERFORMER. Subtle green wash + soft
   green border so the eye picks it out from the neighboring tile without
   shouting. Composes with veSplitCardActive: when the user clicks the
   best-performer tile to filter, the active treatment (inset shadow + bolder
   border) layers on top so both states stay readable at a glance. */
.veSplitCardBest[b-l0rg40o53e] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(22, 163, 74, 0.04) 100%);
    border-color: rgba(34, 197, 94, 0.35);
}
.veSplitCardBest:hover[b-l0rg40o53e] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.12) 0%, rgba(22, 163, 74, 0.06) 100%);
    border-color: rgba(34, 197, 94, 0.55);
}

/* Signed-value colors. Used inline by the Razor template on the
   ROI percent, the net-units pill, and each Series/Game value. */
.valueEngine .pos[b-l0rg40o53e] { color: #10b981; }
.valueEngine .neg[b-l0rg40o53e] { color: #f87171; }

/* ── Value Engine "picks history" list ──
   Per-model paginated list (5/page) of the historical +EV bets that fed
   the ROI numbers above. Lives inside .valueEngine, after the stats grid
   and footer, before the disclaimer. Each row is an anchor link to the
   detail page (match or live), styled to look like a tight read-only
   table rather than a clickable card so it visually attaches to the
   parent card. */
/* ── Value Engine daily-performance graph ──
   Compact inline-SVG bar chart of net units per day for the
   currently selected market scope. Sits between the ROI tiles
   and the pick history. Up days green (#10b981), down days red
   (#f87171) to match the won/lost colors used elsewhere in the
   card. The transparent .veGraphHit rects carry the per-day
   <title> tooltip (native hover) covering the full slot width. */
.veGraph[b-l0rg40o53e] {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--borderSoft);
    position: relative; z-index: 1;
}
.veGraphTitle[b-l0rg40o53e] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 8px;
}
.veGraphHead[b-l0rg40o53e] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.veGraphHead .veGraphTitle[b-l0rg40o53e] { margin-bottom: 0; }
.veGraphNowPos[b-l0rg40o53e] { font-size: 0.82rem; font-weight: 700; color: #34d399; }
.veGraphNowNeg[b-l0rg40o53e] { font-size: 0.82rem; font-weight: 700; color: #f87171; }
.veGraphSvg[b-l0rg40o53e] {
    display: block;
    width: 100%;
    height: 150px;
}
.veGraphZero[b-l0rg40o53e] {
    stroke: var(--borderSoft);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    vector-effect: non-scaling-stroke;
}
/* The cumulative ROI% line + its faint area fill. Strokes stay crisp
   under the non-uniform viewBox stretch via non-scaling-stroke. */
.veLineUp[b-l0rg40o53e], .veLineDown[b-l0rg40o53e] {
    fill: none;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
.veLineUp[b-l0rg40o53e] { stroke: #10b981; }
.veLineDown[b-l0rg40o53e] { stroke: #f87171; }
.veAreaUp[b-l0rg40o53e] { fill: rgba(16, 185, 129, 0.10); stroke: none; }
.veAreaDown[b-l0rg40o53e] { fill: rgba(248, 113, 113, 0.10); stroke: none; }
/* Plot wrapper holds the SVG line, the per-day dots, and the hover columns. */
.veGraphPlot[b-l0rg40o53e] { position: relative; width: 100%; }
/* Per-day net dots sitting on the line — green if that day netted up, red if down
   (the +/- per day, at a glance). Centred on the data point via the negative margin. */
.veGraphDot[b-l0rg40o53e] {
    position: absolute;
    width: 7px; height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    border: 1.5px solid var(--card, #0d1422);
    pointer-events: none;
    z-index: 2;
}
.veDotUp[b-l0rg40o53e] { background: #34d399; }
.veDotDown[b-l0rg40o53e] { background: #f87171; }
/* Invisible equal-width hover columns over the plot; each reveals its day's tooltip. */
.veGraphHover[b-l0rg40o53e] { position: absolute; inset: 0; z-index: 3; }
.veGraphCol[b-l0rg40o53e] { position: absolute; top: 0; bottom: 0; cursor: pointer; border-radius: 6px; }
.veGraphCol:hover[b-l0rg40o53e] { background: rgba(255, 255, 255, 0.04); }
/* Styled per-day tooltip — date + cumulative ROI%, that day's net, then the day's picks. */
.veGraphTip[b-l0rg40o53e] {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    min-width: 156px;
    max-width: 240px;
    padding: 8px 10px;
    background: rgba(11, 18, 32, 0.97);
    border: 1px solid var(--borderSoft);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease, transform 0.12s ease;
    z-index: 6;
}
.veGraphCol:hover .veGraphTip[b-l0rg40o53e] { opacity: 1; transform: translateX(-50%) translateY(0); }
.veGraphTip.veTipL[b-l0rg40o53e] { left: 0; transform: translateX(0) translateY(-4px); }
.veGraphCol:hover .veGraphTip.veTipL[b-l0rg40o53e] { transform: translateX(0) translateY(0); }
.veGraphTip.veTipR[b-l0rg40o53e] { left: auto; right: 0; transform: translateX(0) translateY(-4px); }
.veGraphCol:hover .veGraphTip.veTipR[b-l0rg40o53e] { transform: translateX(0) translateY(0); }
.veTipTop[b-l0rg40o53e] {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; margin-bottom: 3px;
}
.veTipDate[b-l0rg40o53e] { font-weight: 700; font-size: 0.72rem; color: var(--text); }
.veTipRoiPos[b-l0rg40o53e] { font-size: 0.72rem; font-weight: 700; color: #34d399; white-space: nowrap; }
.veTipRoiNeg[b-l0rg40o53e] { font-size: 0.72rem; font-weight: 700; color: #f87171; white-space: nowrap; }
.veTipDayRow[b-l0rg40o53e] { display: flex; align-items: baseline; gap: 5px; margin-bottom: 6px; font-size: 0.7rem; }
.veTipDayLabel[b-l0rg40o53e] { color: var(--muted); font-weight: 700; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.04em; }
.veTipDayPos[b-l0rg40o53e] { font-weight: 600; color: #34d399; }
.veTipDayNeg[b-l0rg40o53e] { font-weight: 600; color: #f87171; }
.veTipPicks[b-l0rg40o53e] {
    display: flex; flex-direction: column; gap: 4px;
    border-top: 1px solid var(--borderSoft); padding-top: 6px;
    max-height: 132px; overflow-y: auto;
}
.veTipPick[b-l0rg40o53e] { display: flex; align-items: center; gap: 6px; font-size: 0.68rem; line-height: 1.1; }
.veTipResWon[b-l0rg40o53e], .veTipResLost[b-l0rg40o53e] { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.veTipResWon[b-l0rg40o53e] { background: #34d399; }
.veTipResLost[b-l0rg40o53e] { background: #f87171; }
.veTipSel[b-l0rg40o53e] {
    color: var(--text); font-weight: 600; flex: 1 1 auto;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.veTipOdds[b-l0rg40o53e] { color: var(--muted); flex: 0 0 auto; }
.veTipOdds[b-l0rg40o53e]::before { content: "@"; opacity: 0.55; margin-right: 1px; }
.veTipEv[b-l0rg40o53e] { color: #60a5fa; font-weight: 600; flex: 0 0 auto; }
/* Always-on per-day ROI% label near each point (that day's net / that day's stake). */
.veGraphPct[b-l0rg40o53e] {
    position: absolute;
    transform: translate(-50%, -170%);
    font-size: 0.6rem;
    font-weight: 700;
    pointer-events: none;
    white-space: nowrap;
    z-index: 2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
}
.veGraphPct.vePctBelow[b-l0rg40o53e] { transform: translate(-50%, 70%); }
/* Keep the first/last labels from clipping past the plot edges. */
.veGraphPct.vePctFirst.vePctAbove[b-l0rg40o53e] { transform: translate(0, -170%); }
.veGraphPct.vePctFirst.vePctBelow[b-l0rg40o53e] { transform: translate(0, 70%); }
.veGraphPct.vePctLast.vePctAbove[b-l0rg40o53e] { transform: translate(-100%, -170%); }
.veGraphPct.vePctLast.vePctBelow[b-l0rg40o53e] { transform: translate(-100%, 70%); }
.vePctUp[b-l0rg40o53e] { color: #34d399; }
.vePctDown[b-l0rg40o53e] { color: #f87171; }
/* Always-on date axis under the plot, ticks aligned to each point. */
.veGraphXAxis[b-l0rg40o53e] {
    position: relative;
    height: 15px;
    margin-top: 5px;
}
.veGraphXTick[b-l0rg40o53e] {
    position: absolute;
    transform: translateX(-50%);
    font-size: 0.62rem;
    color: var(--muted);
    white-space: nowrap;
}
.veGraphXTick.xFirst[b-l0rg40o53e] { transform: translateX(0); }
.veGraphXTick.xLast[b-l0rg40o53e] { transform: translateX(-100%); }
.veGraphEmpty[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
}
.veGraphEmptyNote[b-l0rg40o53e] {
    font-size: 0.78rem;
    color: var(--muted);
    font-style: italic;
}

.vePicksList[b-l0rg40o53e] {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--borderSoft);
    position: relative; z-index: 1;
}
.vePicksHeader[b-l0rg40o53e] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
}
.vePicksTitle[b-l0rg40o53e] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
}
.vePicksCount[b-l0rg40o53e] {
    font-size: 0.7rem;
    color: var(--muted);
}

.vePickRow[b-l0rg40o53e] {
    display: grid;
    grid-template-columns: 56px minmax(0, 1.6fr) minmax(0, 1.1fr) 88px 96px;
    gap: 10px 14px;
    align-items: center;
    padding: 9px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.04);
    margin-bottom: 6px;
    text-decoration: none;
    color: inherit;
    transition: background 0.12s ease, border-color 0.12s ease;
}
/* When rendered as a <button> (the click-to-navigate variant) we need to strip
   the default browser button styling so it visually matches the legacy <a> row.
   Same grid + hover treatment, plus text-align: inherit so the cells flow LTR
   like the link version. */
.vePickRowBtn[b-l0rg40o53e] {
    width: 100%;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
}
.vePickRowBtn:disabled[b-l0rg40o53e] {
    cursor: progress;
    opacity: 0.7;
}
.vePickRow:hover[b-l0rg40o53e] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}
/* Inline spinner shown in the date cell while the destination page loads.
   forceLoad navigation tears down this page, so the spinner just needs to
   tide the user over until the browser swaps documents. */
.vePickSpinner[b-l0rg40o53e] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: vePickSpin-b-l0rg40o53e 0.7s linear infinite;
    opacity: 0.7;
}
@keyframes vePickSpin-b-l0rg40o53e {
    to { transform: rotate(360deg); }
}

.vePickDate[b-l0rg40o53e] {
    font-size: 0.72rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.vePickTeams[b-l0rg40o53e] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.vePickTeam[b-l0rg40o53e] {
    font-size: 0.82rem;
    color: var(--text);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}
.vePickTeam.vePickTeamChosen[b-l0rg40o53e] {
    color: #10b981;
    font-weight: 700;
}
.vePickVs[b-l0rg40o53e] {
    font-size: 0.65rem;
    color: var(--mutedFaint);
    margin: 0 4px;
    display: inline-block;
}
.vePickTeams .vePickTeam + .vePickVs + .vePickTeam[b-l0rg40o53e] { display: inline-block; }
.vePickTeams[b-l0rg40o53e] { display: block; line-height: 1.35; }
.vePickMeta[b-l0rg40o53e] {
    display: block;
    font-size: 0.65rem;
    color: var(--muted);
    margin-top: 2px;
}

.vePickPick[b-l0rg40o53e] { display: flex; flex-direction: column; gap: 2px; }
.vePickPickLabel[b-l0rg40o53e], .vePickEvLabel[b-l0rg40o53e] {
    font-size: 0.58rem;
    color: var(--mutedFaint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.vePickPickTeam[b-l0rg40o53e] {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text);
}
.vePickPickOdds[b-l0rg40o53e] {
    font-size: 0.7rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.vePickEv[b-l0rg40o53e] { display: flex; flex-direction: column; gap: 2px; }
.vePickEvVal[b-l0rg40o53e] {
    font-size: 0.85rem;
    font-weight: 800;
    color: #10b981;
    font-variant-numeric: tabular-nums;
}

.vePickResult[b-l0rg40o53e] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.vePickResultBadge[b-l0rg40o53e] {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 4px;
}
.vePickResultWin .vePickResultBadge[b-l0rg40o53e] {
    background: rgba(16, 185, 129, 0.18);
    color: #10b981;
}
.vePickResultLoss .vePickResultBadge[b-l0rg40o53e] {
    background: rgba(248, 113, 113, 0.18);
    color: #f87171;
}
.vePickProfit[b-l0rg40o53e] { font-size: 0.78rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.vePickProfit.pos[b-l0rg40o53e] { color: #10b981; }
.vePickProfit.neg[b-l0rg40o53e] { color: #f87171; }

.vePicksPager[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--borderSoft);
}
.vePagerBtn[b-l0rg40o53e] {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    border: 1px solid var(--borderSoft);
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.vePagerBtn:hover:not(:disabled)[b-l0rg40o53e] {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--border);
}
.vePagerBtn:disabled[b-l0rg40o53e] {
    opacity: 0.4;
    cursor: not-allowed;
}
.vePagerLabel[b-l0rg40o53e] {
    font-size: 0.72rem;
    color: var(--muted);
}

/* Small print at the bottom of the panel: legal/regulatory cover note.
   "Past results do not guarantee future returns. For analysis only." —
   the same disclaimer regulators in regulated betting jurisdictions
   typically require when historical P/L is shown. Visible by default
   (not opt-in) and styled muted so it doesn't compete with the hero. */
.veDisclaimer[b-l0rg40o53e] {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--borderSoft);
    font-size: 0.62rem;
    color: var(--mutedFaint);
    line-height: 1.4;
    text-align: left;
    position: relative; z-index: 1;
}

/* Mobile (≤ 640px): keep ROI text + donut side-by-side but shrink the
   donut and drop the ROI font a notch so the text never wraps into
   the donut's column. Stats collapse to 2 columns; footer stacks. */
@media (max-width: 640px) {
    .valueEngine[b-l0rg40o53e] { padding: 16px; }
    .veHero[b-l0rg40o53e] { gap: 12px; align-items: start; }
    .veDonutWrap[b-l0rg40o53e] { width: 64px; height: 64px; }
    .veDonutLabel .vdNum[b-l0rg40o53e] { font-size: 0.9rem; }
    .veRoi[b-l0rg40o53e] { font-size: 1.85rem; }
    .veRoiSub[b-l0rg40o53e] { font-size: 0.82rem; line-height: 1.35; }
    .veStats[b-l0rg40o53e] { grid-template-columns: repeat(2, 1fr); gap: 12px 16px; }
    .veFooter[b-l0rg40o53e] { grid-template-columns: 1fr; gap: 8px; }
    .veHead[b-l0rg40o53e] { margin-bottom: 10px; }
    .veSubtitle[b-l0rg40o53e] { font-size: 0.58rem; }

    /* Picks list mobile: collapse the 5-column row to a 2-row layout —
       row 1 = teams + EV/result, row 2 = pick + odds + date.
       Keeps date and result-badge visible without horizontal squeeze. */
    .vePickRow[b-l0rg40o53e] {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        gap: 6px 10px;
    }
    .vePickTeams[b-l0rg40o53e] { grid-column: 1; grid-row: 1; }
    .vePickResult[b-l0rg40o53e] { grid-column: 2; grid-row: 1; }
    .vePickPick[b-l0rg40o53e] { grid-column: 1; grid-row: 2; flex-direction: row; align-items: baseline; gap: 6px; }
    .vePickEv[b-l0rg40o53e] { grid-column: 2; grid-row: 2; }
    .vePickDate[b-l0rg40o53e] { display: none; }
    .vePickPickLabel[b-l0rg40o53e] { display: none; }
    .vePickEvLabel[b-l0rg40o53e] { display: none; }
    .vePickRow[b-l0rg40o53e] { padding: 10px 12px; }
}
@media (max-width: 360px) {
    .valueEngine[b-l0rg40o53e]::after { display: none; }
    .veRoi[b-l0rg40o53e] { font-size: 1.65rem; }
    .veDonutWrap[b-l0rg40o53e] { width: 56px; height: 56px; }
}

/* ── Confidence-Level Mini Cards ─────────────────────────── */

.confSection[b-l0rg40o53e] {
    margin-bottom: 16px;
}

.confTypeLabel[b-l0rg40o53e] {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--mutedFaint);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    margin-top: 12px;
}

.confTypeLabel:first-child[b-l0rg40o53e] {
    margin-top: 0;
}

.confCards[b-l0rg40o53e] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.confMiniCard[b-l0rg40o53e] {
    text-align: center;
    padding: 12px 8px;
    background: var(--panelDeep);
    border: 1px solid var(--borderSoft);
    border-radius: 10px;
}

.confMiniCard.confMiniEmpty[b-l0rg40o53e] {
    opacity: 0.4;
}

.confMiniThreshold[b-l0rg40o53e] {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--mutedFaint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}

.confMiniValue[b-l0rg40o53e] {
    font-size: 1.4rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 6px;
}
.confMiniValue.blue[b-l0rg40o53e] { color: #60a5fa; }
.confMiniValue.amber[b-l0rg40o53e] { color: #fbbf24; }
.confMiniValue.purple[b-l0rg40o53e] { color: #a78bfa; }
.confMiniValue.cyan[b-l0rg40o53e] { color: #22d3ee; }

.confMiniProgress[b-l0rg40o53e] {
    width: 70%;
    height: 4px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    margin: 0 auto 6px;
    overflow: hidden;
}

.confMiniFill[b-l0rg40o53e] {
    height: 100%;
    border-radius: 2px;
}
.confMiniFill.blue[b-l0rg40o53e] { background: #60a5fa; }
.confMiniFill.amber[b-l0rg40o53e] { background: #fbbf24; }
.confMiniFill.purple[b-l0rg40o53e] { background: #a78bfa; }
.confMiniFill.cyan[b-l0rg40o53e] { background: #22d3ee; }

.confMiniFraction[b-l0rg40o53e] {
    font-size: 0.7rem;
    color: var(--muted);
    font-weight: 500;
}

/* ── Meta-Learner Activity Panel (LightGBM / PCA Sweep) ──────
   Sits between Top Leagues and Inner Tabs in the spotlight card. Reports how often
   the stacking meta-learner overrode the base model's directional pick (flips) and
   how often it pulled a confident pick to the uncertain band. Two columns per row:
   series (BO3/BO5 outcome) and match (per-game draft prediction). */
.metaActivityPanel[b-l0rg40o53e] {
    margin-bottom: 20px;
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px solid var(--borderSoft);
    background: rgba(0,0,0,0.18);
}
.metaActivityHeader[b-l0rg40o53e] {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
    margin-bottom: 10px;
}
.metaActivityRows[b-l0rg40o53e] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.metaActivityRow[b-l0rg40o53e] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.metaActivityRowHeader[b-l0rg40o53e] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.metaActivityLabel[b-l0rg40o53e] {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
}
.metaActivitySublabel[b-l0rg40o53e] {
    font-size: 0.72rem;
    color: var(--mutedFaint);
    font-style: italic;
}
.metaActivityValues[b-l0rg40o53e] {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.metaActivityCell[b-l0rg40o53e] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-variant-numeric: tabular-nums;
}
.metaActivityCellLabel[b-l0rg40o53e] {
    text-transform: uppercase;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: 0.04em;
}
.metaActivityCellValue[b-l0rg40o53e] {
    font-size: 0.86rem;
    font-weight: 700;
}
.metaActivityCellValue.amber[b-l0rg40o53e]  { color: #fbbf24; }
.metaActivityCellValue.purple[b-l0rg40o53e] { color: #a78bfa; }


/* ── Top Leagues Strip ──────────────────────────────────── */

.topLeaguesStrip[b-l0rg40o53e] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    padding: 10px 14px;
    background: rgba(0,0,0,0.15);
    border-radius: 8px;
}

.topLeaguesLabel[b-l0rg40o53e] {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--mutedFaint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
    padding-top: 4px;
}

.topLeaguesList[b-l0rg40o53e] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
}

.topLeagueChip[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
}

.topLeagueIcon[b-l0rg40o53e] {
    width: 16px;
    height: 16px;
    object-fit: contain;
    opacity: 0.8;
    flex-shrink: 0;
}

.topLeagueName[b-l0rg40o53e] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #cbd5e1;
    white-space: nowrap;
}

/* ── Inner Tabs ─────────────────────────────────────────── */

.innerTabs[b-l0rg40o53e] {
    display: flex;
    gap: 4px;
    padding: 3px;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    margin-bottom: 16px;
}
.innerTab[b-l0rg40o53e] {
    flex: 1;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: rgba(255,255,255,0.45);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}
.innerTab:hover[b-l0rg40o53e] { color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.04); }
.innerTab.active[b-l0rg40o53e] { background: rgba(59,130,246,0.18); color: #93c5fd; }
.accent-amber .innerTab.active[b-l0rg40o53e] { background: rgba(245,158,11,0.18); color: #fcd34d; }
.accent-purple .innerTab.active[b-l0rg40o53e] { background: rgba(139,92,246,0.18); color: #c4b5fd; }
.accent-cyan .innerTab.active[b-l0rg40o53e] { background: rgba(34,211,238,0.18); color: #67e8f9; }

.innerTabDisabled[b-l0rg40o53e] {
    opacity: 0.35;
    cursor: not-allowed !important;
    position: relative;
}
.innerTabDisabled:hover[b-l0rg40o53e] {
    background: transparent !important;
    color: rgba(255,255,255,0.45) !important;
}

/* ── Bar Chart Metrics ──────────────────────────────────── */

.barChartMetrics[b-l0rg40o53e] { display: flex; flex-direction: column; gap: 10px; }

.barRow[b-l0rg40o53e] {
    display: grid;
    grid-template-columns: 110px 1fr 65px;
    gap: 12px;
    align-items: center;
}
.barLabel[b-l0rg40o53e] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
}
.barTrack[b-l0rg40o53e] {
    height: 26px;
    background: var(--panelDeep);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--borderSoft);
}
.barFill[b-l0rg40o53e] {
    height: 100%;
    border-radius: 6px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.barFill.blue[b-l0rg40o53e] { background: rgba(96,165,250,0.35); }
.barFill.amber[b-l0rg40o53e] { background: rgba(251,191,36,0.35); }
.barFill.purple[b-l0rg40o53e] { background: rgba(167,139,250,0.35); }

.barValue[b-l0rg40o53e] {
    font-size: 0.88rem;
    font-weight: 800;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.barValue.blue[b-l0rg40o53e] { color: #60a5fa; }
.barValue.amber[b-l0rg40o53e] { color: #fbbf24; }
.barValue.purple[b-l0rg40o53e] { color: #a78bfa; }

.sampleRow[b-l0rg40o53e] {
    display: flex;
    gap: 20px;
    padding: 10px 0;
    border-top: 1px solid var(--borderSoft);
    margin-top: 6px;
}
.sampleItem[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--mutedFaint);
}
.sampleVal[b-l0rg40o53e] { font-weight: 700; color: var(--muted); }

/* ── League List (Predictions tab) ──────────────────────── */

.leagueList[b-l0rg40o53e] { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.leagueItem[b-l0rg40o53e] {
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    overflow: hidden;
}
.leagueItemHeader[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: rgba(0,0,0,0.12);
    color: inherit;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease;
}
.leagueItemHeader:hover[b-l0rg40o53e] { background: rgba(0,0,0,0.2); }
.leagueItemIcon[b-l0rg40o53e] {
    width: 16px;
    height: 16px;
    object-fit: contain;
    opacity: 0.8;
    flex-shrink: 0;
}
.leagueItemName[b-l0rg40o53e] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #cbd5e1;
    flex: 1;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.leagueItemBody[b-l0rg40o53e] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    background: rgba(0,0,0,0.08);
}

.rpAccChevron[b-l0rg40o53e] {
    color: rgba(148,163,184,0.4);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.rpAccChevronOpen[b-l0rg40o53e] {
    transform: rotate(180deg);
}

/* ── Model Insight Tags ─────────────────────────────────── */

.modelInsightTag[b-l0rg40o53e] {
    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[b-l0rg40o53e] {
    background: rgba(74,222,128,0.15);
    color: #4ade80;
    border: 1px solid rgba(74,222,128,0.3);
}

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

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

/* Total Maps per-model EV (value vs the captured Over/Under price). */
.tagTmEvPos[b-l0rg40o53e] {
    background: rgba(34,197,94,0.15);
    color: #4ade80;
    border: 1px solid rgba(34,197,94,0.3);
}

.tagTmEvNeg[b-l0rg40o53e] {
    background: rgba(148,163,184,0.12);
    color: #94a3b8;
    border: 1px solid rgba(148,163,184,0.25);
}

.recentUncertainTag[b-l0rg40o53e] {
    font-size: 0.45rem;
    padding: 0px 4px;
}

.recentModelPredUncertain[b-l0rg40o53e] {
    opacity: 0.6;
}

/* ── Model Insight Cards ────────────────────────────────── */

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

.insightCard[b-l0rg40o53e] {
    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[b-l0rg40o53e] {
    border-top-color: var(--ins-color, rgba(255,255,255,0.1));
    background: rgba(0,0,0,0.2);
}

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

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

.insightCardTags[b-l0rg40o53e] {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
}

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

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

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

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

.insightCardStatConfHelp[b-l0rg40o53e] {
    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[b-l0rg40o53e] {
    color: #4ade80;
}

.modelBadge[b-l0rg40o53e] {
    font-size: 0.6rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badgeBasic[b-l0rg40o53e] {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.badgeNiche[b-l0rg40o53e] {
    background: linear-gradient(135deg, #b45309, #d97706, #f59e0b);
    color: #fff;
    border: 1px solid rgba(245, 158, 11, 0.4);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.badgePremium[b-l0rg40o53e] {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff;
    border: 1px solid rgba(139, 92, 246, 0.4);
}

/* Model description */
.modelDescription[b-l0rg40o53e] {
    font-size: 0.88rem;
    color: var(--textSoft);
    line-height: 1.7;
    margin: 0 0 16px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.02);
    border-left: 3px solid var(--blue);
    border-radius: 0 6px 6px 0;
    font-style: italic;
}

.accent-amber .modelDescription[b-l0rg40o53e] {
    border-left-color: #f59e0b;
    background: rgba(245, 158, 11, 0.04);
}

.accent-purple .modelDescription[b-l0rg40o53e] {
    border-left-color: #a78bfa;
    background: rgba(167, 139, 250, 0.04);
}

.accent-cyan .modelDescription[b-l0rg40o53e] {
    border-left-color: #22d3ee;
    background: rgba(34, 211, 238, 0.04);
}

/* Each model's secondary "character" tag uses the same hue family as the model
   name itself so the card reads as one consistent color story. PREMIUM (gold)
   sits next to whichever themed tag the model carries. */
.badgeMetaSavvy[b-l0rg40o53e] {
    background: linear-gradient(135deg, #b45309, #d97706, #f59e0b);
    color: #fff;
    border: 1px solid rgba(245, 158, 11, 0.4);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.badgeHyperTuned[b-l0rg40o53e] {
    background: linear-gradient(135deg, #6d28d9, #8b5cf6, #a78bfa);
    color: #fff;
    border: 1px solid rgba(167, 139, 250, 0.4);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.badgeRiskBalanced[b-l0rg40o53e] {
    background: linear-gradient(135deg, #0e7490, #06b6d4, #22d3ee);
    color: #fff;
    border: 1px solid rgba(34, 211, 238, 0.4);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
/* PREMIUM tag — deeper, jewel-toned purple that's clearly purple (not pink, not
   fuchsia) but a half-shade darker / more saturated than PCA Sweep's softer
   #a78bfa-leaning purple. The two can sit next to each other without reading
   as the same gradient. Indigo→violet→amethyst gives a royal-purple chrome. */
.badgePremium[b-l0rg40o53e] {
    background: linear-gradient(135deg, #4c1d95, #6d28d9, #9333ea);
    color: #fff;
    border: 1px solid rgba(147, 51, 234, 0.55);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 0 8px rgba(196, 181, 253, 0.18);
}
.badgeConsensus[b-l0rg40o53e] {
    background: linear-gradient(135deg, #0891b2, #22d3ee);
    color: #fff;
    border: 1px solid rgba(34, 211, 238, 0.4);
}

.metricsUnknown[b-l0rg40o53e] {
    padding: 16px;
    text-align: center;
    color: var(--muted);
    font-size: 0.85rem;
    font-style: italic;
    background: var(--panelSoft);
    border-radius: 8px;
}

/* ── Recent Predictions in Model Cards ────────────────────── */

.rpAggregateStats[b-l0rg40o53e] {
    display: flex;
    gap: 16px;
    margin-top: 8px;
    padding: 6px 10px;
    background: rgba(0,0,0,0.15);
    border-radius: 6px;
}

.rpAggregateStat[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
}

.rpAggLabel[b-l0rg40o53e] {
    color: rgba(255,255,255,0.5);
    font-weight: 500;
}

.rpAggValue[b-l0rg40o53e] {
    font-weight: 600;
}

.rpAggGood[b-l0rg40o53e] {
    color: #4ade80;
}

.rpAggBad[b-l0rg40o53e] {
    color: #f87171;
}

/* Empty-state for the Predictions tab summary when the selected market
   (Total Maps / Exact Score) has no pre-aggregated league counts — the
   per-series rows below still carry and filter to that market. */
.rpAggValueEmpty[b-l0rg40o53e] {
    font-weight: 500;
    color: rgba(255,255,255,0.4);
    font-style: italic;
}
.rpAggregateStatEmpty .rpAggLabel[b-l0rg40o53e] {
    color: rgba(255,255,255,0.4);
}

/* Empty-state line for a league body / list that has no predictions in the
   currently selected market. Mirrors the muted, italic tone used elsewhere. */
.leagueEmptyState[b-l0rg40o53e] {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.45);
    font-style: italic;
    padding: 8px 4px;
}

.recentPredsList[b-l0rg40o53e] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.recentPredSeries[b-l0rg40o53e] {
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 10px 12px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.recentPredSeriesClickable[b-l0rg40o53e] {
    cursor: pointer;
}

.recentPredSeriesClickable:hover[b-l0rg40o53e] {
    border-color: rgba(96,165,250,0.3);
    background: rgba(37,99,235,0.06);
}

.rpSeriesHeader[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.rpTeams[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1;
    min-width: 0;
}

.rpLogo[b-l0rg40o53e] {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 3px;
    flex-shrink: 0;
}

.rpTeamName[b-l0rg40o53e] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rpWinner[b-l0rg40o53e] {
    color: #e2e8f0;
}

.rpScore[b-l0rg40o53e] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.04em;
    flex-shrink: 0;
    padding: 0 2px;
}

.rpAccuracy[b-l0rg40o53e] {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    flex-shrink: 0;
    letter-spacing: 0.03em;
}

.rpAccuracyCompact[b-l0rg40o53e] {
    font-size: 0.62rem;
    padding: 1px 6px;
}

.rpPerfect[b-l0rg40o53e] {
    background: rgba(74,222,128,0.15);
    color: #4ade80;
    border: 1px solid rgba(74,222,128,0.3);
}

.rpGood[b-l0rg40o53e] {
    background: rgba(250,204,21,0.12);
    color: #fbbf24;
    border: 1px solid rgba(250,204,21,0.2);
}

.rpBad[b-l0rg40o53e] {
    background: rgba(248,113,113,0.12);
    color: #f87171;
    border: 1px solid rgba(248,113,113,0.2);
}

.rpPredictions[b-l0rg40o53e] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rpPredRow[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    border-radius: 4px;
    background: rgba(255,255,255,0.02);
}

.rpPredType[b-l0rg40o53e] {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    width: 52px;
    flex-shrink: 0;
}

.rpPredWinner[b-l0rg40o53e] {
    margin-left: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #cbd5e1;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rpPredConf[b-l0rg40o53e] {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--muted);
    flex-shrink: 0;
}

/* EV transparency chip on Predictions-tab series rows: green = +EV pick that
   feeds the ROI record; slate = a price existed but no edge (excluded by rule);
   dim = no market price captured (can't enter ROI). Tooltip carries the rule. */
.rpEvChip[b-l0rg40o53e] {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 2px 8px;
    white-space: nowrap;
    cursor: help;
}

.rpEvChipPos[b-l0rg40o53e] {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #4ade80;
}

/* A +EV pick that LOST — same pill, red so a losing bet reads at a glance.
   Placed after .rpEvChipPos so it wins when both classes are present. */
.rpEvChipLost[b-l0rg40o53e] {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.45);
    color: #f87171;
}

.rpEvChipNone[b-l0rg40o53e] {
    background: rgba(148, 163, 184, 0.10);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #94a3b8;
}

.rpEvChipNoLine[b-l0rg40o53e] {
    background: transparent;
    border: 1px dashed rgba(148, 163, 184, 0.25);
    color: #64748b;
}

/* ROI methodology note: shown above the Value-Engine stat row and under the
   Recent Matches heading. Pairs with the EV transparency chips. */
.evRoiNote[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: var(--muted);
    margin: 10px 0 2px;
}
.evRoiNote[b-l0rg40o53e]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
}
.evRoiNoteSection[b-l0rg40o53e] {
    margin: 2px 0 14px;
}

/* Tighter EV chip variant for the Recent Matches per-model columns. */
.recentEvChip[b-l0rg40o53e] {
    font-size: 0.56rem;
    padding: 1px 6px;
    margin-left: 4px;
}

.rpPredResult[b-l0rg40o53e] {
    font-size: 0.75rem;
    font-weight: 700;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.rpCorrect[b-l0rg40o53e] {
    color: #4ade80;
}

.rpWrong[b-l0rg40o53e] {
    color: #f87171;
}

.rpUncertain[b-l0rg40o53e] {
    color: #fbbf24;
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: help;
    white-space: nowrap;
}

.rpPredRowSeries[b-l0rg40o53e] {
    background: rgba(96,165,250,0.12);
    border-left: 2px solid rgba(96,165,250,0.5);
    padding-left: 5px;
}

/* Subtle separator between the per-game Winner rows and the series-level markets. */
.rpMarketDivider[b-l0rg40o53e] {
    height: 1px;
    margin: 4px 2px 2px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
}

/* Series-level non-Winner market rows (Handicap / Total Maps / Exact Score). */
.rpPredRowMarket[b-l0rg40o53e] {
    border-left: 2px solid transparent;
    padding-left: 5px;
}

.rpMarketHandicap[b-l0rg40o53e]   { border-left-color: rgba(251,146,60,0.5); }   /* #fb923c */
.rpMarketTotalMaps[b-l0rg40o53e]  { border-left-color: rgba(45,212,191,0.5); }   /* #2dd4bf */
.rpMarketExactScore[b-l0rg40o53e] { border-left-color: rgba(129,140,248,0.5); }  /* #818cf8 */

/* Text chip carrying the pick for markets without a team logo
   ("Over 3.5" / "3-1" / "−1.5"). Fills the flex slot the logo+name would. */
.rpMarketChip[b-l0rg40o53e] {
    flex: 1;
    min-width: 0;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rpChipHandicap[b-l0rg40o53e]   { color: #fb923c; }
.rpChipTotalMaps[b-l0rg40o53e]  { color: #2dd4bf; }
.rpChipExactScore[b-l0rg40o53e] { color: #818cf8; }

/* (Old rpTabBar/rpLeagueAccordion removed — replaced by innerTabs and leagueList) */

/* ── Upcoming Matches ─────────────────────────────────────── */

.upcomingList[b-l0rg40o53e] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.upcomingDay[b-l0rg40o53e] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dayHeader[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dayLabel[b-l0rg40o53e] {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dayHeader[b-l0rg40o53e]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* ── Upcoming Day Tabs ─────────────────────────────────────── */

.upcomingDayTabs[b-l0rg40o53e] {
    display: flex;
    gap: 6px;
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    overflow-x: auto;
    scrollbar-width: thin;
}

.upcomingDayTab[b-l0rg40o53e] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.upcomingDayTab:hover[b-l0rg40o53e] {
    background: rgba(255,255,255,0.08);
    color: #e2e8f0;
}

.upcomingDayTabActive[b-l0rg40o53e] {
    background: rgba(59,130,246,0.18);
    border-color: rgba(59,130,246,0.4);
    color: #93c5fd;
}

.upcomingDayTabLabel[b-l0rg40o53e] {
    font-weight: 700;
}

.upcomingDayTabCount[b-l0rg40o53e] {
    font-size: 0.65rem;
    font-weight: 600;
    background: rgba(255,255,255,0.1);
    color: var(--muted);
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.upcomingDayTabActive .upcomingDayTabCount[b-l0rg40o53e] {
    background: rgba(59,130,246,0.3);
    color: #93c5fd;
}

.upcomingGrid[b-l0rg40o53e] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(427px, 1fr));
    gap: 12px;
}

.liveSection .upcomingGrid[b-l0rg40o53e] {
    grid-template-columns: 1fr;
}

.upcomingCard[b-l0rg40o53e] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radiusSm);
    padding: 16px;
    min-width: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.upcomingCard:hover[b-l0rg40o53e] {
    transform: translateY(-2px);
    box-shadow: var(--shadowSoft);
    border-color: rgba(59, 130, 246, 0.3);
}

.upcomingCardHeader[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.leagueBadge[b-l0rg40o53e] {
    font-size: 0.6rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Tournament-bracket tag on a match card header (amber = live event, links to /bracket). */
.bracketBadge[b-l0rg40o53e] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: #422006;
    text-decoration: none;
}
.bracketBadge:hover[b-l0rg40o53e] { filter: brightness(1.08); }

.leagueBadgeLink[b-l0rg40o53e] {
    text-decoration: none;
    color: #fff;
    transition: filter 0.15s ease, transform 0.15s ease;
    cursor: pointer;
}

.leagueBadgeLink:hover[b-l0rg40o53e] {
    filter: brightness(1.2);
    transform: scale(1.05);
}

.homeTeamLink[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.15s ease;
    cursor: pointer;
    min-width: 0;
    overflow: hidden;
    max-width: 100%;
}

.homeTeamLink:hover[b-l0rg40o53e] {
    opacity: 0.8;
}

.homeTeamLink:hover[b-l0rg40o53e]  .teamName,
.homeTeamLink:hover[b-l0rg40o53e]  .lcTeamName {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.homeTeamLinkRight[b-l0rg40o53e] {
    flex-direction: row-reverse;
}

.matchFormat[b-l0rg40o53e] {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--muted);
    padding: 2px 6px;
    background: var(--hoverGlow);
    border-radius: 4px;
}

.matchTime[b-l0rg40o53e] {
    margin-left: auto;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.upcomingTeams[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    overflow: hidden;
    min-width: 0;
}

.upcomingTeam[b-l0rg40o53e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    max-width: calc(50% - 20px);
}

.teamLogo[b-l0rg40o53e] {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    padding: 4px;
    flex-shrink: 0;
}

.teamName[b-l0rg40o53e] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    min-width: 0;
}

.teamCode[b-l0rg40o53e] {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.vsLabel[b-l0rg40o53e] {
    font-size: 0.7rem;
    font-weight: 900;
    color: var(--muted);
    flex-shrink: 0;
    opacity: 0.6;
}

/* ── Upcoming Predictions ─────────────────────────────────── */

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

/* ── Prediction Team Labels ─── */
.lcPredTeams[b-l0rg40o53e] {
    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[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.lcPredTeamRight[b-l0rg40o53e] {
    justify-content: flex-end;
}

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

/* Clickable team header (logo + name) → team page. Hover/cursor only apply when the
   anchor actually has an href (i.e. the team has a DB id), so a team without a page
   still renders as plain, non-interactive text. */
.lcPredTeamLink[b-l0rg40o53e] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}
.lcPredTeamLink[href][b-l0rg40o53e] { cursor: pointer; }
.lcPredTeamLink[href]:hover .lcPredTeamName[b-l0rg40o53e] {
    color: var(--accent, #60a5fa);
    text-decoration: underline;
}

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

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

.lcPredSpacer[b-l0rg40o53e] {
    width: 8px;
    flex-shrink: 0;
}

.upPredRow[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.upPredModel[b-l0rg40o53e] {
    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[b-l0rg40o53e] { color: #60a5fa; }
.upPredModel.upPredLightGBM[b-l0rg40o53e] { color: #fbbf24; }
.upPredModel.upPredPcaSweep[b-l0rg40o53e] { color: #a78bfa; }


.upPredBar[b-l0rg40o53e] {
    flex: 1;
    display: flex;
    height: 20px;
    border-radius: 4px;
    position: relative;
    gap: 1px;
}

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

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

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

.upPredLocked[b-l0rg40o53e] {
    opacity: 0.5;
    position: relative;
}

.upPredLockedOverlay[b-l0rg40o53e] {
    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 — the lock now navigates to /premium, so it needs to look
   clickable rather than reading as a static "you're locked out" badge. Mirror
   the hover treatment of other CTAs on the page so the upgrade prompt is
   discoverable from anywhere a model is gated. */
.upPredLockedLink[b-l0rg40o53e] {
    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[b-l0rg40o53e],
.upPredLockedLink:focus-visible[b-l0rg40o53e] {
    background: rgba(139, 92, 246, 0.18);
    border-color: rgba(139, 92, 246, 0.55);
    color: #c4b5fd;
    transform: translateY(-1px);
    outline: none;
}

/* Consensus row — slightly larger, accent border */
.upPredConsensus[b-l0rg40o53e] {
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--borderSoft);
}

.upPredConsensus .upPredModel[b-l0rg40o53e] {
    font-size: 0.7rem;
    color: #22d3ee;
}

.upPredConsensus .upPredBar[b-l0rg40o53e] {
    height: 24px;
}

.upPredConsensus .upPredPct[b-l0rg40o53e] {
    font-size: 0.7rem;
}

/* Favored side glow */
.upPredBarLeft.upPredFavored[b-l0rg40o53e] {
    background: linear-gradient(90deg, #1d4ed8, #3b82f6);
    box-shadow: inset 0 0 6px rgba(59,130,246,0.4);
}

.upPredBarRight.upPredFavored[b-l0rg40o53e] {
    background: linear-gradient(90deg, #b91c1c, #ef4444);
    box-shadow: inset 0 0 6px rgba(239,68,68,0.4);
}

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

/* ── Compact League Prediction Accuracy ── */
.upLeagueAcc[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    margin-top: 4px;
    background: rgba(255,255,255,0.03);
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.05);
}
.upLeagueAccLabel[b-l0rg40o53e] {
    font-size: 0.62rem;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    min-width: fit-content;
}
.upLeagueAccModels[b-l0rg40o53e] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.upLeagueAccModel[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 4px;
}
.upLeagueAccModelName[b-l0rg40o53e] {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.upLeagueAccStat[b-l0rg40o53e], .upLeagueAccStatDraft[b-l0rg40o53e] {
    font-size: 0.7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.upLeagueAccStat[b-l0rg40o53e]::before {
    content: 'S ';
    font-size: 0.55rem;
    font-weight: 500;
    color: rgba(255,255,255,0.4);
}
.upLeagueAccStatDraft[b-l0rg40o53e]::before {
    content: 'D ';
    font-size: 0.55rem;
    font-weight: 500;
    color: rgba(255,255,255,0.4);
}
.upLeagueAccHigh[b-l0rg40o53e] { color: #4ade80; }
.upLeagueAccMid[b-l0rg40o53e]  { color: #fbbf24; }
.upLeagueAccLow[b-l0rg40o53e]  { color: #f87171; }

.upcomingActions[b-l0rg40o53e] {
    display: flex;
    gap: 8px;
}

.predictBtn[b-l0rg40o53e] {
    flex: 1;
    text-align: center;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.15s ease;
    cursor: pointer;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.predictMatch[b-l0rg40o53e] {
    background: linear-gradient(180deg, #3b82f6, #2563eb);
    color: #fff;
}

.predictMatch:hover[b-l0rg40o53e] {
    background: linear-gradient(180deg, #60a5fa, #3b82f6);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.predictDraft[b-l0rg40o53e] {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.predictDraft:hover[b-l0rg40o53e] {
    background: rgba(139, 92, 246, 0.25);
    transform: translateY(-1px);
}

.predictBtn:disabled[b-l0rg40o53e] {
    opacity: 0.7;
    cursor: wait;
    transform: none;
}

.btnSpinner[b-l0rg40o53e] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(167, 139, 250, 0.3);
    border-top-color: #a78bfa;
    border-radius: 50%;
    animation: btnSpin-b-l0rg40o53e 0.6s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}

@keyframes btnSpin-b-l0rg40o53e {
    to { transform: rotate(360deg); }
}

.predictDisabled[b-l0rg40o53e] {
    background: rgba(255, 255, 255, 0.05);
    color: var(--muted);
    cursor: not-allowed;
    opacity: 0.5;
}

/* ── Upcoming Matches Header + League Filter ──────────────── */

.upcomingHeader[b-l0rg40o53e] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 16px;
    flex-wrap: wrap;
}

.upcomingHeader .sectionTitle[b-l0rg40o53e],
.upcomingHeader .sectionSubtitle[b-l0rg40o53e] {
    margin-bottom: 0;
}

.leagueFilter[b-l0rg40o53e] {
    flex-shrink: 0;
}

.leagueSelect[b-l0rg40o53e] {
    appearance: none;
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 32px 8px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.leagueSelect:hover[b-l0rg40o53e],
.leagueSelect:focus[b-l0rg40o53e] {
    border-color: var(--blue);
    outline: none;
}

.leagueSelect option[b-l0rg40o53e] {
    background: var(--panel);
    color: var(--text);
}

/* ── Recent Matches — Card-Based Layout ───────────────────── */

.recentMatchesList[b-l0rg40o53e] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 900px;
}

.recentCard[b-l0rg40o53e] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radiusSm);
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.recentCard:hover[b-l0rg40o53e] {
    transform: translateY(-2px);
    box-shadow: var(--shadowSoft);
}

/* Tournament + Date bar */
.recentCardMeta[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: var(--panelDeep);
    border-bottom: 1px solid var(--borderSoft);
}

.recentTournament[b-l0rg40o53e] {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recentDate[b-l0rg40o53e] {
    font-size: 0.78rem;
    color: var(--mutedFaint);
    font-weight: 500;
    flex-shrink: 0;
}

/* Matchup row — Team1 SCORE Team2 */
.recentMatchup[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    gap: 16px;
}

.recentTeamSide[b-l0rg40o53e] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

.recentTeamSide.teamRight[b-l0rg40o53e] {
    justify-content: flex-end;
}

.recentTeamName[b-l0rg40o53e] {
    font-size: 1.05rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sideWinner .recentTeamName[b-l0rg40o53e] {
    color: var(--text);
}

.sideLoser .recentTeamName[b-l0rg40o53e] {
    color: var(--muted);
    opacity: 0.6;
    font-weight: 600;
}

.recentScoreBlock[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.recentScoreNum[b-l0rg40o53e] {
    font-size: 1.5rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    min-width: 24px;
    text-align: center;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
}

.recentScoreSep[b-l0rg40o53e] {
    font-size: 1.2rem;
    color: var(--muted);
    font-weight: 400;
}

.scoreWin[b-l0rg40o53e] { color: var(--blue); font-weight: 900; font-size: inherit; }
.scoreLose[b-l0rg40o53e] { color: var(--muted); font-weight: 900; font-size: inherit; }
.scoreDash[b-l0rg40o53e] { color: var(--muted); margin: 0 1px; }

/* Games table within each card */
.recentGames[b-l0rg40o53e] {
    border-top: 1px solid var(--border);
}

.recentGamesHeader[b-l0rg40o53e] {
    display: grid;
    grid-template-columns: 40px minmax(80px, 1fr) 72px 68px minmax(120px, 2fr) minmax(90px, 1fr);
    align-items: center;
    gap: 14px;
    padding: 8px 20px;
    background: var(--panelDeep);
    border-bottom: 1px solid var(--borderSoft);
}

.rgCol[b-l0rg40o53e] {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mutedFaint);
    text-align: center;
}

.rgColWinner[b-l0rg40o53e] {
    text-align: center;
}

.recentGameRow[b-l0rg40o53e] {
    display: grid;
    grid-template-columns: 40px minmax(80px, 1fr) 72px 68px minmax(120px, 2fr) minmax(90px, 1fr);
    align-items: center;
    gap: 14px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--borderSoft);
    transition: background 0.1s ease;
}

.recentGameRow:last-child[b-l0rg40o53e] {
    border-bottom: none;
}

.recentGameRow:hover[b-l0rg40o53e] {
    background: rgba(59, 130, 246, 0.04);
}

.rgGameLabel[b-l0rg40o53e] {
    font-weight: 800;
    color: var(--muted);
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    text-align: center;
}

.rgGameScore[b-l0rg40o53e] {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    gap: 3px;
}

.rgGameScore .scoreWin[b-l0rg40o53e],
.rgGameScore .scoreLose[b-l0rg40o53e] {
    font-weight: 800;
    font-size: 0.92rem;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
}

.rgGameDuration[b-l0rg40o53e] {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 500;
    text-align: center;
}

/* Side indicators */
.rgGameSides[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 0.72rem;
}

.sideDot[b-l0rg40o53e] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sideBlue[b-l0rg40o53e] { background: var(--blue); }
.sideRed[b-l0rg40o53e] { background: var(--red); }

.sideTeamAbbr[b-l0rg40o53e] {
    font-weight: 700;
    color: var(--muted);
    font-size: 0.7rem;
}

.sideVs[b-l0rg40o53e] {
    color: var(--mutedFaint);
    font-size: 0.6rem;
    font-weight: 400;
    margin: 0 1px;
}

/* MVP styling */
.rgGameMvp[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
}

.mvpBadge[b-l0rg40o53e] {
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 5px;
    border-radius: 3px;
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.3);
    flex-shrink: 0;
    line-height: 1;
}

.mvpName[b-l0rg40o53e] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mvpChamp[b-l0rg40o53e] {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--mutedFaint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rgWinnerTag[b-l0rg40o53e] {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 12px;
    border-radius: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.rgWinnerTag.winnerTeam1[b-l0rg40o53e] {
    background: rgba(37, 99, 235, 0.12);
    color: var(--blue);
    border: 1px solid rgba(37, 99, 235, 0.25);
}

.rgWinnerTag.winnerTeam2[b-l0rg40o53e] {
    background: rgba(220, 38, 38, 0.10);
    color: var(--red);
    border: 1px solid rgba(220, 38, 38, 0.20);
}

/* ── Revamped Recent Matches (League-style rows) ─────────── */

.recentPanel[b-l0rg40o53e] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadowSoft);
}

.recentScroll[b-l0rg40o53e] {
    max-height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(37,99,235,0.2) transparent;
    padding: 4px 0;
}

.recentRow[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--borderSoft);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    position: relative;
}

.recentRow:last-child[b-l0rg40o53e] { border-bottom: none; }

.recentRow:hover[b-l0rg40o53e] {
    transform: translateY(-2px) scale(1.005);
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15), 0 0 0 1px rgba(59, 130, 246, 0.1);
    background: rgba(59, 130, 246, 0.06);
    z-index: 2;
    border-radius: 6px;
}

.recentRowDate[b-l0rg40o53e] {
    min-width: 50px;
    flex-shrink: 0;
}

.recentRowDateText[b-l0rg40o53e] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
}

.recentRowTeams[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    justify-content: center;
    min-width: 0;
}

.recentRowTeam[b-l0rg40o53e] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--muted);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    text-align: right;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}

.recentTeamLogo[b-l0rg40o53e] {
    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}

.recentLeagueIcon[b-l0rg40o53e] {
    width: 16px;
    height: 16px;
    object-fit: contain;
    border-radius: 3px;
    flex-shrink: 0;
}

.recentRowTeamRight[b-l0rg40o53e] {
    text-align: left;
    justify-content: flex-start;
}

.recentRowTeamWin[b-l0rg40o53e] {
    color: var(--text);
    font-weight: 800;
}

.recentRowScore[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.recentRowScoreNum[b-l0rg40o53e] {
    font-size: 0.95rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    min-width: 16px;
    text-align: center;
}

.recentRowScoreWin[b-l0rg40o53e] { color: #22c55e; }
.recentRowScoreLoss[b-l0rg40o53e] { color: var(--muted); opacity: 0.6; }

.recentRowScoreSep[b-l0rg40o53e] {
    color: var(--muted);
    opacity: 0.4;
    font-weight: 400;
    font-size: 0.85rem;
}

.recentRowMeta[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-width: 120px;
    justify-content: flex-end;
}

.recentLeagueName[b-l0rg40o53e] {
    font-size: 0.68rem;
    font-weight: 700;
    color: #60a5fa;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(139, 92, 246, 0.08));
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 4px;
    padding: 2px 8px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.recentChevron[b-l0rg40o53e] {
    color: var(--muted);
    opacity: 0.4;
    flex-shrink: 0;
    transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.recentRow:hover .recentChevron[b-l0rg40o53e] {
    opacity: 1;
    color: var(--blue);
    transform: translateX(3px);
}

/* ── Expanded Recent Cards (with predictions) ─────────────── */

.recentExpandedList[b-l0rg40o53e] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.recentCard[b-l0rg40o53e] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--shadowSoft);
}

.recentCard:hover[b-l0rg40o53e] {
    transform: translateY(-2px);
    box-shadow: var(--hoverShadow);
    border-color: rgba(59,130,246,0.2);
}

.recentCardHeader[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.recentCardDate[b-l0rg40o53e] {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.recentCardLeague[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mutedFaint);
    margin-left: auto;
}

.recentCardLeagueIcon[b-l0rg40o53e] {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.recentCardMatchup[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 14px;
}

.recentCardTeam[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: flex-end;
    min-width: 0;
}

.recentCardTeamRight[b-l0rg40o53e] {
    justify-content: flex-start;
}

.recentCardLogo[b-l0rg40o53e] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: contain;
    flex-shrink: 0;
    background: rgba(255,255,255,0.04);
}

.recentCardTeamName[b-l0rg40o53e] {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recentCardTeamWin .recentCardTeamName[b-l0rg40o53e] {
    color: var(--text);
}

.recentCardScore[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.recentCardScoreNum[b-l0rg40o53e] {
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--muted);
}

.recentCardScoreWin[b-l0rg40o53e] {
    color: var(--text);
}

.recentCardScoreSep[b-l0rg40o53e] {
    font-size: 0.9rem;
    color: var(--mutedFaint);
}

/* Series Predictions section (below matchup) */
.recentCardSeriesPreds[b-l0rg40o53e] {
    border-top: 1px solid var(--borderSoft);
    padding-top: 10px;
    margin-top: 4px;
}

/* Predictions inside recent card */
/* Prediction summary chips */
.recentCardPredsSummary[b-l0rg40o53e] {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 4px 0 6px;
}

.recentPredChip[b-l0rg40o53e] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    font-size: 0.72rem;
}

.recentPredChip.upPredFastTree[b-l0rg40o53e] { border-color: rgba(96,165,250,0.25); background: rgba(96,165,250,0.08); }
.recentPredChip.upPredLightGBM[b-l0rg40o53e] { border-color: rgba(251,191,36,0.25); background: rgba(251,191,36,0.08); }
.recentPredChip.upPredPcaSweep[b-l0rg40o53e] { border-color: rgba(167,139,250,0.25); background: rgba(167,139,250,0.08); }

.recentPredChipName[b-l0rg40o53e] {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.recentPredChip.upPredFastTree .recentPredChipName[b-l0rg40o53e] { color: #60a5fa; }
.recentPredChip.upPredLightGBM .recentPredChipName[b-l0rg40o53e] { color: #fbbf24; }
.recentPredChip.upPredPcaSweep .recentPredChipName[b-l0rg40o53e] { color: #a78bfa; }

.recentPredChipPct[b-l0rg40o53e] {
    font-weight: 700;
    color: var(--textSoft);
}

.recentPredChipIcon[b-l0rg40o53e] {
    display: flex;
    align-items: center;
}

.recentPredCorrect[b-l0rg40o53e] {
    color: #4ade80;
}

.recentPredWrong[b-l0rg40o53e] {
    color: #f87171;
}

.recentCardDrafts[b-l0rg40o53e] {
    border-top: 1px solid var(--borderSoft);
    padding-top: 10px;
    margin-top: 4px;
}

.recentCardPredsLabel[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mutedFaint);
    margin-bottom: 8px;
}

.recentDraftWinnerLogoHeader[b-l0rg40o53e] {
    width: 18px;
    height: 18px;
    object-fit: contain;
    opacity: 0.7;
}

.recentPredModel[b-l0rg40o53e] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    min-width: 72px;
    flex-shrink: 0;
}

/* Draft predictions per game — horizontal card grid */
.recentDraftGrid[b-l0rg40o53e] {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

.recentDraftGrid[b-l0rg40o53e]::-webkit-scrollbar {
    display: none;
}

.recentDraftGameCard[b-l0rg40o53e] {
    flex: 1;
    min-width: 0;
    border-radius: 10px;
    padding: 8px 10px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(37,99,235,0.18);
    background: linear-gradient(135deg, rgba(37,99,235,0.12), rgba(30,40,64,0.6));
}

.recentDraftGameCard2[b-l0rg40o53e] {
    background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(30,40,64,0.6));
    border-color: rgba(139,92,246,0.15);
}

.recentDraftGameCard3[b-l0rg40o53e] {
    background: linear-gradient(135deg, rgba(251,191,36,0.10), rgba(30,40,64,0.6));
    border-color: rgba(251,191,36,0.12);
}

.recentDraftGameCard4[b-l0rg40o53e] {
    background: linear-gradient(135deg, rgba(52,211,153,0.10), rgba(30,40,64,0.6));
    border-color: rgba(52,211,153,0.12);
}

.recentDraftGameCard5[b-l0rg40o53e] {
    background: linear-gradient(135deg, rgba(244,114,182,0.10), rgba(30,40,64,0.6));
    border-color: rgba(244,114,182,0.12);
}

.recentDraftGameHeader[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.recentDraftGameLabel[b-l0rg40o53e] {
    font-size: 0.7rem;
    font-weight: 800;
    color: rgba(255,255,255,0.8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.recentDraftWinnerLogo[b-l0rg40o53e] {
    width: 20px;
    height: 20px;
    object-fit: contain;
    opacity: 0.7;
    filter: grayscale(20%);
}

.recentDraftRow[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}

.recentDraftModelDot[b-l0rg40o53e] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.recentDraftModelDot.upPredFastTree[b-l0rg40o53e] { background: #60a5fa; box-shadow: 0 0 6px rgba(96,165,250,0.4); }
.recentDraftModelDot.upPredLightGBM[b-l0rg40o53e] { background: #fbbf24; box-shadow: 0 0 6px rgba(251,191,36,0.4); }
.recentDraftModelDot.upPredPcaSweep[b-l0rg40o53e] { background: #a78bfa; box-shadow: 0 0 6px rgba(167,139,250,0.4); }

.recentDraftModelName[b-l0rg40o53e] {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.recentDraftModelName.upPredFastTree[b-l0rg40o53e] { color: #60a5fa; }
.recentDraftModelName.upPredLightGBM[b-l0rg40o53e] { color: #fbbf24; }
.recentDraftModelName.upPredPcaSweep[b-l0rg40o53e] { color: #a78bfa; }

.recentDraftPct[b-l0rg40o53e] {
    font-size: 0.68rem;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    margin-left: auto;
}

/* ── Model-Grouped Prediction Cards (Recent Matches) ──────── */

.recentModelPredGrid[b-l0rg40o53e] {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.recentModelPredCard[b-l0rg40o53e] {
    flex: 1;
    min-width: 0;
    border-radius: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(135deg, rgba(18,24,40,0.9), rgba(14,20,35,0.95));
}

.recentModelPredCard.upPredFastTree[b-l0rg40o53e] {
    border-color: rgba(96,165,250,0.2);
    background: linear-gradient(135deg, rgba(37,99,235,0.08), rgba(14,20,35,0.95));
}
.recentModelPredCard.upPredLightGBM[b-l0rg40o53e] {
    border-color: rgba(251,191,36,0.2);
    background: linear-gradient(135deg, rgba(245,158,11,0.08), rgba(14,20,35,0.95));
}
.recentModelPredCard.upPredPcaSweep[b-l0rg40o53e] {
    border-color: rgba(167,139,250,0.2);
    background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(14,20,35,0.95));
}
.recentModelPredCard.upPredConsensus[b-l0rg40o53e] {
    border-color: rgba(34,211,238,0.2);
    background: linear-gradient(135deg, rgba(6,182,212,0.08), rgba(14,20,35,0.95));
}

.recentModelPredHeader[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.recentModelPredName[b-l0rg40o53e] {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.recentModelPredName.upPredFastTree[b-l0rg40o53e] { color: #60a5fa; }
.recentModelPredName.upPredLightGBM[b-l0rg40o53e] { color: #fbbf24; }
.recentModelPredName.upPredPcaSweep[b-l0rg40o53e] { color: #a78bfa; }
.recentModelPredName.upPredConsensus[b-l0rg40o53e] { color: #22d3ee; }

.recentModelPredScore[b-l0rg40o53e] {
    font-size: 0.62rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
}
.recentModelPredScore.rpPerfect[b-l0rg40o53e] { background: rgba(52,211,153,0.2); color: #6ee7b7; }
.recentModelPredScore.rpGood[b-l0rg40o53e] { background: rgba(96,165,250,0.2); color: #93c5fd; }
.recentModelPredScore.rpBad[b-l0rg40o53e] { background: rgba(239,68,68,0.2); color: #fca5a5; }

.recentModelPredRow[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    /* Chip-heavy rows (an EV chip + an UNCERTAIN tag on the same line) used to
       overflow the model column on desktop - let them wrap within the card. */
    flex-wrap: wrap;
    row-gap: 2px;
    min-width: 0;
}

.recentModelPredType[b-l0rg40o53e] {
    font-size: 0.6rem;
    font-weight: 700;
    color: rgba(148,163,184,0.6);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    min-width: 44px;
}

.recentModelPredIcon[b-l0rg40o53e] {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 3px;
    flex-shrink: 0;
}

.recentModelPredConf[b-l0rg40o53e] {
    font-size: 0.68rem;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    margin-left: auto;
}

/* Non-Winner series markets (Series Handicap / Total Maps / Exact Score) shown as
   always-visible rows beneath the Series + per-game Winner rows. A faint dashed top
   border on each groups them apart from the moneyline rows above. The pick label is a
   compact text chip (e.g. "-1.5", "Over 3.5", "3-1") that replaces the team logo for
   the team-agnostic markets. */
.recentMarketPredRow[b-l0rg40o53e] {
    border-top: 1px dashed rgba(148,163,184,0.16);
}

.recentMarketPick[b-l0rg40o53e] {
    font-size: 0.66rem;
    font-weight: 700;
    color: rgba(226,232,240,0.92);
    white-space: nowrap;
    letter-spacing: 0.01em;
}

/* ── Mobile Model Tabs (Recent Matches) ───────────────────── */

.recentModelTabs[b-l0rg40o53e] {
    display: none; /* shown only on mobile */
}

/* ── Winner Icon in Model Recent Predictions (rpPredRow) ──── */

.rpPredIcon[b-l0rg40o53e] {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 3px;
    flex-shrink: 0;
}

/* ── League Row in Model Recent Predictions ───────────────── */

.rpLeagueRow[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.rpLeagueIcon[b-l0rg40o53e] {
    width: 14px;
    height: 14px;
    object-fit: contain;
    opacity: 0.7;
}

.rpLeagueName[b-l0rg40o53e] {
    font-size: 0.6rem;
    font-weight: 600;
    color: rgba(148,163,184,0.55);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rpMatchDate[b-l0rg40o53e] {
    font-size: 0.58rem;
    font-weight: 600;
    color: rgba(148,163,184,0.4);
    margin-left: auto;
}

.rpChevron[b-l0rg40o53e] {
    color: rgba(148,163,184,0.3);
    flex-shrink: 0;
}

/* ── Navigation Overlay ────────────────────────────────────── */

.navOverlay[b-l0rg40o53e] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: rgba(11, 17, 32, 0.85);
    backdrop-filter: blur(6px);
    animation: fadeIn-b-l0rg40o53e 0.15s ease;
}

@keyframes fadeIn-b-l0rg40o53e {
    from { opacity: 0; }
    to { opacity: 1; }
}

.navSpinner[b-l0rg40o53e] {
    width: 44px;
    height: 44px;
    border: 3px solid rgba(59, 130, 246, 0.15);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: navSpin-b-l0rg40o53e 0.8s linear infinite;
}

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

.navOverlayText[b-l0rg40o53e] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #94a3b8;
    letter-spacing: 0.02em;
}

/* ── Utility ───────────────────────────────────────────────── */

.loadingPlaceholder[b-l0rg40o53e] {
    padding: 40px 20px;
    text-align: center;
    color: var(--muted);
    font-size: 0.9rem;
}

.emptyState[b-l0rg40o53e] {
    padding: 40px 20px;
    text-align: center;
    color: var(--muted);
    font-size: 0.88rem;
    font-style: italic;
}

/* ── Responsive ────────────────────────────────────────────── */

@media (max-width: 768px) {
    .hero[b-l0rg40o53e] {
        padding: 24px 16px 16px;
        margin-bottom: 0;
    }

    .heroBannerImg[b-l0rg40o53e] {
        max-width: 180px;
    }

    .heroTagline[b-l0rg40o53e] {
        font-size: 0.82rem;
        margin-top: 2px;
    }

    .heroHeadline[b-l0rg40o53e] {
        font-size: 1.4rem;
        margin: 10px auto 8px;
    }

    .heroSubhead[b-l0rg40o53e] {
        font-size: 0.88rem;
        line-height: 1.5;
    }

    .heroTrust[b-l0rg40o53e] {
        margin-top: 14px;
        padding: 7px 13px;
        max-width: 100%;
    }
    .heroTrustText[b-l0rg40o53e] {
        font-size: 0.76rem;
    }

    .statsRibbon[b-l0rg40o53e] {
        gap: 6px;
        margin-top: 12px;
    }

    .statChip[b-l0rg40o53e] {
        padding: 4px 8px;
        min-width: 0;
        flex: 1;
    }

    .statValue[b-l0rg40o53e] {
        font-size: 0.88rem;
    }

    .statLabel[b-l0rg40o53e] {
        font-size: 0.5rem;
    }

    .section[b-l0rg40o53e] {
        /* No extra horizontal inset on mobile — the global article.content already
           provides the page gutter. Doubling it left cards unnecessarily narrow. */
        padding: 0;
        margin-bottom: 24px;
    }

    .sectionTitle[b-l0rg40o53e] {
        font-size: 1.15rem;
    }

    .sectionSubtitle[b-l0rg40o53e] {
        font-size: 0.78rem;
    }

    .heroCtas[b-l0rg40o53e] {
        flex-direction: row;
        justify-content: center;
        gap: 8px;
        margin-top: 14px;
    }

    .ctaBtn[b-l0rg40o53e] {
        flex: 1;
        max-width: 160px;
        justify-content: center;
        padding: 9px 14px;
        font-size: 0.78rem;
    }

    /* Preview cards hidden on mobile — bottom tab bar replaces them */

    /* ── Upcoming Grid ── */
    .upcomingGrid[b-l0rg40o53e] {
        grid-template-columns: 1fr;
    }

    .upcomingHeader[b-l0rg40o53e] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .upcomingCard[b-l0rg40o53e] {
        padding: 12px;
    }

    .upcomingTeams[b-l0rg40o53e] {
        gap: 8px;
        margin-bottom: 10px;
    }

    .teamLogo[b-l0rg40o53e] {
        width: 34px;
        height: 34px;
    }

    .teamName[b-l0rg40o53e] {
        font-size: 0.75rem;
    }

    .upcomingPredictions[b-l0rg40o53e] {
        padding: 8px 10px;
    }

    .upcomingActions[b-l0rg40o53e] {
        gap: 6px;
    }

    .predictBtn[b-l0rg40o53e] {
        padding: 7px 10px;
        font-size: 0.72rem;
    }

    /* ── Recent Matches (card view) ── */
    .recentCard[b-l0rg40o53e] {
        padding: 12px 14px;
    }

    .recentCardMatchup[b-l0rg40o53e] {
        gap: 10px;
    }

    .recentCardLogo[b-l0rg40o53e] {
        width: 24px;
        height: 24px;
    }

    .recentCardTeamName[b-l0rg40o53e] {
        font-size: 0.78rem;
    }

    .recentCardScoreNum[b-l0rg40o53e] {
        font-size: 1.1rem;
    }

    .recentCardPredsSummary[b-l0rg40o53e] {
        gap: 6px;
    }

    .recentPredChip[b-l0rg40o53e] {
        padding: 4px 8px;
        font-size: 0.62rem;
    }

    /* Model tabs — visible on mobile */
    .recentModelTabs[b-l0rg40o53e] {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: 8px;
        margin-bottom: 6px;
    }

    /* Two-up grid: four model tabs never fit one row on a phone, so wrap to 2×2.
       flex-basis ~half-minus-gap fills the card width without overflowing it (the
       overflow that used to crop the rightmost model and push the page sideways). */
    .recentModelTab[b-l0rg40o53e] {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        justify-content: center;
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 4px 8px;
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 6px;
        background: transparent;
        cursor: pointer;
        font-size: 0.58rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: rgba(255,255,255,0.4);
        transition: all 0.15s ease;
        overflow: hidden;
    }

    .recentModelTab.recentModelTabActive.upPredFastTree[b-l0rg40o53e] {
        border-color: rgba(96,165,250,0.4);
        background: rgba(37,99,235,0.12);
        color: #60a5fa;
    }
    .recentModelTab.recentModelTabActive.upPredLightGBM[b-l0rg40o53e] {
        border-color: rgba(251,191,36,0.4);
        background: rgba(245,158,11,0.12);
        color: #fbbf24;
    }
    .recentModelTab.recentModelTabActive.upPredPcaSweep[b-l0rg40o53e] {
        border-color: rgba(167,139,250,0.4);
        background: rgba(139,92,246,0.12);
        color: #a78bfa;
    }
    .recentModelTab.recentModelTabActive.upPredConsensus[b-l0rg40o53e] {
        border-color: rgba(34,211,238,0.4);
        background: rgba(6,182,212,0.12);
        color: #22d3ee;
    }

    .recentModelTabName[b-l0rg40o53e] {
        pointer-events: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    .recentModelTabScore[b-l0rg40o53e] {
        flex-shrink: 0;
        font-size: 0.55rem;
        font-weight: 800;
        padding: 1px 4px;
        border-radius: 6px;
        pointer-events: none;
    }

    /* Model-grouped prediction cards — show only active on mobile */
    .recentModelPredGrid[b-l0rg40o53e] {
        gap: 6px;
        overflow: hidden;
    }

    .recentModelPredCard[b-l0rg40o53e] {
        display: none;
        padding: 6px 8px;
    }

    .recentModelPredCard.recentModelPredCardActive[b-l0rg40o53e] {
        display: block;
    }

    .recentModelPredHeader[b-l0rg40o53e] {
        display: none; /* header info is in the tab now */
    }

    .recentModelPredName[b-l0rg40o53e] {
        font-size: 0.6rem;
    }

    .recentModelPredType[b-l0rg40o53e] {
        font-size: 0.55rem;
        min-width: 38px;
    }

    .recentModelPredIcon[b-l0rg40o53e] {
        width: 16px;
        height: 16px;
    }

    .recentModelPredConf[b-l0rg40o53e] {
        font-size: 0.62rem;
    }

    /* ── Recent Matches (row view) ── */
    .recentMatchup[b-l0rg40o53e] {
        padding: 12px 16px;
    }

    .recentTeamName[b-l0rg40o53e] {
        font-size: 0.9rem;
    }

    .recentScoreNum[b-l0rg40o53e] {
        font-size: 1.2rem;
    }

    .recentGamesHeader[b-l0rg40o53e],
    .recentGameRow[b-l0rg40o53e] {
        grid-template-columns: 36px 80px 60px 56px 1fr 90px;
        gap: 6px;
        padding: 8px 12px;
    }

    .rgCol[b-l0rg40o53e] {
        font-size: 0.7rem;
    }

    .rgGameScore[b-l0rg40o53e] {
        font-size: 0.82rem;
    }

    .rgGameDuration[b-l0rg40o53e] {
        font-size: 0.72rem;
    }

    .mvpBadge[b-l0rg40o53e] { display: none; }
    .mvpChamp[b-l0rg40o53e] { display: none; }
    .mvpName[b-l0rg40o53e] { font-size: 0.72rem; }

    .rgWinnerTag[b-l0rg40o53e] {
        font-size: 0.68rem;
        padding: 3px 6px;
    }

    /* ── Live Section ── */
    /* Higher specificity (.section.liveSection) so this beats the base .liveSection
       { padding: 24px } rule defined LATER in the file — without it the base clobbered
       the mobile reduction and the live card got a 24px inner inset on phones. */
    .section.liveSection[b-l0rg40o53e] {
        padding: 14px 12px;
        margin-bottom: 16px;
    }

    .liveHeader[b-l0rg40o53e] {
        gap: 8px;
        margin-bottom: 10px;
    }

    .liveTitle[b-l0rg40o53e] {
        font-size: 1rem;
    }

    /* ── Model Spotlight responsive ── */
    .spotlightCard[b-l0rg40o53e] {
        padding: 20px 16px;
    }

    .modelTab[b-l0rg40o53e] {
        font-size: 0.78rem;
        padding: 8px 10px;
    }

    .tabBadge[b-l0rg40o53e] {
        display: none;
    }

    .heroRow[b-l0rg40o53e] {
        flex-direction: column;
    }

    .heroValue[b-l0rg40o53e] {
        font-size: 2.2rem;
    }

    .barRow[b-l0rg40o53e] {
        grid-template-columns: 85px 1fr 55px;
        gap: 8px;
    }

    .barLabel[b-l0rg40o53e] {
        font-size: 0.72rem;
    }

    .spotlightName[b-l0rg40o53e] {
        font-size: 1.1rem;
    }

    .modelDescription[b-l0rg40o53e] {
        font-size: 0.8rem;
        padding: 10px 12px;
    }

    /* ── Insight cards: single column on mobile ── */
    .insightCards[b-l0rg40o53e] {
        grid-template-columns: 1fr;
    }

    .insightCardHeader[b-l0rg40o53e] {
        flex-wrap: wrap;
    }

    .insightCardStat[b-l0rg40o53e] {
        flex-wrap: wrap;
    }

    .insightCardStatLabel[b-l0rg40o53e] {
        font-size: 0.55rem;
    }

    /* ── Top leagues: stack vertically on mobile ── */
    .topLeaguesStrip[b-l0rg40o53e] {
        flex-direction: column;
        gap: 6px;
    }

    .topLeaguesList[b-l0rg40o53e] {
        flex-direction: column;
        gap: 4px;
    }

    .topLeagueChip[b-l0rg40o53e] {
        width: 100%;
    }

    /* ── Confidence mini cards: smaller on mobile ── */
    .confMiniValue[b-l0rg40o53e] {
        font-size: 1.1rem;
    }

    .confMiniCard[b-l0rg40o53e] {
        padding: 8px 6px;
    }

    /* ── Recent predictions in model stats ── */
    .rpSeriesHeader[b-l0rg40o53e] {
        flex-wrap: wrap;
        gap: 4px;
    }

    .rpTeamName[b-l0rg40o53e] {
        max-width: 70px;
    }

    .rpPredRow[b-l0rg40o53e] {
        gap: 4px;
    }

    .rpPredType[b-l0rg40o53e] {
        width: 44px;
        font-size: 0.58rem;
    }
}

@media (max-width: 640px) {
    .recentRow[b-l0rg40o53e] {
        flex-wrap: wrap;
        gap: 6px;
        padding: 10px 12px;
    }
    .recentRowDate[b-l0rg40o53e] { min-width: 45px; }
    .recentRowMeta[b-l0rg40o53e] {
        min-width: unset;
        width: 100%;
        justify-content: flex-start;
        margin-top: 2px;
    }
}

@media (max-width: 480px) {
    .hero[b-l0rg40o53e] {
        padding: 20px 12px 14px;
    }

    .heroBannerImg[b-l0rg40o53e] {
        max-width: 150px;
    }

    .heroTagline[b-l0rg40o53e] {
        font-size: 0.75rem;
    }

    .heroHeadline[b-l0rg40o53e] {
        font-size: 1.22rem;
        margin: 8px auto 7px;
    }

    .heroSubhead[b-l0rg40o53e] {
        font-size: 0.84rem;
    }

    .previewCard[b-l0rg40o53e] {
        min-width: 110px;
        max-width: 145px;
        padding: 7px 10px;
    }

    .previewCardLabel[b-l0rg40o53e] {
        font-size: 0.58rem;
    }

    .previewCardTeams[b-l0rg40o53e] {
        font-size: 0.65rem;
    }

    .previewCardDetail[b-l0rg40o53e], .previewCardExtra[b-l0rg40o53e] {
        font-size: 0.55rem;
    }

    .metricsGrid[b-l0rg40o53e] {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Hide duration, MVP, and sides on very small screens */
    .rgColDur[b-l0rg40o53e],
    .rgColMvp[b-l0rg40o53e],
    .rgColSides[b-l0rg40o53e],
    .rgGameDuration[b-l0rg40o53e],
    .rgGameMvp[b-l0rg40o53e],
    .rgGameSides[b-l0rg40o53e] {
        display: none;
    }

    .recentGamesHeader[b-l0rg40o53e],
    .recentGameRow[b-l0rg40o53e] {
        grid-template-columns: 36px 60px 1fr;
        gap: 6px;
    }

    /* Live card mobile */
    .lcScoreboard[b-l0rg40o53e] {
        gap: 4px;
        padding: 8px 8px 6px;
    }

    .lcTeamLogo[b-l0rg40o53e] { width: 28px; height: 28px; }
    .lcTeamName[b-l0rg40o53e] { font-size: 0.68rem; max-width: 68px; }
    .lcKills[b-l0rg40o53e] { font-size: 1rem; }
    .lcCenter[b-l0rg40o53e] { min-width: 60px; }
    .lcGameTime[b-l0rg40o53e] { font-size: 0.72rem; }
    .lcVs[b-l0rg40o53e] { font-size: 0.65rem; }

    .lcGoldRow[b-l0rg40o53e], .lcObjRow[b-l0rg40o53e] {
        padding: 2px 8px;
        gap: 4px;
    }

    .lcGoldVal[b-l0rg40o53e] { font-size: 0.72rem; }
    .lcObjIconSm[b-l0rg40o53e] { width: 12px; height: 12px; }
    .lcGoldVs[b-l0rg40o53e] { font-size: 0.55rem; }

    .lcH2hContainer[b-l0rg40o53e] { padding: 2px 4px; }
    .lcH2hChamp[b-l0rg40o53e] { width: 18px; height: 18px; }
    .lcH2hLevel[b-l0rg40o53e] { width: 13px; height: 13px; font-size: 0.5rem; }
    .lcH2hPlayer[b-l0rg40o53e] { font-size: 0.55rem; gap: 2px; }
    .lcH2hName[b-l0rg40o53e] { max-width: 48px; font-size: 0.55rem; }
    .lcH2hKda[b-l0rg40o53e] { font-size: 0.52rem; }
    .lcH2hCenter[b-l0rg40o53e] { width: 36px; }
    .lcH2hRole[b-l0rg40o53e] { font-size: 0.5rem; }
    .lcH2hGoldDiff[b-l0rg40o53e] { font-size: 0.48rem; }

    .liveDraftRow[b-l0rg40o53e] { gap: 3px; padding: 4px 6px; }
    .liveDraftChamp[b-l0rg40o53e] { width: 22px; height: 22px; }

    /* Series predictions chips */
    .recentCardPredsSummary[b-l0rg40o53e] {
        gap: 4px;
    }

    .recentPredChip[b-l0rg40o53e] {
        padding: 3px 6px;
        font-size: 0.58rem;
    }

    .recentPredChipPct[b-l0rg40o53e] {
        font-size: 0.6rem;
    }

    /* Draft prediction cards */
    .recentDraftGameCard[b-l0rg40o53e] {
        min-width: 100px;
        padding: 5px 7px;
    }

    .recentDraftGameLabel[b-l0rg40o53e] {
        font-size: 0.6rem;
    }

    .recentDraftWinnerLogo[b-l0rg40o53e] {
        width: 16px;
        height: 16px;
    }

    /* Upcoming match card tighter */
    .upcomingCard[b-l0rg40o53e] {
        padding: 10px;
    }

    .teamLogo[b-l0rg40o53e] {
        width: 30px;
        height: 30px;
    }

    .teamName[b-l0rg40o53e] {
        font-size: 0.7rem;
    }

    .teamCode[b-l0rg40o53e] {
        font-size: 0.55rem;
    }

    .leagueBadge[b-l0rg40o53e] {
        font-size: 0.55rem;
        padding: 2px 6px;
    }

    .matchFormat[b-l0rg40o53e] {
        font-size: 0.58rem;
    }

    /* Day tabs */
    .upcomingDayTab[b-l0rg40o53e] {
        padding: 6px 12px;
        font-size: 0.72rem;
    }

    .upcomingDayTabCount[b-l0rg40o53e] {
        font-size: 0.58rem;
    }

    .leagueSelect[b-l0rg40o53e] {
        font-size: 0.75rem;
        padding: 6px 28px 6px 10px;
    }

    /* Recent card matchup */
    .recentCardTeamName[b-l0rg40o53e] {
        font-size: 0.72rem;
    }

    .recentCardLogo[b-l0rg40o53e] {
        width: 22px;
        height: 22px;
    }

    .recentCardScoreNum[b-l0rg40o53e] {
        font-size: 1rem;
    }

    .recentCardSeriesPreds[b-l0rg40o53e] {
        padding-top: 8px;
    }

    .recentCardPredsLabel[b-l0rg40o53e] {
        font-size: 0.6rem;
        margin-bottom: 6px;
    }
}

/* ── Live Games Section ────────────────────────────────────── */

.liveSection[b-l0rg40o53e] {
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: var(--radiusSm);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.04), rgba(34, 197, 94, 0.01));
    padding: 24px;
    margin-bottom: 24px;
}

.liveHeader[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.liveTitle[b-l0rg40o53e] {
    color: #22c55e !important;
    letter-spacing: 0.15em;
}

.livePulse[b-l0rg40o53e] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #22c55e;
    animation: livePulseAnim-b-l0rg40o53e 1.5s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
}

@keyframes livePulseAnim-b-l0rg40o53e {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 8px rgba(34, 197, 94, 0.6); }
    50% { opacity: 0.6; transform: scale(0.85); box-shadow: 0 0 16px rgba(34, 197, 94, 0.3); }
}

.liveCard[b-l0rg40o53e] {
    border-color: rgba(34, 197, 94, 0.3) !important;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.06), var(--panel)) !important;
}

.liveCard:hover[b-l0rg40o53e] {
    border-color: rgba(34, 197, 94, 0.5) !important;
}

.liveIndicator[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #22c55e;
    margin-left: auto;
    letter-spacing: 0.04em;
}

.liveDot[b-l0rg40o53e] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    animation: livePulseAnim-b-l0rg40o53e 1.5s ease-in-out infinite;
}

/* ── Player H2H Scoreboard in live card ── */
.lcH2hContainer[b-l0rg40o53e] {
    margin: 6px 0 4px;
    padding: 4px 0;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 8px;
    overflow: hidden;
}

.lcH2hRow[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    padding: 3px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.lcH2hRow:last-child[b-l0rg40o53e] {
    border-bottom: none;
}

.lcH2hPlayer[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: 4px;
    font-size: 0.68rem;
}
.lcH2hLeft[b-l0rg40o53e] {
    justify-content: flex-end;
    text-align: right;
}
.lcH2hRight[b-l0rg40o53e] {
    justify-content: flex-start;
    text-align: left;
}

.lcH2hChampWrap[b-l0rg40o53e] {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

/* Dead player champion icon */
.lcH2hChampWrap.champDead[b-l0rg40o53e] {
    position: relative;
}

.lcChampDead[b-l0rg40o53e] {
    filter: grayscale(100%) brightness(0.4);
}

.lcDeathTimer[b-l0rg40o53e] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.65rem;
    font-weight: 800;
    color: #ef4444;
    text-shadow: 0 0 4px rgba(0,0,0,0.9);
    z-index: 2;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}

/* Health bar below champion icon */
.lcHpBar[b-l0rg40o53e] {
    display: block;
    width: 100%;
    height: 3px;
    background: rgba(0,0,0,0.5);
    border-radius: 1.5px;
    overflow: hidden;
    margin-top: 2px;
}
.lcHpFill[b-l0rg40o53e] {
    display: block;
    height: 100%;
    border-radius: 1.5px;
    transition: width 0.4s ease;
}
.lcHpBlue[b-l0rg40o53e], .lcHpRed[b-l0rg40o53e] { background: linear-gradient(90deg, #22c55e, #4ade80); }

.lcH2hChampWrap.champDead .lcHpBar[b-l0rg40o53e] { display: none; }

.lcH2hChampWrap.baronBuff[b-l0rg40o53e] {
    animation: baronPulse-b-l0rg40o53e 2s ease-in-out infinite;
}

.lcH2hChampWrap.baronBuff[b-l0rg40o53e]::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: #9b59b6;
    border-right-color: #8e44ad;
    animation: baronSpin-b-l0rg40o53e 1.5s linear infinite;
    pointer-events: none;
}

.lcH2hChampWrap.baronBuff[b-l0rg40o53e]::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    box-shadow: 0 0 6px 1px rgba(155, 89, 182, 0.5);
    pointer-events: none;
    animation: baronGlow-b-l0rg40o53e 2s ease-in-out infinite;
}

@keyframes baronSpin-b-l0rg40o53e {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes baronPulse-b-l0rg40o53e {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.15); }
}

@keyframes baronGlow-b-l0rg40o53e {
    0%, 100% { box-shadow: 0 0 4px 1px rgba(155, 89, 182, 0.3); }
    50% { box-shadow: 0 0 8px 2px rgba(155, 89, 182, 0.6); }
}

.lcH2hChamp[b-l0rg40o53e] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    object-fit: cover;
    flex-shrink: 0;
}
.lcH2hChampBlue[b-l0rg40o53e] {
    border-color: rgba(96, 165, 250, 0.35);
}
.lcH2hChampRed[b-l0rg40o53e] {
    border-color: rgba(248, 113, 113, 0.35);
}

.lcH2hLevel[b-l0rg40o53e] {
    font-size: 0.58rem;
    font-weight: 700;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    margin: 0 -2px;
}
.lcH2hLevelBlue[b-l0rg40o53e] {
    background: rgba(96, 165, 250, 0.2);
    color: #93c5fd;
}
.lcH2hLevelRed[b-l0rg40o53e] {
    background: rgba(248, 113, 113, 0.2);
    color: #fca5a5;
}

.lcH2hName[b-l0rg40o53e] {
    color: #e2e8f0;
    font-weight: 600;
    font-size: 0.66rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70px;
}

.lcH2hKda[b-l0rg40o53e] {
    font-size: 0.62rem;
    white-space: nowrap;
    color: #94a3b8;
}
.lcH2hK[b-l0rg40o53e] { color: #4ade80; }
.lcH2hD[b-l0rg40o53e] { color: #f87171; }
.lcH2hA[b-l0rg40o53e] { color: #94a3b8; }

.lcH2hCs[b-l0rg40o53e] {
    font-size: 0.6rem;
    color: #64748b;
    white-space: nowrap;
}

.lcH2hGold[b-l0rg40o53e] {
    font-size: 0.6rem;
    color: #fbbf24;
    font-weight: 600;
    white-space: nowrap;
}

.lcH2hCenter[b-l0rg40o53e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 42px;
    flex-shrink: 0;
    gap: 1px;
}

.lcH2hRole[b-l0rg40o53e] {
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #64748b;
    text-transform: uppercase;
}

.lcH2hGoldDiff[b-l0rg40o53e] {
    font-size: 0.54rem;
    font-weight: 700;
    white-space: nowrap;
}
.lcH2hGdBlue[b-l0rg40o53e] {
    color: #60a5fa;
}
.lcH2hGdRed[b-l0rg40o53e] {
    color: #f87171;
}

/* Hide gold/CS columns on very small screens to keep it readable */
@media (max-width: 500px) {
    .lcH2hGold[b-l0rg40o53e], .lcH2hCs[b-l0rg40o53e] {
        display: none;
    }
    .lcH2hName[b-l0rg40o53e] {
        max-width: 55px;
    }
}

/* ── No Live Data Badge ── */

.lcNoLiveBadge[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    margin: 4px 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.lcNoLiveIcon[b-l0rg40o53e] {
    opacity: 0.5;
    flex-shrink: 0;
}

.liveDraftRow[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 8px 0 4px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 8px;
}

.liveDraftSide[b-l0rg40o53e] {
    display: flex;
    gap: 3px;
}

.liveDraftChamp[b-l0rg40o53e] {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    object-fit: cover;
}

.liveDraftBlue .liveDraftChamp[b-l0rg40o53e] {
    border-color: rgba(96, 165, 250, 0.3);
}

.liveDraftRed .liveDraftChamp[b-l0rg40o53e] {
    border-color: rgba(248, 113, 113, 0.3);
}

.liveDraftSpacer[b-l0rg40o53e] {
    width: 12px;
}

.liveStats[b-l0rg40o53e] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 10px 0;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.liveStatRow[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.liveStatLabel[b-l0rg40o53e] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    text-align: center;
    min-width: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.liveStatIcon[b-l0rg40o53e] {
    width: 14px;
    height: 14px;
    object-fit: contain;
    opacity: 0.8;
}

.liveStatVal[b-l0rg40o53e] {
    font-size: 0.85rem;
    font-weight: 800;
    min-width: 45px;
}

.liveBlue[b-l0rg40o53e] {
    color: #60a5fa;
    text-align: right;
}

.liveRed[b-l0rg40o53e] {
    color: #f87171;
    text-align: left;
}

.liveGameTime[b-l0rg40o53e] {
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--muted);
    margin-top: 2px;
}

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

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

.liveDraftTag[b-l0rg40o53e] {
    font-size: 0.55rem;
    font-weight: 900;
    padding: 1px 6px;
    border-radius: 3px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    letter-spacing: 0.06em;
}

/* Series Score */
.liveSeriesScore[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.liveScoreNum[b-l0rg40o53e] {
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.liveScoreWin[b-l0rg40o53e] {
    color: #22c55e;
}

.liveScoreSep[b-l0rg40o53e] {
    font-size: 1rem;
    color: var(--muted);
    opacity: 0.5;
    font-weight: 600;
}

/* Previous Games */
.livePrevGames[b-l0rg40o53e] {
    margin: 8px 0;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 8px;
}

.livePrevGame[b-l0rg40o53e] {
    padding: 6px 0;
}

.livePrevGame + .livePrevGame[b-l0rg40o53e] {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.livePrevGameHeader[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.livePrevGameNum[b-l0rg40o53e] {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.livePrevWinner[b-l0rg40o53e] {
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.livePrevScore[b-l0rg40o53e] {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--text);
}

.livePrevTime[b-l0rg40o53e] {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text);
    opacity: 0.7;
    margin-left: auto;
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 6px;
    border-radius: 4px;
}

.livePrevGame .liveDraftRow[b-l0rg40o53e] {
    margin: 4px 0 0;
    padding: 4px 6px;
}

.livePrevGame .liveDraftChamp[b-l0rg40o53e] {
    width: 22px;
    height: 22px;
}

/* Previous game winner banner */
.livePrevGameWinner[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    flex-wrap: wrap;
}

.livePrevWinBlue[b-l0rg40o53e] {
    background: rgba(37, 99, 235, 0.10);
    border-left: 3px solid #3b82f6;
}

.livePrevWinRed[b-l0rg40o53e] {
    background: rgba(220, 38, 38, 0.10);
    border-left: 3px solid #ef4444;
}

.livePrevWinTag[b-l0rg40o53e] {
    font-size: 0.58rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 6px;
    border-radius: 3px;
    background: #22c55e;
    color: #fff;
    line-height: 1;
}

.livePrevWinnerName[b-l0rg40o53e] {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--text);
}

/* Previous game team header (blue left / red right) */
.livePrevTeamHeader[b-l0rg40o53e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    margin: 4px 0 0;
    background: rgba(0, 0, 0, 0.12);
    border-radius: 6px 6px 0 0;
}

.livePrevTeamSide[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.livePrevTeamRight[b-l0rg40o53e] {
    flex-direction: row-reverse;
}

.livePrevTeamLogo[b-l0rg40o53e] {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.livePrevTeamName[b-l0rg40o53e] {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

/* Previous game actions (Show Details button) */
.livePrevActions[b-l0rg40o53e] {
    padding: 4px 0 2px;
    margin: 0;
}

.livePrevBtn[b-l0rg40o53e] {
    font-size: 0.75rem !important;
    padding: 8px 16px !important;
    min-height: unset;
}

/* Previous game scoreboard (compact) */
.livePrevStats[b-l0rg40o53e] {
    margin: 4px 0;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.10);
    border-radius: 6px;
}

.livePrevStats .liveStatRow[b-l0rg40o53e] {
    gap: 6px;
}

.livePrevStats .liveStatVal[b-l0rg40o53e] {
    font-size: 0.78rem;
}

.livePrevStats .liveStatLabel[b-l0rg40o53e] {
    font-size: 0.6rem;
}

/* Prediction result predictions within previous games */
.livePrevPredictions[b-l0rg40o53e] {
    padding: 6px 8px;
    margin: 0;
    background: rgba(0, 0, 0, 0.08);
    border: none;
}

.livePredResult[b-l0rg40o53e] {
    position: relative;
}

.livePredIcon[b-l0rg40o53e] {
    font-size: 0.75rem;
    font-weight: 900;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}

.livePredCorrect .livePredIcon[b-l0rg40o53e] {
    color: #22c55e;
}

.livePredWrong .livePredIcon[b-l0rg40o53e] {
    color: #ef4444;
}

.livePredCorrect[b-l0rg40o53e] {
    background: rgba(34, 197, 94, 0.06);
    border-radius: 4px;
    padding: 2px 4px;
}

.livePredWrong[b-l0rg40o53e] {
    background: rgba(239, 68, 68, 0.06);
    border-radius: 4px;
    padding: 2px 4px;
}

/* Collapsible toggle for previous games */
.livePrevToggle[b-l0rg40o53e] {
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    user-select: none;
}

.livePrevToggle[b-l0rg40o53e]::-webkit-details-marker {
    display: none;
}

.livePrevToggle[b-l0rg40o53e]::before {
    content: '\25B6';
    font-size: 0.55rem;
    transition: transform 0.2s ease;
    display: inline-block;
    color: var(--muted);
}

details[open] > .livePrevToggle[b-l0rg40o53e]::before {
    transform: rotate(90deg);
}

.livePrevToggle:hover[b-l0rg40o53e] {
    color: var(--text);
}

.livePrevSideTag[b-l0rg40o53e] {
    font-size: 0.55rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 1px 5px;
    border-radius: 3px;
}

/* ── Broadcast-Style Live Card ───────────────────────────── */

.liveCardWide[b-l0rg40o53e] {
    max-width: none;
    width: 100%;
    overflow: hidden;
}

.lcInfoBar[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.15);
    border-radius: var(--radiusSm) var(--radiusSm) 0 0;
}

/* ── Waiting Card (no data yet) ─── */
.lcWaitingCard[b-l0rg40o53e] {
    padding-bottom: 0;
}
.lcWaitingBody[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 28px 20px;
}
.lcWaitingCenter[b-l0rg40o53e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.lcWaitingText[b-l0rg40o53e] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* ── Stale Data Indicator ─── */
.lcStaleBadge[b-l0rg40o53e] {
    margin-left: auto;
    font-size: 0.65rem;
    font-weight: 700;
    color: #eab308;
    opacity: 0.8;
    letter-spacing: 0.02em;
}
.lcGameTimeStale[b-l0rg40o53e] {
    opacity: 0.5;
}

/* ── Current Game Indicator ─── */
.lcGameIndicator[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 16px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #4ade80;
    letter-spacing: 0.04em;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(34, 197, 94, 0.06);
}
.lcGameIndicator.lcGameFinished[b-l0rg40o53e] {
    color: var(--muted);
    background: rgba(255,255,255,0.02);
}
.lcGameFinTag[b-l0rg40o53e] {
    font-size: 0.58rem;
    font-weight: 900;
    padding: 1px 6px;
    border-radius: 3px;
    background: rgba(148, 163, 184, 0.12);
    color: var(--muted);
    letter-spacing: 0.06em;
}
.lcGameStatusIcon[b-l0rg40o53e] {
    flex-shrink: 0;
}

/* ── Scoreboard Grid ─── */
.lcScoreboard[b-l0rg40o53e] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 10px;
}

.lcTeamSide[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    overflow: hidden;
}

.lcTeamSideRight[b-l0rg40o53e] {
    justify-content: flex-end;
}

.lcTeamLogo[b-l0rg40o53e] {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    padding: 3px;
    flex-shrink: 0;
}

.lcTeamMeta[b-l0rg40o53e] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lcTeamMetaRight[b-l0rg40o53e] {
    align-items: flex-end;
    text-align: right;
}

.lcTeamNameBlock[b-l0rg40o53e] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.lcTeamNameBlockRight[b-l0rg40o53e] {
    align-items: flex-end;
    text-align: right;
}

.lcWinTag[b-l0rg40o53e] {
    font-size: 0.62rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 3px;
    background: #22c55e;
    color: #fff;
    line-height: 1.2;
    width: fit-content;
}

.lcTeamName[b-l0rg40o53e] {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

.lcSideTag[b-l0rg40o53e] {
    font-size: 0.55rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 3px;
    padding: 1px 5px;
    width: fit-content;
}

.lcSideBlue[b-l0rg40o53e] {
    color: #60a5fa;
    background: rgba(96,165,250,0.12);
}

.lcSideRed[b-l0rg40o53e] {
    color: #f87171;
    background: rgba(248,113,113,0.12);
}

/* ── Series Dots ─── */
.lcSeriesDots[b-l0rg40o53e] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.lcDot[b-l0rg40o53e] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: 1.5px solid rgba(255,255,255,0.15);
}

.lcDotWon[b-l0rg40o53e] {
    border-color: transparent;
}

.lcDotBlue[b-l0rg40o53e] {
    background: #3b82f6;
    box-shadow: 0 0 6px rgba(59,130,246,0.4);
}

.lcDotRed[b-l0rg40o53e] {
    background: #ef4444;
    box-shadow: 0 0 6px rgba(239,68,68,0.4);
}

/* ── Center (Kills, Time, Gold) ─── */
.lcCenter[b-l0rg40o53e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 80px;
}

.lcKillRow[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lcKills[b-l0rg40o53e] {
    font-size: 1.6rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.lcKillsBlue[b-l0rg40o53e] { color: #60a5fa; }
.lcKillsRed[b-l0rg40o53e] { color: #f87171; }

.lcGameTimeRow[b-l0rg40o53e] {
    text-align: center;
    margin-bottom: 2px;
}

.lcGameTime[b-l0rg40o53e] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

.lcVs[b-l0rg40o53e] {
    font-size: 0.7rem;
    font-weight: 900;
    color: var(--muted);
    opacity: 0.5;
}

.lcGoldRow[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
    justify-content: center;
    padding: 10px 20px 20px;
    border-top: 1px solid rgba(255,255,255,0.05);
    background: rgba(0,0,0,0.08);
}

.lcGoldVal[b-l0rg40o53e] {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.lcGoldVs[b-l0rg40o53e] {
    font-size: 0.7rem;
    font-weight: 900;
    color: var(--muted);
    opacity: 0.5;
}

.lcGoldValWrap[b-l0rg40o53e] {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.lcGoldIcon[b-l0rg40o53e] {
    width: 14px;
    height: 14px;
}

.lcGoldDiff[b-l0rg40o53e] {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.68rem;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    margin-top: 1px;
}

.lcGoldDiffBlue[b-l0rg40o53e] {
    color: #93c5fd;
    background: rgba(59,130,246,0.15);
}

.lcGoldDiffRed[b-l0rg40o53e] {
    color: #fca5a5;
    background: rgba(239,68,68,0.15);
}

/* ── Inline Objectives (next to gold) ─── */
.lcObjInline[b-l0rg40o53e] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.lcObjIconSm[b-l0rg40o53e] {
    width: 24px;
    height: 24px;
    object-fit: contain;
    opacity: 0.85;
}

/* ── Dragon Types Row ─── */
.lcDragonsRow[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    min-height: 44px;
    border-top: 1px solid rgba(255,255,255,0.05);
    background: rgba(0,0,0,0.08);
}

.lcDragonsSide[b-l0rg40o53e] {
    display: flex;
    gap: 5px;
    min-width: 60px;
    align-items: center;
}

.lcDragonsSideRight[b-l0rg40o53e] {
    justify-content: flex-end;
}

.lcDragonsLabel[b-l0rg40o53e] {
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.lcDragonIcon[b-l0rg40o53e] {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 50%;
}

.lcDragonSoul[b-l0rg40o53e] {
    box-shadow: 0 0 8px 3px rgba(255, 215, 0, 0.7);
    border: 2px solid #ffd700;
    transform: scale(1.15);
}

/* ── Objective Announcements ─── */

.objAnnounce[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 14px;
    margin: 4px 0;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(0,0,0,0.4), rgba(0,0,0,0.2));
    border: 1px solid rgba(255,255,255,0.08);
    animation: objSlideIn-b-l0rg40o53e 0.4s ease-out;
    transition: opacity 2s ease-out;
    opacity: 1;
}

.objAnnounce.objAnnounceFading[b-l0rg40o53e] {
    opacity: 0;
}

.objAnnounceLeft[b-l0rg40o53e] {
    border-left: 3px solid #60a5fa;
}

.objAnnounceRight[b-l0rg40o53e] {
    border-left: 3px solid #f87171;
}

.objAnnounceTeam[b-l0rg40o53e] {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.objAnnounceType[b-l0rg40o53e] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #fbbf24;
    letter-spacing: 0.02em;
}

.objAnnounceTime[b-l0rg40o53e] {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--muted);
    margin-left: 4px;
    font-variant-numeric: tabular-nums;
}

@keyframes objSlideIn-b-l0rg40o53e {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── H2H Player Stats ─── */
.lcH2hSection[b-l0rg40o53e] {
    border-top: 1px solid rgba(255,255,255,0.05);
    background: rgba(0,0,0,0.12);
    padding: 6px 10px 10px;
}

.lcH2hHeader[b-l0rg40o53e] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 6px;
    padding: 2px 0 6px;
}

.lcH2hTeamLabel[b-l0rg40o53e] {
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.lcH2hTeamRight[b-l0rg40o53e] {
    text-align: right;
}

.lcH2hRoleLabel[b-l0rg40o53e] {
    font-size: 0.55rem;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
}

.lcH2hRow[b-l0rg40o53e] {
    display: grid;
    grid-template-columns: 1fr 60px 1fr;
    align-items: center;
    gap: 4px;
    padding: 3px 0;
    border-top: 1px solid rgba(255,255,255,0.03);
}

.lcH2hPlayer[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    min-width: 0;
}

.lcH2hLeft[b-l0rg40o53e] {
    justify-content: flex-end;
}

.lcH2hRight[b-l0rg40o53e] {
    justify-content: flex-start;
}

.lcH2hChamp[b-l0rg40o53e] {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
}

.lcH2hName[b-l0rg40o53e] {
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
}

.lcH2hKda[b-l0rg40o53e] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-size: 0.65rem;
}

.lcPtK[b-l0rg40o53e] { color: #4ade80; }
.lcPtD[b-l0rg40o53e] { color: #f87171; }
.lcPtA[b-l0rg40o53e] { color: #94a3b8; }

.lcH2hCs[b-l0rg40o53e] {
    font-weight: 600;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    font-size: 0.62rem;
    flex-shrink: 0;
}

.lcH2hGold[b-l0rg40o53e] {
    font-weight: 700;
    color: #fbbf24;
    font-variant-numeric: tabular-nums;
    font-size: 0.62rem;
    flex-shrink: 0;
}

.lcH2hRole[b-l0rg40o53e] {
    font-size: 0.58rem;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lcH2hGoldDiff[b-l0rg40o53e] {
    font-size: 0.55rem;
    font-weight: 800;
    padding: 0px 4px;
    border-radius: 3px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Live Card Responsive ─── */
@media (max-width: 640px) {
    .liveCardWide[b-l0rg40o53e] { max-width: none; }

    .lcScoreboard[b-l0rg40o53e] {
        gap: 6px;
        padding: 10px 10px 8px;
    }

    .lcTeamLogo[b-l0rg40o53e] { width: 32px; height: 32px; }
    .lcTeamName[b-l0rg40o53e] { font-size: 0.76rem; max-width: 80px; }
    .lcKills[b-l0rg40o53e] { font-size: 1.2rem; }
    .lcCenter[b-l0rg40o53e] { min-width: 70px; }

    .lcH2hRow[b-l0rg40o53e] {
        grid-template-columns: 1fr 46px 1fr;
        gap: 2px;
    }

    .lcH2hPlayer[b-l0rg40o53e] { gap: 3px; font-size: 0.6rem; }
    .lcH2hChamp[b-l0rg40o53e] { width: 20px; height: 20px; }
    .lcH2hCs[b-l0rg40o53e], .lcH2hGold[b-l0rg40o53e] { display: none; }
    .lcH2hName[b-l0rg40o53e] { max-width: 56px; }

    .lcGameTabs[b-l0rg40o53e] { padding: 4px 8px; gap: 3px; }
    .lcGameTab[b-l0rg40o53e] { padding: 4px 10px; font-size: 0.65rem; }
}

/* ── Game Tabs ─────────────────────────────────────────────── */
.lcGameTabs[b-l0rg40o53e] {
    display: flex;
    gap: 4px;
    padding: 6px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.12);
    overflow-x: auto;
}

.lcGameTab[b-l0rg40o53e] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    background: rgba(255,255,255,0.04);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.lcGameTab:hover[b-l0rg40o53e] {
    background: rgba(255,255,255,0.08);
    color: #e2e8f0;
}

.lcGameTabActive[b-l0rg40o53e] {
    background: rgba(59,130,246,0.18);
    border-color: rgba(59,130,246,0.4);
    color: #93c5fd;
}

.lcGameTabFinished[b-l0rg40o53e] {
    opacity: 0.8;
}

.lcGameTabFinished[b-l0rg40o53e]::before {
    content: '\2713';
    font-size: 0.65rem;
    color: #4ade80;
    margin-right: 2px;
}

.lcGameTabContent[b-l0rg40o53e] {
    animation: fadeInTab-b-l0rg40o53e 0.2s ease;
}

@keyframes fadeInTab-b-l0rg40o53e {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Draft Gating (live card) ─────────────────────────────── */

.lcDraftGated[b-l0rg40o53e] {
    text-align: center;
}

.lcGatePrompt[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    color: rgba(148,163,184,0.8);
    font-size: 0.8rem;
    margin-top: 8px;
}

.lcGateBtn[b-l0rg40o53e] {
    display: inline-flex;
    padding: 6px 16px;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: #fff;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    transition: filter 0.15s;
}

.lcGateBtn:hover[b-l0rg40o53e] {
    filter: brightness(1.15);
}

/* ── Mobile Bottom Tab Bar ───────────────────────────────── */
.mobileTabBar[b-l0rg40o53e] {
    display: none;
}

.mobileTabBarSpacer[b-l0rg40o53e] {
    display: none;
}

@media (max-width: 768px) {
    .mobileTabBar[b-l0rg40o53e] {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: rgba(10, 15, 28, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid rgba(255,255,255,0.08);
        padding: 6px 0 env(safe-area-inset-bottom, 6px);
        justify-content: space-around;
    }

    .mobileTab[b-l0rg40o53e] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 6px 12px;
        background: none;
        border: none;
        color: rgba(148,163,184,0.6);
        cursor: pointer;
        transition: color 0.15s ease;
        position: relative;
        font-family: inherit;
    }

    .mobileTab:active[b-l0rg40o53e] {
        transform: scale(0.95);
    }

    .mobileTabDisabled[b-l0rg40o53e] {
        opacity: 0.3;
        cursor: default;
    }

    .mobileTabLabel[b-l0rg40o53e] {
        font-size: 0.6rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .mobileTabActive[b-l0rg40o53e] {
        color: #93c5fd;
    }

    .mobileTabActiveLive[b-l0rg40o53e] { color: #6ee7b7; }
    .mobileTabActiveUpcoming[b-l0rg40o53e] { color: #93c5fd; }
    .mobileTabActiveRecent[b-l0rg40o53e] { color: #fcd34d; }
    .mobileTabActiveModels[b-l0rg40o53e] { color: #c4b5fd; }

    .mobileTabLiveDot[b-l0rg40o53e] {
        position: absolute;
        top: 2px;
        right: 8px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #22c55e;
        animation: previewLiveBlink-b-l0rg40o53e 1.5s infinite;
    }

    /* Hide preview card grid on mobile — bottom bar replaces it */
    .previewCardGrid[b-l0rg40o53e] {
        display: none !important;
    }

    /* Spacer so content doesn't hide behind the fixed bottom bar */
    .mobileTabBarSpacer[b-l0rg40o53e] {
        display: block;
        height: 68px;
    }
}

/* ── Recent-card prelive odds row ──
   Sits between the teams-and-score block and the model-prediction grid. Tiny
   chip pair tinted green for the winning side, red for the losing side, so
   the user can instantly read whether the result was the bookmaker's
   favourite or an upset. Hidden when the series has no captured odds. */
.recentCardOdds[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 12px;
    margin: 6px 0 10px;
    font-size: 0.78rem;
}
.recentCardOddsLabel[b-l0rg40o53e] {
    font-size: 0.64rem;
    font-weight: 700;
    color: var(--mutedFaint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.recentCardOddsChip[b-l0rg40o53e] {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
    letter-spacing: -0.005em;
}
.recentOddsWin[b-l0rg40o53e] {
    background: rgba(34, 197, 94, 0.16);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.35);
}
.recentOddsLose[b-l0rg40o53e] {
    background: rgba(248, 113, 113, 0.14);
    color: #f87171;
    border: 1px solid rgba(248, 113, 113, 0.3);
}
.recentCardOddsSep[b-l0rg40o53e] {
    color: var(--mutedFaint);
    font-weight: 600;
}

/* ── Upcoming market dropdown + Series Handicap (Premium) view ── */
.upcomingMarketSelect[b-l0rg40o53e] {
    font-weight: 600;
}

.upcomingHandicap[b-l0rg40o53e] {
    margin-top: 12px;
    background: rgba(34, 211, 238, 0.04);
    border: 1px solid rgba(34, 211, 238, 0.18);
    border-radius: 10px;
    padding: 12px 14px;
}

.hcapHead[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.hcapTitle[b-l0rg40o53e] {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text);
}

.hcapPremiumTag[b-l0rg40o53e] {
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    border-radius: 999px;
    padding: 2px 7px;
}

.hcapSides[b-l0rg40o53e] {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.hcapSide[b-l0rg40o53e] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--panelSoft);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 7px 10px;
}

.hcapSideRight[b-l0rg40o53e] {
    align-items: flex-end;
}

.hcapSideTeam[b-l0rg40o53e] {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text);
}

.hcapSideOdds[b-l0rg40o53e] {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.hcapTable[b-l0rg40o53e] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hcapRow[b-l0rg40o53e] {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr;
    align-items: center;
    gap: 8px;
    padding: 5px 4px;
    border-top: 1px solid var(--border);
}

.hcapRowModel[b-l0rg40o53e] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--textSoft);
}

.hcapRowCell[b-l0rg40o53e] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}

.hcapRowPct[b-l0rg40o53e] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.hcapRowEv[b-l0rg40o53e] {
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.hcapRowCell.foValueGood .hcapRowEv[b-l0rg40o53e] { color: #22c55e; }
.hcapRowCell.foValueBad .hcapRowEv[b-l0rg40o53e] { color: #ef4444; }

.hcapEmpty[b-l0rg40o53e] {
    font-size: 0.8rem;
    color: var(--muted);
    text-align: center;
}

.hcapLocked[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: #a855f7;
}

.hcapLockedText[b-l0rg40o53e] {
    flex: 1;
    font-size: 0.8rem;
    color: var(--textSoft);
    line-height: 1.4;
}

.hcapUpgradeBtn[b-l0rg40o53e] {
    flex-shrink: 0;
    font-size: 0.74rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    border-radius: 7px;
    padding: 5px 12px;
}

/* ── Upcoming market dropdown (custom, supports Premium tag) ── */
.marketDropdown[b-l0rg40o53e] { position: relative; }
/* Right-aligned menu variant — used on the live card where the trigger sits at the
   card's right edge, so a left-aligned menu would overflow and get clipped. */
.marketDropdown--right .marketDropdownMenu[b-l0rg40o53e] { left: auto; right: 0; }

.marketDropdownTrigger[b-l0rg40o53e] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--panelSoft);
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.marketDropdownTrigger:hover[b-l0rg40o53e] { border-color: #6366f1; }

.marketDropdownMenu[b-l0rg40o53e] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 50;
    min-width: 220px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 9px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.4);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.marketDropdownOption[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 9px 11px;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
    text-align: left;
    border-radius: 6px;
    cursor: pointer;
}

.marketDropdownOption:hover[b-l0rg40o53e] { background: var(--panelSoft); }
.marketDropdownOptionSel[b-l0rg40o53e] { background: rgba(99,102,241,0.14); }

.marketPremiumTag[b-l0rg40o53e] {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    border-radius: 999px;
    padding: 2px 8px;
}

/* Live-card series prediction header: label on the left, market dropdown on the right. */
.seriesPredHeaderRow[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.seriesPredHeaderRow .seriesPredLabel[b-l0rg40o53e] { margin: 0; }

/* Handicap +1.5/-1.5 tags above the team row (live card). Mirrors the detail pages:
   neutral pill, line number in a red (give) / green (get) badge. */
.hcapTagRow[b-l0rg40o53e] {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 8px 0 4px;
    flex-wrap: wrap;
}
.hcapTag[b-l0rg40o53e] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text);
    padding: 4px 8px 4px 12px;
    border-radius: 999px;
    background: var(--panelSoft);
    border: 1px solid var(--border);
}
.hcapTag strong[b-l0rg40o53e] {
    font-size: 0.95rem;
    font-weight: 800;
    padding: 2px 9px;
    border-radius: 999px;
    letter-spacing: -0.01em;
}
.hcapTagGive strong[b-l0rg40o53e] { color: #f87171; background: rgba(248, 113, 113, 0.16); }
.hcapTagGet strong[b-l0rg40o53e] { color: #4ade80; background: rgba(74, 222, 128, 0.16); }

.lcHandicapEmpty[b-l0rg40o53e] {
    font-size: 0.8rem;
    color: var(--muted);
    text-align: center;
    padding: 12px 8px;
}

/* Handicap line sub-header above the (shared) prediction UI */
.hcapLineLabel[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin: 10px 0 2px;
}

.hcapLineChips[b-l0rg40o53e] { display: inline-flex; gap: 6px; }

.hcapLineChip[b-l0rg40o53e] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text);
    background: var(--panelSoft);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 2px 8px;
}

/* ── Series Handicap header (Option A): tinted band, favourite chip, segmented toggle ── */
.hcapBar[b-l0rg40o53e] {
    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[b-l0rg40o53e] {
    color: #22d3ee;
    font-weight: 800;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hcapBarLines[b-l0rg40o53e] { display: inline-flex; align-items: center; gap: 12px; }

/* Favourite + underdog lines: plain text, both the same colour, with team logos and a
   clear vertical divider between the two sides. Not pill/clickable-styled. */
.hcapHdrSide[b-l0rg40o53e] { display: inline-flex; align-items: center; gap: 6px; }

.hcapHdrLogo[b-l0rg40o53e] {
    width: 17px;
    height: 17px;
    border-radius: 4px;
    object-fit: contain;
    flex-shrink: 0;
}

.hcapHdrTxt[b-l0rg40o53e] {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text);
}

.hcapHdrDiv[b-l0rg40o53e] {
    width: 1px;
    height: 18px;
    background: var(--border);
    opacity: 0.9;
}

.hcapSeg[b-l0rg40o53e] {
    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[b-l0rg40o53e] {
    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[b-l0rg40o53e] { color: var(--text); }

.hcapSegBtnOn[b-l0rg40o53e] {
    background: #22d3ee;
    color: #04222a;
}

/* ── Exact Score header: "TEAM1 [logo]  3–1  [logo] TEAM2" ── */
.esScoreHdr[b-l0rg40o53e] { gap: 10px; }
.esScoreNum[b-l0rg40o53e] {
    font-size: 0.95rem;
    font-weight: 800;
    color: #22d3ee;
    letter-spacing: 0.02em;
}

/* ── Exact Score single-value bars (one probability per model — not a two-sided split) ── */
.esRow[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0;
}
.esRow .upPredModel[b-l0rg40o53e] { min-width: 92px; }
.esBar[b-l0rg40o53e] {
    position: relative;
    flex: 1;
    height: 26px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    border-radius: 7px;
    overflow: hidden;
}
.esBarFill[b-l0rg40o53e] {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    border-radius: 6px 0 0 6px;
    transition: width 0.2s ease;
    min-width: 2px;
}
.esBarPct[b-l0rg40o53e] {
    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[b-l0rg40o53e] { background: linear-gradient(90deg, #22d3ee, #0ea5b7); }
/* EV-coloured fill: green = +EV, red = −EV (the most-likely scoreline shown by value). */
.esBarFillPos[b-l0rg40o53e] { background: linear-gradient(90deg, #22c55e, #16a34a) !important; }
.esBarFillNeg[b-l0rg40o53e] { background: linear-gradient(90deg, #ef4444, #dc2626) !important; }
.esEv[b-l0rg40o53e] {
    flex-shrink: 0;
    font-size: 0.74rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
}
.esEvPos[b-l0rg40o53e] { color: #16331f; background: #4ade80; }
.esEvNeg[b-l0rg40o53e] { color: #fff; background: #b91c1c; }
.esNoOdds[b-l0rg40o53e] { font-size: 0.78rem; color: var(--muted); font-style: italic; margin: 4px 0 2px; }

/* Total Maps bet365 price chip in the header */
.tmOdds[b-l0rg40o53e] { font-size: 0.8rem; font-weight: 800; color: #fbbf24; margin-left: 6px; }

/* "New market — experimental" banner above the upcoming grid (owner preview) */
.newMarketBanner[b-l0rg40o53e] {
    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[b-l0rg40o53e] { color: #fbbf24; }

/* ── Week-preview entry strip (under the upcoming header) ── */
.wkPreviewStrip[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 16px;
}
.wkPreviewStripLabel[b-l0rg40o53e] {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mutedFaint);
    margin-right: 2px;
}
.wkPreviewChip[b-l0rg40o53e] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    font-size: 0.76rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.12s;
}
.wkPreviewChip:hover[b-l0rg40o53e] { border-color: #60a5fa; color: #60a5fa; }
.wkPreviewChip img[b-l0rg40o53e] { object-fit: contain; }


/* ── Live card score-state scrubber (pre-match -> after each game) ── */
.lcScrub[b-l0rg40o53e] {
    display: inline-flex;
    gap: 2px;
    flex-wrap: wrap;
    margin: 8px 0 6px;
    padding: 3px;
    background: var(--panelDeep, rgba(15, 23, 42, 0.5));
    border: 1px solid var(--border, #2a3550);
    border-radius: 11px;
}

.lcScrubBtn[b-l0rg40o53e] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--mutedFaint, #64748b);
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 10px;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    transition: color 0.15s, background 0.15s, box-shadow 0.15s;
}

.lcScrubBtn:hover[b-l0rg40o53e] { color: var(--muted, #94a3b8); }

.lcScrubBtn b[b-l0rg40o53e] { font-size: 0.78rem; font-weight: 800; color: inherit; }

.lcScrubBtn.lcScrubOn[b-l0rg40o53e] {
    color: #4ade80;
    background: linear-gradient(180deg, rgba(74, 222, 128, 0.16), rgba(74, 222, 128, 0.05));
    border-color: rgba(74, 222, 128, 0.45);
    box-shadow: 0 2px 10px rgba(74, 222, 128, 0.12), inset 0 1px 0 rgba(74, 222, 128, 0.15);
}

.lcScrubLogo[b-l0rg40o53e] {
    width: 15px;
    height: 15px;
    object-fit: contain;
    border-radius: 4px;
}

.lcScrubDash[b-l0rg40o53e] { color: var(--mutedFaint, #64748b); }

.lcScrubStage[b-l0rg40o53e] {
    font-size: 0.54rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    color: var(--mutedFaint, #64748b);
    margin-left: 3px;
}

.lcScrubStageLive[b-l0rg40o53e] { color: #4ade80; }

/* Live/step pill next to the "Live Market Re-price" label */
.lcRepriceLive[b-l0rg40o53e] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 8px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #4ade80;
}

.lcRepriceStage[b-l0rg40o53e] {
    margin-left: 8px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--mutedFaint, #64748b);
}

.lcViewTabDot[b-l0rg40o53e] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 6px 1px rgba(74, 222, 128, 0.7);
    animation: lcViewPulse-b-l0rg40o53e 2s ease-in-out infinite;
}

@keyframes lcViewPulse-b-l0rg40o53e {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}
/* /Components/Pages/LiveMatchDetail.razor.rz.scp.css */
.liveDetailPage[b-cr1hsptdgd] {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

/* ══════════════════════════════════════════════════════════════
   BROADCAST HEADER
   ══════════════════════════════════════════════════════════════ */
.bcHeader[b-cr1hsptdgd] {
    margin-bottom: 20px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radiusSm);
    overflow: hidden;
}

/* Top info bar */
.bcInfoBar[b-cr1hsptdgd] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--borderSoft);
}

.bcLive[b-cr1hsptdgd] {
    font-size: 0.65rem;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(74, 222, 128, 0.2);
    color: #4ade80;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    animation: bcPulse-b-cr1hsptdgd 2s ease-in-out infinite;
}

@keyframes bcPulse-b-cr1hsptdgd {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.bcLeague[b-cr1hsptdgd] {
    font-weight: 800;
    font-size: 0.78rem;
    color: var(--blueLight);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.bcLeagueLink[b-cr1hsptdgd] {
    font-weight: 800;
    font-size: 0.78rem;
    color: var(--blueLight);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: opacity 0.15s;
}
.bcLeagueLink:hover[b-cr1hsptdgd] { opacity: 0.75; text-decoration: underline; }

.bcTeamLink[b-cr1hsptdgd] {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.15s;
}
.bcTeamLink:hover[b-cr1hsptdgd] { opacity: 0.8; }

.bcFormat[b-cr1hsptdgd] {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--muted);
    padding: 2px 6px;
    background: var(--hoverGlow);
    border-radius: 4px;
}

.bcGameNum[b-cr1hsptdgd] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--muted);
    margin-left: auto;
}

/* Main scoreboard */
.bcScoreboard[b-cr1hsptdgd] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0;
    padding: 16px 20px;
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.06), transparent 30%, transparent 70%, rgba(220, 38, 38, 0.06));
}

.bcTeamSide[b-cr1hsptdgd] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bcTeamBlue[b-cr1hsptdgd] { justify-content: flex-start; }
.bcTeamRed[b-cr1hsptdgd] { justify-content: flex-end; }

.bcTeamLogo[b-cr1hsptdgd] {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

.bcTeamMeta[b-cr1hsptdgd] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.bcTeamMetaRight[b-cr1hsptdgd] {
    text-align: right;
    align-items: flex-end;
}

.bcTeamName[b-cr1hsptdgd] {
    font-weight: 900;
    font-size: 1.1rem;
    color: var(--text);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}

.bcSideLabel[b-cr1hsptdgd] {
    font-size: 0.55rem;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.06em;
    display: inline-block;
    width: fit-content;
}

.bcSideLabelBlue[b-cr1hsptdgd] { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.bcSideLabelRed[b-cr1hsptdgd] { background: rgba(239, 68, 68, 0.15); color: #f87171; }

.bcTeamMetaRight .bcSideLabel[b-cr1hsptdgd] { margin-left: auto; }

/* Series dots */
.bcSeriesDots[b-cr1hsptdgd] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.bcDot[b-cr1hsptdgd] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: transparent;
    transition: all 0.2s;
}

.bcDotWon[b-cr1hsptdgd] { border-color: transparent; }
.bcDotBlue[b-cr1hsptdgd] { background: #3b82f6; box-shadow: 0 0 6px rgba(59, 130, 246, 0.4); }
.bcDotRed[b-cr1hsptdgd] { background: #ef4444; box-shadow: 0 0 6px rgba(239, 68, 68, 0.4); }

/* Center score */
.bcCenter[b-cr1hsptdgd] {
    text-align: center;
    min-width: 160px;
    padding: 0 16px;
}

.bcKillRow[b-cr1hsptdgd] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.bcKills[b-cr1hsptdgd] {
    font-size: 2.2rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.bcKillsBlue[b-cr1hsptdgd] { color: #60a5fa; }
.bcKillsRed[b-cr1hsptdgd] { color: #f87171; }

.bcGameTimeRow[b-cr1hsptdgd] {
    text-align: center;
    margin-bottom: 2px;
}

.bcGameTime[b-cr1hsptdgd] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

.bcVs[b-cr1hsptdgd] {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--muted);
}

.bcGoldRow[b-cr1hsptdgd] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 20px 20px;
    border-top: 1px solid var(--borderSoft);
    background: rgba(0, 0, 0, 0.08);
}

.bcGoldVal[b-cr1hsptdgd] {
    font-size: 1rem;
    font-weight: 800;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.bcGoldBlue[b-cr1hsptdgd] { color: rgba(96, 165, 250, 0.8); }
.bcGoldRed[b-cr1hsptdgd] { color: rgba(248, 113, 113, 0.8); }

.bcGoldVs[b-cr1hsptdgd] {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--muted);
    opacity: 0.5;
}

.bcGoldValWrap[b-cr1hsptdgd] {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.bcGoldIcon[b-cr1hsptdgd] {
    width: 14px;
    height: 14px;
}

.bcGoldDiff[b-cr1hsptdgd] {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.68rem;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    margin-top: 1px;
}

.bcGoldDiffBlue[b-cr1hsptdgd] { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.bcGoldDiffRed[b-cr1hsptdgd] { background: rgba(239, 68, 68, 0.15); color: #f87171; }

/* Finished badge */
.bcFinished[b-cr1hsptdgd] {
    font-size: 0.65rem;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(100, 116, 139, 0.25);
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Winner banner */
.bcWinnerBanner[b-cr1hsptdgd] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    margin-bottom: 16px;
    border-radius: var(--radiusSm);
    font-weight: 900;
    font-size: 1rem;
}

.bcWinnerBlue[b-cr1hsptdgd] {
    background: rgba(37, 99, 235, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #60a5fa;
}

.bcWinnerRed[b-cr1hsptdgd] {
    background: rgba(220, 38, 38, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #f87171;
}

.bcWinnerLogo[b-cr1hsptdgd] {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 6px;
}

.bcWinnerText[b-cr1hsptdgd] {
    letter-spacing: 0.02em;
}

/* Inline objectives (next to gold) */
.bcObjInline[b-cr1hsptdgd] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.bcObjIconSm[b-cr1hsptdgd] {
    width: 27px;
    height: 27px;
    object-fit: contain;
    opacity: 0.85;
}

/* Dragon types row */
.bcDragonsRow[b-cr1hsptdgd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 20px;
    border-top: 1px solid var(--borderSoft);
    background: rgba(0, 0, 0, 0.08);
}

.bcDragonsSide[b-cr1hsptdgd] {
    display: flex;
    gap: 4px;
    min-width: 80px;
}

.bcDragonsSideRight[b-cr1hsptdgd] {
    justify-content: flex-end;
}

.bcDragonsLabel[b-cr1hsptdgd] {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.bcDragonIcon[b-cr1hsptdgd] {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 50%;
}

.bcDragonSoul[b-cr1hsptdgd] {
    box-shadow: 0 0 8px 3px rgba(255, 215, 0, 0.7);
    border: 2px solid #ffd700;
    transform: scale(1.15);
}

/* Draft row */
.bcDraftRow[b-cr1hsptdgd] {
    display: flex;
    justify-content: center;
    gap: 24px;
    padding: 12px 16px;
    border-top: 1px solid var(--borderSoft);
}

.bcDraftSide[b-cr1hsptdgd] {
    display: flex;
    gap: 6px;
}

.bcDraftPick[b-cr1hsptdgd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.bcDraftImg[b-cr1hsptdgd] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 2px solid var(--border);
    object-fit: cover;
}

.bcDraftBlue .bcDraftImg[b-cr1hsptdgd] { border-color: rgba(59, 130, 246, 0.4); }
.bcDraftRed .bcDraftImg[b-cr1hsptdgd] { border-color: rgba(239, 68, 68, 0.4); }

.bcDraftFallback[b-cr1hsptdgd] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--muted);
    background: var(--hoverGlow);
}

.bcDraftRole[b-cr1hsptdgd] {
    font-size: 0.55rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ── No Live Data Compact View ── */

.bcHeaderCompact[b-cr1hsptdgd] {
    padding-bottom: 16px;
}

.bcNoLiveTeams[b-cr1hsptdgd] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px 20px;
}

.bcNoLiveTeam[b-cr1hsptdgd] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bcNoLiveTeamRight[b-cr1hsptdgd] {
    flex-direction: row-reverse;
}

.bcNoLiveLogo[b-cr1hsptdgd] {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: contain;
}

.bcNoLiveNameBlock[b-cr1hsptdgd] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bcNoLiveNameBlockRight[b-cr1hsptdgd] {
    align-items: flex-end;
}

.bcNoLiveName[b-cr1hsptdgd] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}

.bcNoLiveVs[b-cr1hsptdgd] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: 0.08em;
}

.bcNoLiveBadge[b-cr1hsptdgd] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    margin: 0 16px 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bcNoLiveIcon[b-cr1hsptdgd] {
    opacity: 0.5;
    flex-shrink: 0;
}

.bcDraftCompact[b-cr1hsptdgd] {
    border-top: none;
    padding: 8px 16px;
    gap: 16px;
}

.bcDraftCompact .bcDraftImg[b-cr1hsptdgd] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
}

.bcDraftCompact .bcDraftFallback[b-cr1hsptdgd] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    font-size: 0.75rem;
}

.bcDraftCompact .bcDraftRole[b-cr1hsptdgd] {
    font-size: 0.5rem;
}

/* ── Objective Announcements ─── */

.objAnnounce[b-cr1hsptdgd] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 18px;
    margin-bottom: 12px;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(0,0,0,0.4), rgba(0,0,0,0.15));
    border: 1px solid rgba(255,255,255,0.08);
    animation: objSlideIn-b-cr1hsptdgd 0.4s ease-out;
    transition: opacity 2s ease-out;
    opacity: 1;
}

.objAnnounce.objAnnounceFading[b-cr1hsptdgd] {
    opacity: 0;
}

.objAnnounceBlue[b-cr1hsptdgd] {
    border-left: 3px solid #60a5fa;
}

.objAnnounceRed[b-cr1hsptdgd] {
    border-left: 3px solid #f87171;
}

.objAnnounceTeam[b-cr1hsptdgd] {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.objAnnounceType[b-cr1hsptdgd] {
    font-size: 0.82rem;
    font-weight: 700;
    color: #fbbf24;
    letter-spacing: 0.02em;
}

.objAnnounceTime[b-cr1hsptdgd] {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--muted);
    margin-left: 4px;
    font-variant-numeric: tabular-nums;
}

@keyframes objSlideIn-b-cr1hsptdgd {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════════
   PLAYER SCOREBOARD (H2H by Role)
   ══════════════════════════════════════════════════════════════ */
.sbContainer[b-cr1hsptdgd] {
    margin-bottom: 20px;
    border-radius: var(--radiusSm);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--panel);
}

.sbH2hHeader[b-cr1hsptdgd] {
    display: grid;
    grid-template-columns: 1fr 64px 1fr;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--borderSoft);
    background: var(--panelDeep);
}

.sbH2hTeam[b-cr1hsptdgd] {
    font-weight: 900;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sbH2hBlue[b-cr1hsptdgd] { color: #60a5fa; text-align: right; }
.sbH2hRed[b-cr1hsptdgd] { color: #f87171; text-align: left; }

.sbH2hRole[b-cr1hsptdgd] {
    font-weight: 700;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    text-align: center;
}

.sbH2hRow[b-cr1hsptdgd] {
    display: grid;
    grid-template-columns: 1fr 64px 1fr;
    align-items: center;
    padding: 5px 12px;
    border-bottom: 1px solid var(--borderSoft);
    transition: background 0.1s;
}

.sbH2hRow:last-child[b-cr1hsptdgd] { border-bottom: none; }
.sbH2hRow:hover[b-cr1hsptdgd] { background: var(--hoverGlow); }

.sbH2hPlayer[b-cr1hsptdgd] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.sbH2hLeft[b-cr1hsptdgd] { justify-content: flex-end; }
.sbH2hRight[b-cr1hsptdgd] { justify-content: flex-start; }

.sbRoleCenter[b-cr1hsptdgd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.sbRoleBadge[b-cr1hsptdgd] {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    text-align: center;
    background: rgba(255,255,255,0.04);
    border-radius: 4px;
    padding: 3px 6px;
}

.sbGoldDiff[b-cr1hsptdgd] {
    font-size: 0.6rem;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 3px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sbGoldDiffBlue[b-cr1hsptdgd] { color: #93c5fd; background: rgba(59,130,246,0.15); }
.sbGoldDiffRed[b-cr1hsptdgd] { color: #fca5a5; background: rgba(239,68,68,0.15); }

.sbLevel[b-cr1hsptdgd] {
    font-size: 0.72rem;
    font-weight: 900;
    text-align: center;
    font-variant-numeric: tabular-nums;
    padding: 2px 4px;
    border-radius: 4px;
    min-width: 20px;
    flex-shrink: 0;
}

.sbLevelBlue[b-cr1hsptdgd] { color: #60a5fa; background: rgba(59, 130, 246, 0.1); }
.sbLevelRed[b-cr1hsptdgd] { color: #f87171; background: rgba(239, 68, 68, 0.1); }

.sbChampWrap[b-cr1hsptdgd] {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

/* Dead player champion icon */
.sbChampWrap.champDead[b-cr1hsptdgd] {
    position: relative;
}

.sbChampDead[b-cr1hsptdgd] {
    filter: grayscale(100%) brightness(0.4);
}

.sbDeathTimer[b-cr1hsptdgd] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.7rem;
    font-weight: 800;
    color: #ef4444;
    text-shadow: 0 0 4px rgba(0,0,0,0.9);
    z-index: 2;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}

/* Health bar below champion icon */
.sbHpBar[b-cr1hsptdgd] {
    display: block;
    width: 100%;
    height: 3px;
    background: rgba(0,0,0,0.5);
    border-radius: 1.5px;
    overflow: hidden;
    margin-top: 2px;
}
.sbHpFill[b-cr1hsptdgd] {
    display: block;
    height: 100%;
    border-radius: 1.5px;
    transition: width 0.4s ease;
}
.sbHpBlue[b-cr1hsptdgd], .sbHpRed[b-cr1hsptdgd] { background: linear-gradient(90deg, #22c55e, #4ade80); }

.sbChampWrap.champDead .sbHpBar[b-cr1hsptdgd] { display: none; }

.sbChampWrap.baronBuff[b-cr1hsptdgd] {
    animation: baronPulse-b-cr1hsptdgd 2s ease-in-out infinite;
}

.sbChampWrap.baronBuff[b-cr1hsptdgd]::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: #9b59b6;
    border-right-color: #8e44ad;
    animation: baronSpin-b-cr1hsptdgd 1.5s linear infinite;
    pointer-events: none;
}

.sbChampWrap.baronBuff[b-cr1hsptdgd]::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    box-shadow: 0 0 8px 2px rgba(155, 89, 182, 0.5);
    pointer-events: none;
    animation: baronGlow-b-cr1hsptdgd 2s ease-in-out infinite;
}

@keyframes baronSpin-b-cr1hsptdgd {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes baronPulse-b-cr1hsptdgd {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.15); }
}

@keyframes baronGlow-b-cr1hsptdgd {
    0%, 100% { box-shadow: 0 0 4px 1px rgba(155, 89, 182, 0.3); }
    50% { box-shadow: 0 0 10px 3px rgba(155, 89, 182, 0.6); }
}

.sbChampIcon[b-cr1hsptdgd] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--border);
    object-fit: cover;
    flex-shrink: 0;
}

.sbChampBlue[b-cr1hsptdgd] { border-color: rgba(59, 130, 246, 0.35); }
.sbChampRed[b-cr1hsptdgd] { border-color: rgba(239, 68, 68, 0.35); }

.sbPlayerName[b-cr1hsptdgd] {
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90px;
}

.sbKda[b-cr1hsptdgd] {
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
}

.sbK[b-cr1hsptdgd] { color: #4ade80; }
.sbD[b-cr1hsptdgd] { color: #f87171; }
.sbA[b-cr1hsptdgd] { color: #94a3b8; }

.sbCs[b-cr1hsptdgd] {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.sbGold[b-cr1hsptdgd] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #fbbf24;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════
   DRAFT DETAILS (from PredictDraft)
   ══════════════════════════════════════════════════════════════ */
.details[b-cr1hsptdgd] { margin-top: 14px; }
.details summary[b-cr1hsptdgd] { cursor: pointer; font-weight: 950; color: var(--text); }
.detailBlock[b-cr1hsptdgd] { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--borderSoft); }
.detailTitle[b-cr1hsptdgd] { font-weight: 950; margin-bottom: 10px; color: var(--text); }

.tableWrap[b-cr1hsptdgd] { overflow: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.table[b-cr1hsptdgd] { width: 100%; border-collapse: collapse; }
.table th[b-cr1hsptdgd], .table td[b-cr1hsptdgd] { padding: 8px 10px; border-bottom: 1px solid var(--borderSoft); }
.table thead th[b-cr1hsptdgd] { text-align: left; color: var(--muted); font-size: 0.9rem; background: var(--panelSoft); }
.table.compact th[b-cr1hsptdgd], .table.compact td[b-cr1hsptdgd] { padding: 7px 9px; }
.num[b-cr1hsptdgd] { text-align: center; font-variant-numeric: tabular-nums; }
.table th.num[b-cr1hsptdgd], .table td.num[b-cr1hsptdgd] { text-align: center !important; }

.diff.pos[b-cr1hsptdgd] { color: var(--blue); font-weight: 950; }
.diff.neg[b-cr1hsptdgd] { color: var(--red); font-weight: 950; }
.diff.zero[b-cr1hsptdgd] { color: var(--muted); font-weight: 900; }

.laneGrid[b-cr1hsptdgd] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .laneGrid[b-cr1hsptdgd] { grid-template-columns: 1fr; } }
.laneCard[b-cr1hsptdgd] { border: 1px solid var(--border); border-radius: 12px; background: var(--panel); padding: 10px; }
.laneTitle[b-cr1hsptdgd] { font-weight: 950; color: var(--text); margin-bottom: 8px; }

/* Lane Edges */
.draftEdgeSummary[b-cr1hsptdgd] { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 14px; padding: 10px 16px; border-radius: 10px; background: var(--panelSoft); border: 1px solid var(--borderSoft); }
.draftEdgeLabel[b-cr1hsptdgd] { font-size: 0.78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.draftEdgeValue[b-cr1hsptdgd] { font-size: 1.1rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.draftEdgeValue.blue-edge[b-cr1hsptdgd] { color: var(--blue); }
.draftEdgeValue.red-edge[b-cr1hsptdgd] { color: var(--red); }
.draftEdgeValue.even-edge[b-cr1hsptdgd] { color: var(--muted); }
.draftEdgeFavored[b-cr1hsptdgd] { font-size: 0.75rem; font-weight: 800; padding: 2px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.draftEdgeFavored.blue-edge[b-cr1hsptdgd] { background: rgba(59, 130, 246, 0.12); color: var(--blue); }
.draftEdgeFavored.red-edge[b-cr1hsptdgd] { background: rgba(239, 68, 68, 0.12); color: var(--red); }
.draftEdgeFavored.even-edge[b-cr1hsptdgd] { background: rgba(148, 163, 184, 0.1); color: var(--muted); }

.laneEdgeCards[b-cr1hsptdgd] { display: flex; flex-direction: column; gap: 6px; }
.laneEdgeCard[b-cr1hsptdgd] { display: grid; grid-template-columns: 70px 1fr 65px; grid-template-rows: auto auto; gap: 0 10px; padding: 10px 14px; border-radius: 10px; background: var(--panel); border: 1px solid var(--border); }
.laneEdgeCard.le-blue[b-cr1hsptdgd] { border-left: 3px solid var(--blue); background: linear-gradient(90deg, rgba(59, 130, 246, 0.06), transparent); }
.laneEdgeCard.le-red[b-cr1hsptdgd] { border-left: 3px solid var(--red); background: linear-gradient(90deg, rgba(239, 68, 68, 0.06), transparent); }
.laneEdgeCard.le-even[b-cr1hsptdgd] { border-left: 3px solid var(--muted); }
.leRole[b-cr1hsptdgd] { grid-row: 1 / 3; align-self: center; font-weight: 900; font-size: 0.82rem; color: var(--text); text-transform: uppercase; letter-spacing: 0.06em; }
.leBarWrap[b-cr1hsptdgd] { display: flex; align-items: center; height: 6px; border-radius: 999px; background: rgba(148, 163, 184, 0.1); overflow: hidden; position: relative; }
.leBarCenter[b-cr1hsptdgd] { width: 0; flex: 1; }
.leBarFill[b-cr1hsptdgd] { height: 100%; border-radius: 999px; transition: width 0.3s ease; }
.leBarRight[b-cr1hsptdgd] { background: var(--blue); }
.leBarLeft[b-cr1hsptdgd] { background: var(--red); margin-left: auto; }
.leValue[b-cr1hsptdgd] { grid-row: 1; align-self: center; text-align: right; font-weight: 900; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.leValue.le-blue[b-cr1hsptdgd] { color: var(--blue); }
.leValue.le-red[b-cr1hsptdgd] { color: var(--red); }
.leValue.le-even[b-cr1hsptdgd] { color: var(--muted); }
.leBreakdown[b-cr1hsptdgd] { grid-column: 2 / 4; display: flex; gap: 12px; margin-top: 4px; }
.leStat[b-cr1hsptdgd] { font-size: 0.7rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; cursor: help; }
.leStatKey[b-cr1hsptdgd] { font-weight: 800; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.04em; margin-right: 3px; opacity: 0.7; }

/* Player Rankings (H2H) */
.playerRankings[b-cr1hsptdgd] { background: var(--panel); border: 1px solid var(--border); }
.h2hFullWidth[b-cr1hsptdgd] { margin-top: 16px; }
.playerH2hTitle[b-cr1hsptdgd] { font-weight: 950; font-size: 1.3rem; color: var(--text); text-align: center; letter-spacing: -0.01em; padding-bottom: 8px; margin-bottom: 0; }
.rankingsDescription[b-cr1hsptdgd] { margin: 0 0 16px 0; color: var(--muted); font-size: 0.82rem; text-align: center; }

.summaryBar[b-cr1hsptdgd] { display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 12px; background: linear-gradient(90deg, rgba(37,99,235,0.06), transparent, rgba(220,38,38,0.06)); border-radius: 8px; border: 1px solid var(--border); }
.summaryTeam[b-cr1hsptdgd] { display: flex; align-items: center; gap: 8px; }
.summaryTeam.blueSummary[b-cr1hsptdgd] { justify-content: flex-start; }
.summaryTeam.redSummary[b-cr1hsptdgd] { justify-content: flex-end; }
.summaryLogo[b-cr1hsptdgd] { width: 28px; height: 28px; object-fit: contain; border-radius: 4px; flex-shrink: 0; }
.summaryTeamName[b-cr1hsptdgd] { font-weight: 900; font-size: 0.9rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.summaryPts[b-cr1hsptdgd] { font-weight: 900; font-size: 1.1rem; padding: 2px 10px; border-radius: 6px; flex-shrink: 0; }
.summaryPts.stat-advantage[b-cr1hsptdgd] { color: #22c55e; background: rgba(34, 197, 94, 0.12); }
.summaryPts.stat-disadvantage[b-cr1hsptdgd] { color: #ef4444; background: rgba(239, 68, 68, 0.1); }
.summaryPts.stat-near-equal[b-cr1hsptdgd], .summaryPts.stat-equal[b-cr1hsptdgd] { color: #eab308; background: rgba(234, 179, 8, 0.1); }
.summaryCenter[b-cr1hsptdgd] { display: flex; flex-direction: column; gap: 4px; }
.summaryProgressBar[b-cr1hsptdgd] { display: flex; height: 6px; border-radius: 3px; overflow: hidden; gap: 2px; }
.summaryProgressBlue[b-cr1hsptdgd] { background: linear-gradient(90deg, #2563eb, #3b82f6); border-radius: 3px 0 0 3px; transition: width 0.5s ease; }
.summaryProgressRed[b-cr1hsptdgd] { background: linear-gradient(90deg, #ef4444, #dc2626); border-radius: 0 3px 3px 0; transition: width 0.5s ease; }
.summaryCompareRow[b-cr1hsptdgd] { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; font-size: 0.68rem; }
.scLabel[b-cr1hsptdgd] { font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.55rem; text-align: center; white-space: nowrap; }
.scVal[b-cr1hsptdgd] { font-weight: 700; font-variant-numeric: tabular-nums; }
.summaryCompareRow .scVal:first-child[b-cr1hsptdgd] { text-align: right; }
.summaryCompareRow .scVal:last-child[b-cr1hsptdgd] { text-align: left; }
.scVal.stat-advantage[b-cr1hsptdgd] { color: #22c55e; }
.scVal.stat-disadvantage[b-cr1hsptdgd] { color: #ef4444; }
.scVal.stat-equal[b-cr1hsptdgd], .scVal.stat-near-equal[b-cr1hsptdgd] { color: #eab308; }

/* Draft Edge Banner */
/* ── Draft Overview: Option B Vertical Stack ── */
.doRow[b-cr1hsptdgd] { margin-bottom: 14px; }
.doLabel[b-cr1hsptdgd] { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.doBarWrap[b-cr1hsptdgd] { display: flex; align-items: center; gap: 10px; }
.doTeam[b-cr1hsptdgd] { font-size: 0.68rem; font-weight: 600; min-width: 72px; white-space: nowrap; color: var(--text); text-decoration: none; }
.doTeam:hover[b-cr1hsptdgd] { text-decoration: underline; }
.doTeamLeft[b-cr1hsptdgd] { text-align: right; }
.doTeamRight[b-cr1hsptdgd] { text-align: left; }
.doBar[b-cr1hsptdgd] { flex: 1; height: 28px; border-radius: 6px; overflow: hidden; position: relative; display: flex; background: rgba(255,255,255,0.04); }
.doBarBlue[b-cr1hsptdgd] { background: linear-gradient(90deg, #60a5fa, rgba(96,165,250,0.4)); height: 100%; transition: width 0.3s; }
.doBarRed[b-cr1hsptdgd] { background: linear-gradient(270deg, #f87171, rgba(248,113,113,0.4)); height: 100%; flex: 1; }
.doBarCenter[b-cr1hsptdgd] { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.5); gap: 6px; }
.doTag[b-cr1hsptdgd] { font-size: 0.56rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; padding: 1px 6px; border-radius: 3px; background: rgba(255,255,255,0.12); }
.doTag.doTagBlue[b-cr1hsptdgd] { background: rgba(59,130,246,0.2); color: #93c5fd; }
.doTag.doTagRed[b-cr1hsptdgd] { background: rgba(239,68,68,0.2); color: #fca5a5; }

/* Sub-synergy rows */
.doSubSynergy[b-cr1hsptdgd] { padding-left: 16px; margin-top: 6px; margin-bottom: 14px; }
.doSubRow[b-cr1hsptdgd] { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.doSubRow + .doSubRow[b-cr1hsptdgd] { border-top: 1px solid rgba(255,255,255,0.03); }
.doSubPair[b-cr1hsptdgd] { display: flex; align-items: center; gap: 3px; min-width: 56px; }
.doSubPairRight[b-cr1hsptdgd] { justify-content: flex-end; }
.doSubChamp[b-cr1hsptdgd] { width: 24px; height: 24px; border-radius: 4px; object-fit: cover; border: 1.5px solid rgba(255,255,255,0.1); }
.doSubRole[b-cr1hsptdgd] { font-size: 0.62rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; min-width: 48px; text-align: center; }
.doSubBar[b-cr1hsptdgd] { flex: 1; height: 16px; border-radius: 4px; overflow: hidden; display: flex; background: rgba(255,255,255,0.04); position: relative; }
.doSubBar .doBarBlue[b-cr1hsptdgd] { background: linear-gradient(90deg, #60a5fa, rgba(96,165,250,0.3)); }
.doSubBar .doBarRed[b-cr1hsptdgd] { background: linear-gradient(270deg, #f87171, rgba(248,113,113,0.3)); }
.doSubBarCenter[b-cr1hsptdgd] { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.62rem; font-weight: 700; color: var(--text); text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
.doSubBarCenter.doSubValBlue[b-cr1hsptdgd] { color: #93c5fd; }
.doSubBarCenter.doSubValRed[b-cr1hsptdgd] { color: #fca5a5; }

/* Clickable team links in summary */
a.summaryTeam[b-cr1hsptdgd] { text-decoration: none; color: inherit; }
a.summaryTeam:hover .summaryTeamName[b-cr1hsptdgd] { text-decoration: underline; }

/* Lane Row H2H Layout */
.laneRow[b-cr1hsptdgd] { margin-bottom: 4px; border-radius: 8px; background: var(--panelSoft); border: 1px solid var(--border); }
.laneContent[b-cr1hsptdgd] { display: grid; grid-template-columns: 1fr minmax(180px, 240px) 1fr; align-items: center; gap: 0; padding: 10px 16px; }
.laneSide[b-cr1hsptdgd] { display: flex; align-items: center; gap: 10px; min-width: 0; }
.laneSide.blueSide[b-cr1hsptdgd] { justify-content: flex-start; }
.laneSide.redSide[b-cr1hsptdgd] { justify-content: flex-end; }
.champPortraitWrap[b-cr1hsptdgd] { display: flex; flex-direction: column; align-items: center; gap: 3px; flex-shrink: 0; }
.firstTimeTag[b-cr1hsptdgd] { font-size: 0.5rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #fbbf24; background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.25); border-radius: 3px; padding: 1px 5px; line-height: 1.2; white-space: nowrap; }
.champPortrait[b-cr1hsptdgd] { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex-shrink: 0; position: relative; border: 2.5px solid var(--border); background: var(--border); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.champPortrait.blueGlow[b-cr1hsptdgd] { border-color: rgba(37, 99, 235, 0.6); box-shadow: 0 0 12px rgba(37, 99, 235, 0.2); }
.champPortrait.redGlow[b-cr1hsptdgd] { border-color: rgba(220, 38, 38, 0.6); box-shadow: 0 0 12px rgba(220, 38, 38, 0.2); }
.champPortrait.portraitWin[b-cr1hsptdgd] { border-color: rgba(34, 197, 94, 0.7); box-shadow: 0 0 14px rgba(34, 197, 94, 0.3); transform: scale(1.05); }
.champPortrait.portraitLose[b-cr1hsptdgd] { opacity: 0.7; filter: grayscale(30%); }
.champPortraitImg[b-cr1hsptdgd] { width: 100%; height: 100%; object-fit: cover; }
.champPortraitFallback[b-cr1hsptdgd] { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 1.3rem; font-weight: 800; color: white; background: linear-gradient(135deg, #475569, #334155); }
.champPortraitFallback.blueFallback[b-cr1hsptdgd] { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.champPortraitFallback.redFallback[b-cr1hsptdgd] { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.lanePlayerInfo[b-cr1hsptdgd] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lanePlayerInfo.alignRight[b-cr1hsptdgd] { text-align: right; }
.lanePlayerName[b-cr1hsptdgd] { font-size: 0.82rem; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.laneChampName[b-cr1hsptdgd] { font-size: 0.68rem; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.noDataText[b-cr1hsptdgd] { color: var(--muted); font-style: italic; font-weight: 400; }
.laneScore[b-cr1hsptdgd] { font-size: 1rem; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--text); padding: 3px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); flex-shrink: 0; min-width: 42px; text-align: center; }
.laneScore.scoreWin[b-cr1hsptdgd] { color: #22c55e; background: rgba(34, 197, 94, 0.15); box-shadow: 0 0 8px rgba(34, 197, 94, 0.15); }
.laneScore.scoreLose[b-cr1hsptdgd] { color: #ef4444; background: rgba(239, 68, 68, 0.1); }
.laneCenter[b-cr1hsptdgd] { display: flex; flex-direction: column; gap: 3px; padding: 0 12px; min-width: 0; }
.laneLabelCenter[b-cr1hsptdgd] { text-align: center; font-size: 0.6rem; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); padding: 0 0 2px; margin-bottom: 2px; border-bottom: 1px solid var(--hoverGlow); }
.laneStatRow[b-cr1hsptdgd] { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; font-size: 0.72rem; padding: 2px 4px; border-radius: 4px; background: rgba(255,255,255,0.02); }
.laneStatRow:nth-child(odd)[b-cr1hsptdgd] { background: rgba(255,255,255,0.035); }
.lsLabel[b-cr1hsptdgd] { font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.58rem; text-align: center; white-space: nowrap; padding: 0 4px; min-width: 36px; }
.lsVal[b-cr1hsptdgd] { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); font-size: 0.75rem; }
.laneStatRow .lsVal:first-child[b-cr1hsptdgd] { text-align: right; }
.laneStatRow .lsVal:last-child[b-cr1hsptdgd] { text-align: left; }
.lsVal.stat-advantage[b-cr1hsptdgd] { color: #22c55e; }
.lsVal.stat-disadvantage[b-cr1hsptdgd] { color: #ef4444; }
.lsVal.stat-equal[b-cr1hsptdgd], .lsVal.stat-near-equal[b-cr1hsptdgd] { color: #eab308; }

/* Lane Row — side accent when lane edge is available */
.laneRow.le-blue[b-cr1hsptdgd] { border-left: 3px solid rgba(59, 130, 246, 0.5); }
.laneRow.le-red[b-cr1hsptdgd] { border-left: 3px solid rgba(239, 68, 68, 0.5); }
.laneRow.le-even[b-cr1hsptdgd] { border-left: 3px solid rgba(148, 163, 184, 0.25); }

/* Lane Edge Pills (inline between player info and score) */
.laneEdgePills[b-cr1hsptdgd] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}
.blueEdgePills[b-cr1hsptdgd] { align-items: flex-end; }
.redEdgePills[b-cr1hsptdgd] { align-items: flex-start; }

.edgePill[b-cr1hsptdgd] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.6rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
    white-space: nowrap;
    position: relative;
    cursor: help;
}

/* Custom styled tooltip */
.edgePill[data-tooltip][b-cr1hsptdgd]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 14px;
    border-radius: 8px;
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border: 1px solid rgba(148, 163, 184, 0.15);
    color: #e2e8f0;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform: translateX(-50%) translateY(4px);
    z-index: 100;
}
.edgePill[data-tooltip][b-cr1hsptdgd]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1e293b;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 100;
}
.edgePill[data-tooltip]:hover[b-cr1hsptdgd]::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.edgePill[data-tooltip]:hover[b-cr1hsptdgd]::before {
    opacity: 1;
}
.edgePillBlue[b-cr1hsptdgd] {
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
}
.edgePillRed[b-cr1hsptdgd] {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
}
.epKey[b-cr1hsptdgd] {
    font-weight: 900;
    font-size: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.7;
}
.epVal[b-cr1hsptdgd] {
    font-weight: 800;
    font-size: 0.62rem;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .bcScoreboard[b-cr1hsptdgd] { grid-template-columns: 1fr; gap: 12px; padding: 12px 16px; }
    .bcTeamBlue[b-cr1hsptdgd], .bcTeamRed[b-cr1hsptdgd] { justify-content: center; }
    .bcTeamLogo[b-cr1hsptdgd] { width: 36px; height: 36px; }
    .bcTeamName[b-cr1hsptdgd] { font-size: 0.95rem; max-width: 120px; }
    .bcKills[b-cr1hsptdgd] { font-size: 1.6rem; }
    .bcCenter[b-cr1hsptdgd] { min-width: auto; padding: 0; }
    .bcDraftRow[b-cr1hsptdgd] { gap: 12px; }
    .bcDraftImg[b-cr1hsptdgd], .bcDraftFallback[b-cr1hsptdgd] { width: 32px; height: 32px; }
    .sbH2hRow[b-cr1hsptdgd] { grid-template-columns: 1fr 36px 1fr; padding: 4px 8px; }
    .sbChampIcon[b-cr1hsptdgd] { width: 26px; height: 26px; }
    .sbLevel[b-cr1hsptdgd] { font-size: 0.65rem; }
    .sbPlayerName[b-cr1hsptdgd] { font-size: 0.68rem; max-width: 60px; }
    .sbKda[b-cr1hsptdgd] { font-size: 0.62rem; }
    .sbCs[b-cr1hsptdgd], .sbGold[b-cr1hsptdgd] { display: none; }
    .laneContent[b-cr1hsptdgd] { grid-template-columns: 1fr; gap: 8px; }
    .laneSide.redSide[b-cr1hsptdgd] { justify-content: flex-start; }
    .champPortrait[b-cr1hsptdgd] { width: 44px; height: 44px; }
    .summaryBar[b-cr1hsptdgd] { grid-template-columns: 1fr; gap: 8px; }
    .summaryTeam.redSummary[b-cr1hsptdgd] { justify-content: flex-start; }
    .laneEdgePills[b-cr1hsptdgd] { flex-direction: row; flex-wrap: wrap; gap: 2px; }
    .edgePill[b-cr1hsptdgd] { padding: 1px 4px; font-size: 0.52rem; }
    .epKey[b-cr1hsptdgd] { font-size: 0.45rem; }
    .epVal[b-cr1hsptdgd] { font-size: 0.55rem; }
    .draftEdgeBanner[b-cr1hsptdgd] { flex-wrap: wrap; gap: 6px; padding: 8px 12px; }
    .deBannerValue[b-cr1hsptdgd] { font-size: 0.95rem; }

    /* Summary bar: the inner flex / grid descendants default to
       min-width: auto, which lets their content (long team names + numeric
       chips on the same row) push the cell wider than its 1fr grid column.
       Pinning min-width: 0 keeps the whole stack inside the parent panel
       on a 375px-wide viewport. */
    .summaryBar > *[b-cr1hsptdgd] { min-width: 0; }
    .summaryCenter[b-cr1hsptdgd],
    .summaryProgressBar[b-cr1hsptdgd],
    .summaryCompareRow[b-cr1hsptdgd] { min-width: 0; width: 100%; }
    .summaryCompareRow[b-cr1hsptdgd] { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
    .summaryTeam[b-cr1hsptdgd] { min-width: 0; }
    .summaryTeamName[b-cr1hsptdgd] { min-width: 0; }

    /* Draft Edge / Synergy / Meta Score / Matchup / Experience rows.
       The desktop layout puts both team names + the bar in a single flex row,
       which on mobile collapses the bar to 0px width because the team names
       (e.g. "DetonatioN FocusMe Academy") consume all available space.
       Switch to a 2-column / 2-row grid: team names stacked side-by-side on
       top, bar spans full width below. */
    .doBarWrap[b-cr1hsptdgd] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 4px 10px;
        align-items: center;
    }
    .doTeam[b-cr1hsptdgd] {
        min-width: 0;
        white-space: normal;
        word-break: break-word;
        font-size: 0.62rem;
    }
    .doTeamLeft[b-cr1hsptdgd] { grid-column: 1; text-align: left; }
    .doTeamRight[b-cr1hsptdgd] { grid-column: 2; text-align: right; }
    .doBar[b-cr1hsptdgd] { grid-column: 1 / -1; height: 22px; }
    .doBarCenter[b-cr1hsptdgd] { font-size: 0.65rem; gap: 4px; }
    .doSubRow[b-cr1hsptdgd] { gap: 6px; }

    /* (Analysis tabs scroll affordance lives in PredictionResultBlock.razor.css —
       Blazor CSS isolation scopes the tab elements to that component, not this one.) */

    /* Top compact scoreboard (`bcHeaderCompact`): on a narrow viewport the
       static `gap: 16px` plus inline-only team blocks made the right-side
       team logo crowd the panel edge and "DFM Academy"-style two-word names
       wrap onto two lines. Tighten the gap and constrain the name width so
       the two halves of the matchup stay symmetric. */
    .bcNoLiveTeams[b-cr1hsptdgd] { gap: 8px; padding: 14px 10px; }
    .bcNoLiveLogo[b-cr1hsptdgd] { width: 34px; height: 34px; }
    .bcNoLiveName[b-cr1hsptdgd] {
        font-size: 0.85rem;
        line-height: 1.15;
        /* Show the FULL team name on mobile — wrap instead of clipping with an ellipsis.
           A bounded max-width keeps the two halves of the matchup symmetric; long names
           ("Team Liquid Alienware") wrap to a second line rather than truncating. */
        white-space: normal;
        overflow-wrap: anywhere;
        max-width: 140px;
    }
    .bcNoLiveBadge[b-cr1hsptdgd] { margin: 0 12px 8px; padding: 8px 12px; }
}

/* ── Market selector (MoneyLine / Series Handicap[Premium]) ── */
.mdMarketBar[b-cr1hsptdgd] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 12px; }
.marketDropdown[b-cr1hsptdgd] { position: relative; }
.marketDropdownTrigger[b-cr1hsptdgd] {
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px;
    border-radius: 8px; border: 1px solid var(--border); background: var(--panelSoft);
    color: var(--text); font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.marketDropdownTrigger:hover[b-cr1hsptdgd] { border-color: #6366f1; }
.marketDropdownMenu[b-cr1hsptdgd] {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 50; min-width: 220px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 9px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.4); padding: 4px; display: flex; flex-direction: column; gap: 2px;
}
.marketDropdownOption[b-cr1hsptdgd] {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
    padding: 9px 11px; border: none; background: transparent; color: var(--text);
    font-size: 0.85rem; font-weight: 600; text-align: left; border-radius: 6px; cursor: pointer;
}
.marketDropdownOption:hover[b-cr1hsptdgd] { background: var(--panelSoft); }
.marketDropdownOptionSel[b-cr1hsptdgd] { background: rgba(99,102,241,0.14); }
.marketPremiumTag[b-cr1hsptdgd] {
    font-size: 0.6rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
    color: #fff; background: linear-gradient(135deg, #7c3aed, #a855f7); border-radius: 999px; padding: 2px 8px;
}
.hcapLineChips[b-cr1hsptdgd] { display: inline-flex; gap: 6px; margin: 4px 0 2px; }
.hcapLineChip[b-cr1hsptdgd] {
    font-size: 0.74rem; font-weight: 700; color: var(--text); background: var(--panelSoft);
    border: 1px solid var(--border); border-radius: 6px; padding: 3px 9px;
}
.mdMarketEmpty[b-cr1hsptdgd] {
    font-size: 0.85rem; color: var(--muted); background: var(--panelSoft);
    border: 1px solid var(--border); border-radius: 10px; padding: 16px; text-align: center; margin-top: 12px;
}

/* ── Handicap line tags (above the team header, prominent) ── */
.hcapTagRow[b-cr1hsptdgd] {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 2px 0 12px;
    flex-wrap: wrap;
}
.hcapTag[b-cr1hsptdgd] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
    padding: 5px 8px 5px 14px;
    border-radius: 999px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 80%, transparent), var(--panel));
    border: 1px solid var(--border);
}
/* Line number sits in its own badge so the −1.5 / +1.5 reads instantly.
   Betting convention: the favourite gives the line (red), underdog gets it (green). */
.hcapTag strong[b-cr1hsptdgd] {
    font-size: 1rem;
    font-weight: 800;
    padding: 2px 9px;
    border-radius: 999px;
    letter-spacing: -0.01em;
}
.hcapTagGive strong[b-cr1hsptdgd] {
    color: #f87171;
    background: rgba(248, 113, 113, 0.16);
}
.hcapTagGet strong[b-cr1hsptdgd] {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.16);
}
/* /Components/Pages/MatchDetail.razor.rz.scp.css */
.matchDetailPage[b-6pgsoar1c9] {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

.matchDetailHeader[b-6pgsoar1c9] {
    text-align: center;
    margin-bottom: 24px;
    padding: 24px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radiusSm);
}

.mdLeague[b-6pgsoar1c9] {
    margin-bottom: 14px;
}

.mdLeagueName[b-6pgsoar1c9] {
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--blueLight);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mdLeagueLink[b-6pgsoar1c9] {
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--blueLight);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: opacity 0.15s;
}
.mdLeagueLink:hover[b-6pgsoar1c9] { opacity: 0.75; text-decoration: underline; }

.mdTeamLink[b-6pgsoar1c9] {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.15s;
}
.mdTeamLink:hover[b-6pgsoar1c9] { opacity: 0.8; }
.mdRed .mdTeamLink[b-6pgsoar1c9] { flex-direction: row-reverse; }

.mdBlock[b-6pgsoar1c9] {
    font-size: 0.78rem;
    color: var(--muted);
    margin-left: 8px;
}

.mdTeams[b-6pgsoar1c9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.mdTeam[b-6pgsoar1c9] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mdTeam.mdRed[b-6pgsoar1c9] {
    flex-direction: row-reverse;
}

.mdTeamLogo[b-6pgsoar1c9] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.05);
}

.mdTeamName[b-6pgsoar1c9] {
    font-weight: 900;
    font-size: 1.3rem;
    color: var(--text);
}

.mdVs[b-6pgsoar1c9] {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--muted);
    text-align: center;
}

.mdSchedule[b-6pgsoar1c9] {
    font-size: 0.78rem;
    color: var(--muted);
    margin-top: 4px;
}

.mdFormat[b-6pgsoar1c9] {
    font-size: 0.72rem;
    color: var(--muted);
    opacity: 0.7;
}

@media (max-width: 640px) {
    .mdTeams[b-6pgsoar1c9] {
        flex-direction: column;
        gap: 12px;
    }
    .mdTeam.mdRed[b-6pgsoar1c9] {
        flex-direction: row;
    }
    .mdTeamLogo[b-6pgsoar1c9] {
        width: 36px;
        height: 36px;
    }
    .mdTeamName[b-6pgsoar1c9] {
        font-size: 1rem;
    }
}

/* ── Market selector (MoneyLine / Handicap[Premium]) ── */
.mdMarketBar[b-6pgsoar1c9] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 4px 0 14px;
}

.marketDropdown[b-6pgsoar1c9] { position: relative; }

.marketDropdownTrigger[b-6pgsoar1c9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--panelSoft);
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.marketDropdownTrigger:hover[b-6pgsoar1c9] { border-color: #6366f1; }

.marketDropdownMenu[b-6pgsoar1c9] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 50;
    min-width: 220px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 9px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.4);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.marketDropdownOption[b-6pgsoar1c9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 9px 11px;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
    text-align: left;
    border-radius: 6px;
    cursor: pointer;
}

.marketDropdownOption:hover[b-6pgsoar1c9] { background: var(--panelSoft); }
.marketDropdownOptionSel[b-6pgsoar1c9] { background: rgba(99,102,241,0.14); }

.marketPremiumTag[b-6pgsoar1c9] {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    border-radius: 999px;
    padding: 2px 8px;
}

.hcapLineChips[b-6pgsoar1c9] { display: inline-flex; gap: 6px; }

.hcapLineChip[b-6pgsoar1c9] {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--text);
    background: var(--panelSoft);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 9px;
}

.mdMarketEmpty[b-6pgsoar1c9], .mdDriversNote[b-6pgsoar1c9] {
    font-size: 0.85rem;
    color: var(--muted);
    background: var(--panelSoft);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    margin-top: 12px;
}

/* ── Handicap line tags (above the team header, prominent) ── */
.hcapTagRow[b-6pgsoar1c9] {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 2px 0 12px;
    flex-wrap: wrap;
}
.hcapTag[b-6pgsoar1c9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
    padding: 5px 8px 5px 14px;
    border-radius: 999px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 80%, transparent), var(--panel));
    border: 1px solid var(--border);
}
/* Line number sits in its own badge so the −1.5 / +1.5 reads instantly.
   Betting convention: the favourite gives the line (red), underdog gets it (green). */
.hcapTag strong[b-6pgsoar1c9] {
    font-size: 1rem;
    font-weight: 800;
    padding: 2px 9px;
    border-radius: 999px;
    letter-spacing: -0.01em;
}
.hcapTagGive strong[b-6pgsoar1c9] {
    color: #f87171;
    background: rgba(248, 113, 113, 0.16);
}
.hcapTagGet strong[b-6pgsoar1c9] {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.16);
}
/* /Components/Pages/Picks.razor.rz.scp.css */
.picksPage[b-u4rgj7i42f] {
    max-width: 980px;
    margin: 40px auto 80px;
    padding: 0 20px;
}

/* ── Header ── */
.picksHeader[b-u4rgj7i42f] {
    margin-bottom: 28px;
}

.picksTitle[b-u4rgj7i42f] {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 6px 0;
    letter-spacing: -0.025em;
    background: linear-gradient(135deg, var(--text) 0%, #22c55e 50%, #16a34a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.picksSubtitle[b-u4rgj7i42f] {
    font-size: 0.95rem;
    color: var(--muted);
    margin: 0 0 20px 0;
    line-height: 1.5;
}

/* ── Controls (model filter) ───────────────────────────────────────────────
   Custom dropdown — see Picks.razor for the rationale. Wrapper carries
   `--model-color` via inline style so every nested rule can lean on it instead
   of re-declaring four nearly-identical blocks per model. */
.picksControls[b-u4rgj7i42f] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px 0;
    flex-wrap: wrap;
}

/* Sort dropdown — shares the model-filter shell so the two controls visually pair
   as a single toolbar. No per-model colour tint here (sort options aren't model-
   scoped), just the same shape and hover/open treatment. */
.picksSortFilter[b-u4rgj7i42f] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px 8px 14px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 80%, transparent), var(--panel));
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.picksSortFilter:hover[b-u4rgj7i42f] {
    border-color: color-mix(in srgb, var(--border) 50%, var(--text));
}
.picksSortFilter--open[b-u4rgj7i42f] {
    border-color: color-mix(in srgb, var(--border) 40%, var(--text));
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--text) 6%, transparent),
        0 12px 28px -16px rgba(0, 0, 0, 0.6);
}
.picksSortFilter--open .picksModelFilterChev[b-u4rgj7i42f] {
    transform: rotate(180deg);
    color: var(--text);
}

/* Market filter — identical shell to the sort filter (same base/hover/open look). */
.picksMarketFilter[b-u4rgj7i42f] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px 8px 14px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 80%, transparent), var(--panel));
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.picksMarketFilter:hover[b-u4rgj7i42f] {
    border-color: color-mix(in srgb, var(--border) 50%, var(--text));
}
.picksMarketFilter--open[b-u4rgj7i42f] {
    border-color: color-mix(in srgb, var(--border) 40%, var(--text));
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--text) 6%, transparent),
        0 12px 28px -16px rgba(0, 0, 0, 0.6);
}
.picksMarketFilter--open .picksModelFilterChev[b-u4rgj7i42f] {
    transform: rotate(180deg);
    color: var(--text);
}

/* Low-confidence checkbox — sits as a third control next to the dropdowns. Compact
   pill so it doesn't overwhelm the toolbar; click target is the whole label. */
.picksLowConfToggle[b-u4rgj7i42f] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 80%, transparent), var(--panel));
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease;
    user-select: none;
}
.picksLowConfToggle:hover[b-u4rgj7i42f] {
    border-color: color-mix(in srgb, var(--border) 50%, var(--text));
}
.picksLowConfCheckbox[b-u4rgj7i42f] {
    /* Keep native checkbox semantics (keyboard, screen readers) but skin the
       accent colour so it matches the rest of the page. */
    accent-color: #60a5fa;
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
}
.picksLowConfLabel[b-u4rgj7i42f] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.005em;
}

.picksModelFilter[b-u4rgj7i42f] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px 8px 14px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 80%, transparent), var(--panel));
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.picksModelFilter:hover[b-u4rgj7i42f] {
    border-color: color-mix(in srgb, var(--border) 50%, var(--text));
}

.picksModelFilter--open[b-u4rgj7i42f] {
    border-color: color-mix(in srgb, var(--border) 40%, var(--text));
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--text) 6%, transparent),
        0 12px 28px -16px rgba(0, 0, 0, 0.6);
}

/* Tinted backdrop when the dropdown is open — each model gets a faint wash of
   its signature colour so the trigger itself communicates which engine is
   selected at a glance. */
.picksModelFilter--consensus.picksModelFilter--open[b-u4rgj7i42f] { background: linear-gradient(180deg, color-mix(in srgb, #22d3ee 10%, var(--panel)), var(--panel)); }
.picksModelFilter--fasttree.picksModelFilter--open[b-u4rgj7i42f]  { background: linear-gradient(180deg, color-mix(in srgb, #60a5fa 10%, var(--panel)), var(--panel)); }
.picksModelFilter--lightgbm.picksModelFilter--open[b-u4rgj7i42f]  { background: linear-gradient(180deg, color-mix(in srgb, #fbbf24 10%, var(--panel)), var(--panel)); }
.picksModelFilter--pcasweep.picksModelFilter--open[b-u4rgj7i42f]  { background: linear-gradient(180deg, color-mix(in srgb, #a78bfa 10%, var(--panel)), var(--panel)); }

.picksModelFilterLabel[b-u4rgj7i42f] {
    font-size: 0.72rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    pointer-events: none;
}

.picksModelFilterTrigger[b-u4rgj7i42f] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 8px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: background 120ms ease;
}

.picksModelFilterTrigger:hover[b-u4rgj7i42f] {
    background: color-mix(in srgb, var(--text) 6%, transparent);
}

.picksModelFilterTrigger:focus-visible[b-u4rgj7i42f] {
    outline: 2px solid color-mix(in srgb, var(--text) 30%, transparent);
    outline-offset: 2px;
}

.picksModelFilterValue[b-u4rgj7i42f] {
    /* Colour comes from inline `style="color:..."` based on selected model. */
    transition: color 160ms ease;
}

.picksModelFilterChev[b-u4rgj7i42f] {
    color: var(--muted);
    transition: transform 200ms ease, color 200ms ease;
}

.picksModelFilter--open .picksModelFilterChev[b-u4rgj7i42f] {
    transform: rotate(180deg);
    color: var(--text);
}

/* Coloured dot — the trigger version pulls its colour from inline style on the
   wrapper / button. Options scope `--model-color` themselves so each row glows
   its own engine's signature colour. */
.picksModelDot[b-u4rgj7i42f] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--model-color, var(--text));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--model-color, var(--text)) 22%, transparent);
    flex-shrink: 0;
}

/* ── Dropdown menu ── */
.picksModelMenu[b-u4rgj7i42f] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    padding: 6px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow:
        0 24px 48px -20px rgba(0, 0, 0, 0.6),
        0 8px 16px -8px rgba(0, 0, 0, 0.4);
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: picksMenuFadeIn-b-u4rgj7i42f 140ms ease;
}

@keyframes picksMenuFadeIn-b-u4rgj7i42f {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.picksModelOption[b-u4rgj7i42f] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--model-color, var(--text));
    font-size: 0.92rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    width: 100%;
    transition: background 120ms ease;
}

.picksModelOption:hover[b-u4rgj7i42f] {
    background: color-mix(in srgb, var(--model-color, var(--text)) 14%, transparent);
}

.picksModelOption:focus-visible[b-u4rgj7i42f] {
    outline: none;
    background: color-mix(in srgb, var(--model-color, var(--text)) 18%, transparent);
}

.picksModelOptionActive[b-u4rgj7i42f] {
    background: color-mix(in srgb, var(--model-color, var(--text)) 18%, transparent);
}

.picksModelOptionLabel[b-u4rgj7i42f] {
    flex: 1;
}

/* BEST PERFORMER tag inside the dropdown option. Same green-pill treatment
   used on the Value Engine SERIES / GAMES tiles so the cross-surface visual
   for "this is the leader right now" stays consistent. Sole-leader only —
   ties suppress the tag (see GetBestPerformerModel()). */
.picksModelOptionBest[b-u4rgj7i42f] {
    display: inline-block;
    padding: 1px 6px;
    background: rgba(34, 197, 94, 0.18);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4;
    white-space: nowrap;
    flex-shrink: 0;
}

.picksModelOptionCheck[b-u4rgj7i42f] {
    color: var(--model-color, var(--text));
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .picksModelMenu[b-u4rgj7i42f] {
        left: 0;
        right: 0;
        min-width: 0;
    }
}

.picksMeta[b-u4rgj7i42f] {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 20px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    flex-wrap: wrap;
}

.picksMetaItem[b-u4rgj7i42f] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.picksMetaValue[b-u4rgj7i42f] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
}

.picksMetaValuePositive[b-u4rgj7i42f] {
    color: #22c55e;
}

.picksMetaLabel[b-u4rgj7i42f] {
    font-size: 0.72rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.picksMetaDot[b-u4rgj7i42f] {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--border);
}

/* ── Model performance card ──
   Per-model historical Positive-EV backtest summary. Tinted with the selected
   model's signature color (passed in via --model-color CSS custom property)
   so switching the dropdown smoothly recolors the panel. The bar at the top
   is a thin colored stripe — strong-enough cue that this whole panel is
   "about that model" without painting the whole background. */
.picksModelPerf[b-u4rgj7i42f] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 20px 16px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--model-color) 10%, transparent) 0%,
        var(--panel) 60%);
    border: 1px solid color-mix(in srgb, var(--model-color) 35%, var(--border));
    border-left: 3px solid var(--model-color);
    border-radius: 12px;
}

.picksModelPerfHeader[b-u4rgj7i42f] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.picksModelPerfHeader[b-u4rgj7i42f]::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--model-color);
    box-shadow: 0 0 8px color-mix(in srgb, var(--model-color) 55%, transparent);
}

.picksModelPerfRow[b-u4rgj7i42f] {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.picksModelPerfItem[b-u4rgj7i42f] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.picksModelPerfValue[b-u4rgj7i42f] {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.015em;
    line-height: 1.1;
}

/* ROI gets the win/loss color treatment via the parent variant classes
   so positive ROI reads green and negative reads red, regardless of which
   model is selected. Hit rate, record, and net units stay neutral. */
.picksModelPerfPos .picksModelPerfRoi[b-u4rgj7i42f] { color: #22c55e; }
.picksModelPerfNeg .picksModelPerfRoi[b-u4rgj7i42f] { color: #f87171; }

.picksModelPerfLabel[b-u4rgj7i42f] {
    font-size: 0.7rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.picksModelPerfDot[b-u4rgj7i42f] {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--model-color) 40%, var(--border));
    flex: 0 0 auto;
}

@media (max-width: 540px) {
    .picksModelPerfRow[b-u4rgj7i42f] { gap: 14px; }
    .picksModelPerfValue[b-u4rgj7i42f] { font-size: 1.1rem; }
}

/* ── Loader ── */
.picksLoader[b-u4rgj7i42f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 60px 20px;
}

.picksLoaderRing[b-u4rgj7i42f] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: #22c55e;
    border-radius: 50%;
    animation: picksSpin-b-u4rgj7i42f 0.8s linear infinite;
}

@keyframes picksSpin-b-u4rgj7i42f {
    to { transform: rotate(360deg); }
}

.picksLoaderText[b-u4rgj7i42f] {
    color: var(--muted);
    font-size: 0.9rem;
}

/* ── Empty State ── */
.picksEmpty[b-u4rgj7i42f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 60px 20px;
    color: var(--muted);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 16px;
}

.picksEmpty svg[b-u4rgj7i42f] {
    color: var(--muted);
    opacity: 0.6;
    margin-bottom: 12px;
}

.picksEmptyTitle[b-u4rgj7i42f] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 6px 0;
}

.picksEmptyText[b-u4rgj7i42f] {
    font-size: 0.9rem;
    margin: 0;
    max-width: 380px;
    line-height: 1.5;
}

/* ── Picks List ── */
.picksList[b-u4rgj7i42f] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pickRow[b-u4rgj7i42f] {
    position: relative;
}

.pickRowLink[b-u4rgj7i42f] {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto auto;
    /* row 1 = header (badge + league), row 2 = teams + stats + agreement,
       row 3 = optional insight strip (league/conf accuracy for the selected model).
       Insight strip is rendered conditionally and the grid row collapses when absent,
       so layout stays unchanged for picks that don't have stats yet. */
    grid-template-rows: auto auto auto;
    align-items: center;
    gap: 12px 20px;
    padding: 18px 22px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    overflow: hidden;
}

.pickRowLink[b-u4rgj7i42f]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #22c55e, #16a34a);
    opacity: 0.9;
}

.pickRowLink:hover[b-u4rgj7i42f] {
    transform: translateY(-1px);
    border-color: rgba(34, 197, 94, 0.4);
    box-shadow: 0 8px 24px -8px rgba(34, 197, 94, 0.25);
}

/* Top-3 picks get a gold accent on the rank chip + subtle glow */
.pickRow:nth-child(1) .pickRank[b-u4rgj7i42f],
.pickRow:nth-child(2) .pickRank[b-u4rgj7i42f],
.pickRow:nth-child(3) .pickRank[b-u4rgj7i42f] {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #451a03;
}

.pickRow:nth-child(1) .pickRowLink[b-u4rgj7i42f]::before {
    background: linear-gradient(180deg, #fbbf24, #f59e0b);
}

.pickRank[b-u4rgj7i42f] {
    grid-column: 1;
    /* Span all rows so the rank chip stays vertically centered against the entire
       row content, including the optional insight strip on row 3. */
    grid-row: 1 / -1;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text);
}

/* ── Head row: badge + league ── */
.pickHead[b-u4rgj7i42f] {
    grid-column: 2 / span 3;
    grid-row: 1;
}

.pickHeadLeft[b-u4rgj7i42f] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pickBadge[b-u4rgj7i42f] {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pickBadgeLive[b-u4rgj7i42f] {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.pickLiveDot[b-u4rgj7i42f] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ef4444;
    animation: pickLivePulse-b-u4rgj7i42f 1.4s ease-in-out infinite;
}

@keyframes pickLivePulse-b-u4rgj7i42f {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
}

.pickBadgeUpcoming[b-u4rgj7i42f] {
    background: rgba(96, 165, 250, 0.12);
    color: #60a5fa;
}

.pickLeague[b-u4rgj7i42f] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);
}

.pickFormat[b-u4rgj7i42f] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--muted);
    padding: 2px 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 5px;
}

/* Per-card market tag — distinct colour per market so a glance tells the user
   whether a row is a Series Winner or Series Handicap pick. The handicap line
   (e.g. −1.5) is appended in a slightly dimmer inline pill. */
.pickMarketTag[b-u4rgj7i42f] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 5px;
    border: 1px solid transparent;
}
.pickMarketTag--winner[b-u4rgj7i42f] {
    color: #22d3ee;
    background: rgba(34, 211, 238, 0.12);
    border-color: rgba(34, 211, 238, 0.32);
}
.pickMarketTag--handicap[b-u4rgj7i42f] {
    color: #fb923c;
    background: rgba(251, 146, 60, 0.12);
    border-color: rgba(251, 146, 60, 0.32);
}
/* Experimental markets — teal (Total Maps) and pink (Exact Score). Mirror the
   winner/handicap tag treatment with their own signature colours. */
.pickMarketTag--totalmaps[b-u4rgj7i42f] {
    color: #2dd4bf;
    background: rgba(45, 212, 191, 0.12);
    border-color: rgba(45, 212, 191, 0.32);
}
.pickMarketTag--exactscore[b-u4rgj7i42f] {
    color: #818cf8;
    background: rgba(129, 140, 248, 0.12);
    border-color: rgba(129, 140, 248, 0.32);
}
/* "Experimental" badge — subtle amber chip flagging the new markets whose EV
   isn't validated against settled history yet. Small, uppercase, muted. */
.picksMarketExpTag[b-u4rgj7i42f] {
    display: inline-flex;
    align-items: center;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 5px;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.3);
}
.pickMarketTagLine[b-u4rgj7i42f] {
    font-weight: 800;
    padding: 0 5px;
    border-radius: 4px;
    background: color-mix(in srgb, currentColor 16%, transparent);
}

/* ── Teams ── */
.pickTeams[b-u4rgj7i42f] {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.pickTeam[b-u4rgj7i42f] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}

.pickTeamChosen[b-u4rgj7i42f] {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.25);
}

.pickLogo[b-u4rgj7i42f] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: contain;
    flex-shrink: 0;
}

.pickLogoPlaceholder[b-u4rgj7i42f] {
    background: var(--bg);
    border: 1px solid var(--border);
}

.pickTeamName[b-u4rgj7i42f] {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pickChosenMark[b-u4rgj7i42f] {
    color: #22c55e;
    margin-left: auto;
    display: inline-flex;
}

.pickVs[b-u4rgj7i42f] {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: 0.1em;
    flex-shrink: 0;
}

/* ── Stats Cluster ── */
.pickStats[b-u4rgj7i42f] {
    grid-column: 3;
    grid-row: 2;
    display: flex;
    align-items: center;
    gap: 22px;
}

.pickEdgeBlock[b-u4rgj7i42f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(22, 163, 74, 0.05));
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 10px;
    min-width: 80px;
}

.pickEdgeValue[b-u4rgj7i42f] {
    font-size: 1.25rem;
    font-weight: 800;
    color: #22c55e;
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.pickEdgeLabel[b-u4rgj7i42f] {
    font-size: 0.62rem;
    font-weight: 700;
    color: #16a34a;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 2px;
}

/* Uncertain variant: model has <65% accuracy OR fewer than 3 settled predictions
   in this league. Same green→amber shift the home page MarketFairOddsTable does
   on +EV rows, so the visual language is consistent across surfaces. The pill
   is still highlighted (not muted) — the user should still read it as a
   positive-EV pick, just one whose model context is weakly trusted. */
.pickEdgeBlockUncertain[b-u4rgj7i42f] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.05));
    border-color: rgba(245, 158, 11, 0.30);
}
.pickEdgeBlockUncertain .pickEdgeValue[b-u4rgj7i42f] { color: #f59e0b; }
.pickEdgeBlockUncertain .pickEdgeLabel[b-u4rgj7i42f] { color: #d97706; }

/* Amber tint for the league % when the row is flagged low-accuracy. Mirrors
   .insightStatLow on Home but scoped to the picks-page layout so we don't
   pollute the global app.css with another !important. */
.pickInsightValueLow[b-u4rgj7i42f] {
    color: #f59e0b !important;
}

.pickPickBlock[b-u4rgj7i42f] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    min-width: 0;
}

.pickPickTeam[b-u4rgj7i42f] {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}

.pickPickOdds[b-u4rgj7i42f] {
    font-size: 0.95rem;
    font-weight: 800;
    color: #fbbf24;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.pickProbBlock[b-u4rgj7i42f] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pickProbRow[b-u4rgj7i42f] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 0.75rem;
}

.pickProbLabel[b-u4rgj7i42f] {
    color: var(--muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.65rem;
    min-width: 44px;
}

.pickProbValue[b-u4rgj7i42f] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pickProbModel[b-u4rgj7i42f] {
    color: #22d3ee;
}

.pickProbMarket[b-u4rgj7i42f] {
    color: var(--muted);
}

/* ── Agreement chips ── */
.pickAgreement[b-u4rgj7i42f] {
    grid-column: 4;
    grid-row: 2;
    display: flex;
    gap: 6px;
}

.pickModelChip[b-u4rgj7i42f] {
    font-size: 0.65rem;
    font-weight: 800;
    padding: 5px 8px;
    border-radius: 6px;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
    font-family: ui-monospace, SFMono-Regular, monospace;
}

.pickModelChipFt[b-u4rgj7i42f] {
    background: rgba(96, 165, 250, 0.16);
    color: #60a5fa;
    border-color: rgba(96, 165, 250, 0.35);
}

.pickModelChipLg[b-u4rgj7i42f] {
    background: rgba(251, 191, 36, 0.16);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.35);
}

.pickModelChipPc[b-u4rgj7i42f] {
    background: rgba(167, 139, 250, 0.16);
    color: #a78bfa;
    border-color: rgba(167, 139, 250, 0.35);
}

.pickModelChipMuted[b-u4rgj7i42f] {
    background: var(--bg);
    color: var(--muted);
    border-color: var(--border);
    opacity: 0.5;
}

/* ── Disclaimer ── */
.picksDisclaimer[b-u4rgj7i42f] {
    margin-top: 24px;
    padding: 14px 18px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.5;
}

/* ── Per-pick insight strip ─────────────────────────────────────────────
   Compact row showing how the selected model has performed in this match's
   league + at this prediction's confidence bucket. Mirrors the insight cards
   under upcoming/live matches on Home; tinted with the model's signature color
   via the --model-color CSS custom property set inline on the wrapper. */
.pickInsights[b-u4rgj7i42f] {
    grid-column: 2 / span 3;
    grid-row: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 12px;
    margin-top: 2px;
    border-top: 1px dashed color-mix(in srgb, var(--border) 70%, transparent);
}

.pickInsightStat[b-u4rgj7i42f] {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 12px 6px 10px;
    background: color-mix(in srgb, var(--model-color, var(--muted)) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--model-color, var(--muted)) 22%, transparent);
    border-left: 2px solid var(--model-color, var(--muted));
    border-radius: 8px;
    min-width: 0;
}

.pickInsightLabel[b-u4rgj7i42f] {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

.pickInsightValue[b-u4rgj7i42f] {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--model-color, var(--text));
    letter-spacing: -0.01em;
}

.pickInsightFrac[b-u4rgj7i42f] {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--mutedFaint);
    font-variant-numeric: tabular-nums;
}

/* ── Responsive ── */
@media (max-width: 880px) {
    .pickRowLink[b-u4rgj7i42f] {
        grid-template-columns: 36px 1fr;
        grid-template-rows: auto auto auto auto auto;
        gap: 10px 14px;
        padding: 16px;
    }

    .pickRank[b-u4rgj7i42f] {
        grid-row: 1 / span 5;
        width: 32px;
        height: 32px;
    }

    .pickHead[b-u4rgj7i42f] {
        grid-column: 2;
        grid-row: 1;
    }

    .pickTeams[b-u4rgj7i42f] {
        grid-column: 2;
        grid-row: 2;
        gap: 8px;
    }

    .pickStats[b-u4rgj7i42f] {
        grid-column: 2;
        grid-row: 3;
        gap: 14px;
        flex-wrap: wrap;
    }

    .pickAgreement[b-u4rgj7i42f] {
        grid-column: 2;
        grid-row: 4;
    }

    .pickInsights[b-u4rgj7i42f] {
        grid-column: 2;
        grid-row: 5;
        padding-top: 10px;
    }

    .pickInsightStat[b-u4rgj7i42f] {
        padding: 5px 10px 5px 9px;
    }

    .pickInsightLabel[b-u4rgj7i42f] {
        font-size: 0.58rem;
        max-width: 180px;
    }

    .pickInsightValue[b-u4rgj7i42f] {
        font-size: 0.85rem;
    }

    .pickTeamName[b-u4rgj7i42f] {
        font-size: 0.85rem;
    }

    .pickEdgeValue[b-u4rgj7i42f] {
        font-size: 1.1rem;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   PICKS REDESIGN — score-ranked (series × market) board
   ════════════════════════════════════════════════════════════════════════════ */

/* track record band */
.pkTrack[b-u4rgj7i42f] {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
    padding: 13px 18px; margin: 0 0 18px;
}
.pkTrackHdr[b-u4rgj7i42f] { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: #22d3ee; font-weight: 700; line-height: 1.2; }
.pkTrackItem[b-u4rgj7i42f] { display: flex; flex-direction: column; gap: 1px; }
.pkTrackVal[b-u4rgj7i42f] { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.pkTrackVal.pos[b-u4rgj7i42f] { color: #4ade80; } .pkTrackVal.neg[b-u4rgj7i42f] { color: #f87171; }
.pkTrackLbl[b-u4rgj7i42f] { font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mutedFaint); font-weight: 700; }
.pkTrackDot[b-u4rgj7i42f] { width: 4px; height: 4px; border-radius: 50%; background: var(--border); }
.pkTrackNote[b-u4rgj7i42f] { margin-left: auto; font-size: 0.7rem; color: var(--mutedFaint); }

/* toggles */
.pkControls[b-u4rgj7i42f] { display: flex; flex-direction: column; gap: 11px; margin: 0 0 4px; }
.pkCtrlRow[b-u4rgj7i42f] { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pkCtrlLabel[b-u4rgj7i42f] { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mutedFaint); font-weight: 700; min-width: 56px; }
.pkChip[b-u4rgj7i42f] {
    display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 9px;
    border: 1px solid var(--border); background: var(--panel); color: var(--muted);
    font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: 0.12s; font-family: inherit;
}
.pkChip:hover[b-u4rgj7i42f] { border-color: var(--muted); color: var(--text); }
.pkChipDot[b-u4rgj7i42f] { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--mutedFaint)); }
.pkChipOn[b-u4rgj7i42f] { color: var(--text); border-color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.pkChipPending[b-u4rgj7i42f] { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--mutedFaint); border: 1px solid var(--border); border-radius: 4px; padding: 1px 4px; margin-left: 2px; }
.pkToggle[b-u4rgj7i42f] { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.8rem; color: var(--muted); user-select: none; }
.pkToggle input[b-u4rgj7i42f] { accent-color: #60a5fa; cursor: pointer; }
.pkHint[b-u4rgj7i42f] { font-size: 0.7rem; color: var(--mutedFaint); }

/* list + card */
.pkList[b-u4rgj7i42f] { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }


 





/* gauge — its own right-hand column (never overlaps the pick content) */





 

 


/* header */





@keyframes pkPulse-b-u4rgj7i42f { 50% { opacity: 0.35; } }








/* body */


















 

/* breakdown strip */


 


 .pkSegVal.pkSegMuted[b-u4rgj7i42f] { color: var(--mutedFaint); }
.pkFrac[b-u4rgj7i42f] { color: var(--mutedFaint); font-weight: 600; font-size: 0.7rem; }



.pkMcFt[b-u4rgj7i42f] { background: color-mix(in srgb, #60a5fa 18%, transparent); color: #60a5fa; }
.pkMcLg[b-u4rgj7i42f] { background: color-mix(in srgb, #fbbf24 18%, transparent); color: #fbbf24; }
.pkMcPc[b-u4rgj7i42f] { background: color-mix(in srgb, #a78bfa 18%, transparent); color: #a78bfa; }




.pkHiddenCount[b-u4rgj7i42f] { font-size: 0.72rem; color: var(--mutedFaint); margin-top: 14px; text-align: center; }



/* ── per-model track-record cards + market dropdown ── */
.pkModelHead[b-u4rgj7i42f] { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; flex-wrap: wrap; }
.pkModelHeadTitle[b-u4rgj7i42f] { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mutedFaint); font-weight: 700; }
.pkModelHeadNote[b-u4rgj7i42f] { margin-left: auto; font-size: 0.7rem; color: var(--mutedFaint); }

.pkMarketDropdown[b-u4rgj7i42f] { position: relative; }
.pkMarketTrigger[b-u4rgj7i42f] { display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: 0.78rem; font-weight: 700;
    cursor: pointer; font-family: inherit; }
.pkMarketTrigger:hover[b-u4rgj7i42f] { border-color: var(--muted); }
.pkMarketDropdownOpen .pkMarketTrigger svg[b-u4rgj7i42f] { transform: rotate(180deg); }
.pkMarketMenu[b-u4rgj7i42f] { position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; min-width: 160px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 9px; padding: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35); display: flex; flex-direction: column; }
.pkMarketOption[b-u4rgj7i42f] { text-align: left; background: none; border: none; color: var(--muted); font-size: 0.8rem; font-weight: 600;
    padding: 7px 10px; border-radius: 6px; cursor: pointer; font-family: inherit; }
.pkMarketOption:hover[b-u4rgj7i42f] { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
.pkMarketOptionActive[b-u4rgj7i42f] { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }

.pkModelCards[b-u4rgj7i42f] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 22px; }
.pkModelCard[b-u4rgj7i42f] { position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: 11px; padding: 12px 14px;
    border-left: 3px solid var(--c); }
.pkModelCardBest[b-u4rgj7i42f] { border-color: color-mix(in srgb, #facc15 45%, var(--border)); border-left-color: var(--c);
    box-shadow: 0 0 0 1px color-mix(in srgb, #facc15 20%, transparent); }
.pkBestPerfTag[b-u4rgj7i42f] { position: absolute; top: -9px; right: 10px; display: inline-flex; align-items: center; gap: 4px;
    padding: 2.5px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, #facc15 55%, transparent);
    background: color-mix(in srgb, #facc15 16%, var(--panel)); color: #facc15;
    font-size: 0.56rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    white-space: nowrap; cursor: help; }
.pkBestPerfTag svg[b-u4rgj7i42f] { flex: 0 0 auto; }
.pkModelCardName[b-u4rgj7i42f] { display: inline-flex; align-items: center; gap: 7px; font-size: 0.82rem; font-weight: 800; color: var(--text); }
.pkModelCardDot[b-u4rgj7i42f] { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.pkModelCardStats[b-u4rgj7i42f] { display: flex; gap: 14px; margin-top: 9px; }
.pkModelStat[b-u4rgj7i42f] { display: flex; flex-direction: column; gap: 1px; }
.pkModelStatVal[b-u4rgj7i42f] { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.pkModelStatVal.pos[b-u4rgj7i42f] { color: #4ade80; } .pkModelStatVal.neg[b-u4rgj7i42f] { color: #f87171; }
.pkModelStatLbl[b-u4rgj7i42f] { font-size: 0.55rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mutedFaint); font-weight: 700; }
/* The ROI stat's "?" uses the shared TooltipPopover (global .tooltipPopover styles). */
.pkModelCardEmpty[b-u4rgj7i42f] { display: block; margin-top: 9px; font-size: 0.74rem; color: var(--mutedFaint); }

/* ── per-model league accuracy in the pick-card strip ── */
.pkSegAcc[b-u4rgj7i42f] { padding-right: 0; }
.pkAccList[b-u4rgj7i42f] { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pkAccItem[b-u4rgj7i42f] { display: inline-flex; align-items: center; gap: 4px; font-size: 0.74rem; font-weight: 700; color: var(--mutedFaint); }
.pkAccItem b[b-u4rgj7i42f] { color: var(--text); font-weight: 800; }
.pkAccItem b.pkSegBad[b-u4rgj7i42f] { color: #fbbf24; }
.pkAccDot[b-u4rgj7i42f] { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }

@media (max-width: 640px) {
    .pkModelCards[b-u4rgj7i42f] { grid-template-columns: repeat(2, 1fr); }
    .pkModelHeadNote[b-u4rgj7i42f] { margin-left: 0; width: 100%; }
}

/* ── strip v2: top row (best model + agreement) over a per-model grid ── */




/* agreement chips now colour from inline --c (incl. Consensus) */













/* ── mobile hardening ── */
@media (max-width: 700px) {
    .picksPage[b-u4rgj7i42f] { padding: 0 14px; }
    .pkModelCards[b-u4rgj7i42f] { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .pkModelCard[b-u4rgj7i42f] { padding: 11px 12px; }
    .pkModelCardStats[b-u4rgj7i42f] { gap: 10px; flex-wrap: wrap; }
    .pkModelStatVal[b-u4rgj7i42f] { font-size: 0.95rem; }
    .pkModelHead[b-u4rgj7i42f] { gap: 8px; }
    .pkModelHeadNote[b-u4rgj7i42f] { margin-left: 0; width: 100%; }
    
    
    
    
    
}
@media (max-width: 420px) {
    .pkModelCards[b-u4rgj7i42f] { grid-template-columns: 1fr; }
    
    
}

/* ── crop fix: let the matchup shrink so team names ellipsis instead of pushing
   the right team + gauge past the card's overflow:hidden edge ── */




/* gauge svg fills its container and scales via viewBox — never spills past a shrunk box */


/* mobile: stack the card vertically so the matchup gets the FULL width (names no longer
   collapse to "H…") and the score sits on its own right-aligned row (never cropped). */


/* mobile: stack the two teams vertically so each gets the full card width and the
   name shows in full (side-by-side leaves too little room once logos + VS fit). */


/* ── score gauge hover tooltip (breakdown) ──
   The card was overflow:hidden (to clip the ::before accent bar); switch to overflow:visible
   so the tooltip can extend past the card, and re-create the accent as an inset shadow that
   respects the border-radius. Raise the hovered card so its tooltip paints over later cards. */






















/* per-model grid coloring: confidence green (backs pick) / red (against), best accuracy green */




/* score below 50 → red gauge + red card accent */



/* only 1 of N models agree → red (2-3 stay amber via pkSplitTag, all-agree green via pkAgreeTag) */


/* navigation loading overlay (shown instantly on a pick click) */
.pkNavOverlay[b-u4rgj7i42f] { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--bg) 68%, transparent); backdrop-filter: blur(2px); }
.pkNavRing[b-u4rgj7i42f] { width: 46px; height: 46px; border-radius: 50%;
    border: 4px solid color-mix(in srgb, var(--text) 14%, transparent); border-top-color: #4ade80;
    animation: pkNavSpin-b-u4rgj7i42f 0.8s linear infinite; }
@keyframes pkNavSpin-b-u4rgj7i42f { to { transform: rotate(360deg); } }

/* ── Open / Settled tabs ─────────────────────────────────────────────── */
.pkTabs[b-u4rgj7i42f] { display: flex; gap: 6px; margin-top: 14px; }
.pkTab[b-u4rgj7i42f] { padding: 7px 16px; border-radius: 8px 8px 0 0; border: 1px solid var(--border); border-bottom: none;
    background: color-mix(in srgb, var(--panel) 60%, transparent); color: var(--muted);
    font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.pkTab:hover[b-u4rgj7i42f] { color: var(--text); }
.pkTabActive[b-u4rgj7i42f] { background: var(--panel); color: var(--text); border-color: color-mix(in srgb, var(--text) 25%, var(--border)); }

/* ── Settled picks list ──────────────────────────────────────────────── */
.pkSettledList[b-u4rgj7i42f] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pkSettledRow[b-u4rgj7i42f] { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px;
    background: var(--panel); border: 1px solid var(--border); cursor: pointer; }
.pkSettledRow:hover[b-u4rgj7i42f] { border-color: color-mix(in srgb, var(--text) 25%, var(--border)); }
.pkSettledWin[b-u4rgj7i42f] { border-left: 3px solid #34d399; }
.pkSettledLoss[b-u4rgj7i42f] { border-left: 3px solid #ef4444; }
.pkSettledResult[b-u4rgj7i42f] { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; padding: 3px 8px;
    border-radius: 4px; flex-shrink: 0; min-width: 44px; text-align: center; }
.pkSettledWin .pkSettledResult[b-u4rgj7i42f] { color: #34d399; background: rgba(52, 211, 153, 0.12); }
.pkSettledLoss .pkSettledResult[b-u4rgj7i42f] { color: #ef4444; background: rgba(239, 68, 68, 0.12); }
.pkSettledMain[b-u4rgj7i42f] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pkSettledMatch[b-u4rgj7i42f] { font-size: 0.85rem; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pkSettledVs[b-u4rgj7i42f] { color: var(--muted); font-weight: 500; font-size: 0.72rem; }
.pkSettledMeta[b-u4rgj7i42f] { font-size: 0.68rem; color: var(--muted); }
.pkSettledPick[b-u4rgj7i42f] { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.pkSettledSel[b-u4rgj7i42f] { font-size: 0.78rem; font-weight: 700; color: var(--text); }
.pkSettledModel[b-u4rgj7i42f] { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c, var(--muted)); }
.pkSettledOdds[b-u4rgj7i42f] { font-size: 0.8rem; font-weight: 700; color: var(--muted); flex-shrink: 0; min-width: 42px; text-align: right; }
.pkSettledNet[b-u4rgj7i42f] { font-size: 0.8rem; font-weight: 800; flex-shrink: 0; min-width: 56px; text-align: right; }
.pkSettledNet.pos[b-u4rgj7i42f] { color: #34d399; }
.pkSettledNet.neg[b-u4rgj7i42f] { color: #ef4444; }

/* ── Free-tier teaser ────────────────────────────────────────────────── */
.pkTeaser[b-u4rgj7i42f] { display: flex; flex-direction: column; gap: 10px; }
.pkTeaserProofLabel[b-u4rgj7i42f], .pkTeaserLiveLabel[b-u4rgj7i42f] { font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--muted); margin-top: 6px; }
.pkTeaserProofRow[b-u4rgj7i42f] { cursor: default; }
.pkTeaserMasked[b-u4rgj7i42f] { position: relative; display: flex; flex-direction: column; gap: 8px; padding-bottom: 4px; }
.pkTeaserMaskRow[b-u4rgj7i42f] { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 10px;
    background: var(--panel); border: 1px solid var(--border); }
.pkTeaserMaskChip[b-u4rgj7i42f] { width: 44px; height: 18px; border-radius: 4px; background: color-mix(in srgb, var(--muted) 22%, transparent); flex-shrink: 0; }
.pkTeaserMaskBar[b-u4rgj7i42f] { height: 12px; border-radius: 6px; background: color-mix(in srgb, var(--muted) 18%, transparent); }
.pkTeaserMaskShort[b-u4rgj7i42f] { margin-left: auto; }
.pkTeaserOverlay[b-u4rgj7i42f] { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; border-radius: 10px; text-align: center; padding: 16px;
    background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(3px); color: var(--muted); font-size: 0.8rem; }
.pkTeaserCta[b-u4rgj7i42f] { padding: 9px 22px; border-radius: 8px; border: none; cursor: pointer; font-weight: 800; font-size: 0.85rem;
    color: #fff; background: linear-gradient(135deg, #7c3aed, #a78bfa); }
.pkTeaserCta:hover[b-u4rgj7i42f] { filter: brightness(1.1); }

@media (max-width: 640px) {
    .pkSettledOdds[b-u4rgj7i42f] { display: none; }
    .pkSettledMatch[b-u4rgj7i42f] { font-size: 0.78rem; }
}

/* ── Settled: grouped per-match cards ────────────────────────────────── */
.pkSettledGroups[b-u4rgj7i42f] { display: flex; flex-direction: column; gap: 12px; }
.pkSettledCard[b-u4rgj7i42f] { border: 1px solid var(--border); border-radius: 12px; background: var(--panel); overflow: hidden; }
.pkSettledCardHead[b-u4rgj7i42f] { display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left;
    padding: 10px 14px; border: none; cursor: pointer;
    background: color-mix(in srgb, var(--muted) 7%, transparent); }
.pkSettledCardHead:hover .pkSettledMatch[b-u4rgj7i42f] { text-decoration: underline; }
.pkSettledBet[b-u4rgj7i42f] { display: flex; align-items: center; gap: 12px; padding: 9px 14px;
    border-top: 1px solid var(--border); cursor: pointer; }
.pkSettledBet:hover[b-u4rgj7i42f] { background: color-mix(in srgb, var(--muted) 6%, transparent); }
.pkSettledBet.pkSettledWin[b-u4rgj7i42f] { box-shadow: inset 3px 0 0 #34d399; border-left: none; }
.pkSettledBet.pkSettledLoss[b-u4rgj7i42f] { box-shadow: inset 3px 0 0 #ef4444; border-left: none; }
.pkSettledBetLabel[b-u4rgj7i42f] { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
    font-size: 0.8rem; font-weight: 700; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pkSettledGameTag[b-u4rgj7i42f] { font-size: 0.62rem; font-weight: 800; color: var(--muted);
    background: color-mix(in srgb, var(--muted) 15%, transparent);
    padding: 2px 6px; border-radius: 4px; flex-shrink: 0; }
.pkSettledModels[b-u4rgj7i42f] { display: flex; gap: 4px; flex-shrink: 0; }
.pkSettledModelChip[b-u4rgj7i42f] { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.03em;
    padding: 2px 6px; border-radius: 4px; color: var(--c, var(--muted));
    background: color-mix(in srgb, var(--c, var(--muted)) 14%, transparent); }
.pkSettledModelChip.chipLoss[b-u4rgj7i42f] { opacity: 0.55; }

@media (max-width: 640px) {
    .pkSettledModels[b-u4rgj7i42f] { display: none; }
}

/* Team side chip with logo — settled card heads + the teaser proof row. The
   chosen side on the proof row gets the green highlight treatment. */
.pkSettledMatch[b-u4rgj7i42f] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pkTeamSide[b-u4rgj7i42f] { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.pkTeamLogo[b-u4rgj7i42f] { width: 20px; height: 20px; object-fit: contain; border-radius: 4px; flex-shrink: 0; }
.pkTeamSideChosen[b-u4rgj7i42f] { padding: 2px 8px; border-radius: 6px;
    background: rgba(52, 211, 153, 0.10); border: 1px solid rgba(52, 211, 153, 0.32); }
/* /Components/Pages/PlayerPage.razor.rz.scp.css */
/* /player/{teamId}-{slug} — server-rendered player hub (SEO). Shell chrome only; the
   body's data styling travels with the shared <PlayerDetailView/> component. */

.teamPage[b-5qjy6snk5s] {
    max-width: 1200px;
    margin: 0 auto 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.teamPageFooter[b-5qjy6snk5s] {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    padding: 0.5rem 0;
}

.teamPageFooterLink[b-5qjy6snk5s] {
    color: var(--accent, #60a5fa);
    font-weight: 600;
    text-decoration: none;
}

.teamPageFooterLink:hover[b-5qjy6snk5s] {
    text-decoration: underline;
}

/* ── Not found ────────────────────────────────────── */

.teamPageMissing[b-5qjy6snk5s] {
    max-width: 600px;
    margin: 4rem auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.teamPageMissingTitle[b-5qjy6snk5s] {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text);
    margin: 0;
}

.teamPageMissingDesc[b-5qjy6snk5s] {
    color: var(--muted);
    margin: 0;
}

.teamPageMissingLink[b-5qjy6snk5s] {
    color: var(--accent, #60a5fa);
    font-weight: 600;
    text-decoration: none;
}

.teamPageMissingLink:hover[b-5qjy6snk5s] {
    text-decoration: underline;
}
/* /Components/Pages/PredictDraft.razor.rz.scp.css */
/* Styles for PredictDraft page */

.pageHeader[b-qa4wvcklju] { margin-bottom: 18px; text-align: center; }
.page-title[b-qa4wvcklju] { margin: 0; font-weight: 900; color: var(--text); font-size: 2.3rem; letter-spacing: -0.02em; }
.page-subtitle[b-qa4wvcklju] { margin: 6px 0 0 0; color: var(--muted); font-size: 1rem; }

/* Match-detail-style header for results */
.matchDetailPage[b-qa4wvcklju] {
    max-width: 900px;
    margin: 24px auto 0 auto;
}
.matchDetailHeader[b-qa4wvcklju] {
    text-align: center;
    margin-bottom: 24px;
    padding: 24px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radiusSm);
}
.mdTeams[b-qa4wvcklju] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}
.mdTeam[b-qa4wvcklju] {
    display: flex;
    align-items: center;
    gap: 10px;
}
.mdTeam.mdRed[b-qa4wvcklju] { flex-direction: row-reverse; }
.mdTeamLink[b-qa4wvcklju] {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.15s;
}
.mdTeamLink:hover[b-qa4wvcklju] { opacity: 0.8; }
.mdRed .mdTeamLink[b-qa4wvcklju] { flex-direction: row-reverse; }
.mdTeamLogo[b-qa4wvcklju] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.05);
}
.mdTeamName[b-qa4wvcklju] {
    font-weight: 900;
    font-size: 1.3rem;
    color: var(--text);
}
.mdVs[b-qa4wvcklju] {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--muted);
    text-align: center;
}
@media (max-width: 640px) {
    .mdTeams[b-qa4wvcklju] { flex-direction: column; gap: 12px; }
    .mdTeam.mdRed[b-qa4wvcklju] { flex-direction: row; }
    .mdTeamLogo[b-qa4wvcklju] { width: 36px; height: 36px; }
    .mdTeamName[b-qa4wvcklju] { font-size: 1rem; }
}

/* Model selector */
.modelSelector[b-qa4wvcklju] {
    margin: 0 auto 20px auto;
    max-width: 900px;
}
.modelLabel[b-qa4wvcklju] {
    font-weight: 700;
    margin: 0 0 10px 0;
    color: var(--text);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.modelCards[b-qa4wvcklju] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.modelCard[b-qa4wvcklju] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 10px;
    border: 2px solid var(--border);
    background: var(--panel);
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    font-size: 0.85rem;
    white-space: nowrap;
}
.modelCard:hover:not(.locked)[b-qa4wvcklju] {
    border-color: var(--blue);
    background: rgba(59, 130, 246, 0.1);
}
.modelCard.selected[b-qa4wvcklju] {
    border-color: var(--blue);
    background: rgba(59, 130, 246, 0.1);
    box-shadow: 0 0 0 1px var(--blue);
}
.modelCard.locked[b-qa4wvcklju] {
    opacity: 0.65;
    cursor: not-allowed;
    border-style: dashed;
}
.modelCardName[b-qa4wvcklju] {
    font-weight: 600;
    color: var(--text);
}
.modelCardTag[b-qa4wvcklju] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.tag-premium[b-qa4wvcklju] {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff;
}
.tag-niche[b-qa4wvcklju] {
    background: linear-gradient(135deg, #b45309, #d97706, #f59e0b);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.tag-locked[b-qa4wvcklju] {
    background: linear-gradient(135deg, #6b21a8, #9333ea);
    color: #fff;
    padding: 3px 10px;
}

/* Card */
.card.fullWidth[b-qa4wvcklju] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
    flex: 1;
    min-width: 0;
    max-width: 900px;
    margin: 0 auto;
}
.cardHeader[b-qa4wvcklju] { margin-bottom: 18px; }

/* Page-level layout: card left, player rankings right */
.draftPageLayout[b-qa4wvcklju] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.cardTitle[b-qa4wvcklju] { font-weight: 900; color: var(--text); font-size: 1.25rem; }
.cardHint[b-qa4wvcklju] { margin-top: 4px; color: var(--muted); font-size: 0.92rem; }

/* Form */
.formRow[b-qa4wvcklju] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 12px;
}
@media (max-width: 600px) {
    .formRow[b-qa4wvcklju] { grid-template-columns: 1fr; }
}
.field[b-qa4wvcklju] { display: flex; flex-direction: column; gap: 6px; }

.selectWithLogo[b-qa4wvcklju] {
    display: flex;
    align-items: center;
    gap: 10px;
}
.selectWithLogo .select[b-qa4wvcklju] {
    flex: 1;
}
.selectLogo[b-qa4wvcklju] {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    padding: 3px;
    flex-shrink: 0;
}
.label[b-qa4wvcklju] { font-weight: 900; color: var(--text); font-size: 0.95rem; }
.label.blue[b-qa4wvcklju] { color: var(--blue); }
.label.red[b-qa4wvcklju] { color: var(--red); }

.select[b-qa4wvcklju] {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 11px 42px 11px 12px;
    background: var(--panel);
    color: var(--text);
    box-shadow: 0 1px 0 rgba(0,0,0,.1);
    font-size: 0.98rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23e2e8f0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px 18px;
}
.select:focus[b-qa4wvcklju] { outline: none; border-color: rgba(37, 99, 235, .55); box-shadow: 0 0 0 4px rgba(37, 99, 235, .14); }
.select:disabled[b-qa4wvcklju] { background-color: var(--panelDeep); color: var(--mutedFaint); }
select option:disabled[b-qa4wvcklju] { color: var(--mutedFaint); }

.buttonRow[b-qa4wvcklju] {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.buttonRow .btn[b-qa4wvcklju] { flex: 1; min-width: 140px; }

.btn[b-qa4wvcklju] {
    border-radius: 12px;
    padding: 12px 14px;
    font-weight: 950;
    border: 1px solid var(--border);
    cursor: pointer;
    user-select: none;
    letter-spacing: 0.2px;
    box-shadow: var(--shadowSoft);
    background: var(--panel);
    color: var(--text);
    text-align: center;
}
.btn:disabled[b-qa4wvcklju] { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.btn.primary[b-qa4wvcklju] { background: linear-gradient(180deg, rgba(37,99,235,1), rgba(29,78,216,1)); color: #fff; border-color: transparent; }
.btn.dark[b-qa4wvcklju] { background: linear-gradient(180deg, #111827, #0b1220); color: #fff; border-color: transparent; width: 100%; margin-top: 16px; }

.helper[b-qa4wvcklju] { margin-top: 10px; color: var(--muted); font-size: 0.92rem; }
.callout[b-qa4wvcklju] { border: 1px solid var(--border); background: var(--panel); border-radius: 12px; padding: 10px 12px; }
.callout.muted[b-qa4wvcklju] { color: var(--muted); background: var(--panelSoft); border-color: var(--borderSoft); }
.callout.error[b-qa4wvcklju] { border-color: rgba(220, 38, 38, .35); background: rgba(220, 38, 38, .08); color: #7f1d1d; }
.mt-12[b-qa4wvcklju] { margin-top: 12px; }

/* Picks */
.picksGrid[b-qa4wvcklju] { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
@media (max-width: 720px) { .picksGrid[b-qa4wvcklju] { grid-template-columns: 1fr; } }
.picksCol[b-qa4wvcklju] { border: 1px solid var(--border); border-radius: var(--radiusSm); padding: 14px; background: var(--panelSoft); }
.blueBorder[b-qa4wvcklju] { border-color: rgba(37, 99, 235, .35); }
.redBorder[b-qa4wvcklju] { border-color: rgba(220, 38, 38, .35); }
.picksTitle[b-qa4wvcklju] { font-weight: 950; margin-bottom: 10px; font-size: 1rem; color: var(--text); }
.picksTitle.blue[b-qa4wvcklju] { color: var(--blue); }
.picksTitle.red[b-qa4wvcklju] { color: var(--red); }
.pickRow[b-qa4wvcklju] { display: grid; grid-template-columns: 90px 30px 1fr; gap: 8px; align-items: center; margin-bottom: 10px; }
.role[b-qa4wvcklju] { color: var(--muted); font-weight: 900; letter-spacing: 0.2px; }
.pickChampIcon[b-qa4wvcklju] { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; border: 1px solid var(--border); background: rgba(255,255,255,0.05); }
.pickChampPlaceholder[b-qa4wvcklju] { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border); background: rgba(255,255,255,0.03); }

/* Results */
.result[b-qa4wvcklju] { margin-top: 20px; border-radius: var(--radiusSm); border: 1px solid var(--border); background: var(--panel); padding: 20px; box-shadow: var(--shadowSoft); }
.result.winner-blue[b-qa4wvcklju] { border-color: rgba(37,99,235,.45); box-shadow: 0 0 0 3px rgba(37,99,235,.10), var(--shadowSoft); }
.result.winner-red[b-qa4wvcklju] { border-color: rgba(220,38,38,.45); box-shadow: 0 0 0 3px rgba(220,38,38,.10), var(--shadowSoft); }

.resultHeader[b-qa4wvcklju] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.resultWinnerBadge[b-qa4wvcklju] {
    font-weight: 900;
    font-size: 0.82rem;
    padding: 5px 14px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.resultWinnerBadge.badge-blue[b-qa4wvcklju] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.1));
    color: var(--blueLight);
    border: 1px solid rgba(59, 130, 246, 0.3);
}
.resultWinnerBadge.badge-red[b-qa4wvcklju] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.1));
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.resultConfBadge[b-qa4wvcklju] {
    font-weight: 800;
    font-size: 0.68rem;
    padding: 4px 10px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.resultConfBadge.conf-high[b-qa4wvcklju] {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.25);
}
.resultConfBadge.conf-med[b-qa4wvcklju] {
    background: rgba(234, 179, 8, 0.12);
    color: #fbbf24;
    border: 1px solid rgba(234, 179, 8, 0.25);
}
.resultConfBadge.conf-low[b-qa4wvcklju] {
    background: rgba(148, 163, 184, 0.1);
    color: var(--muted);
    border: 1px solid rgba(148, 163, 184, 0.15);
}

.bars[b-qa4wvcklju] { display: grid; gap: 10px; }
.barRow[b-qa4wvcklju] { display: grid; grid-template-columns: 1.5fr 3fr 80px; gap: 10px; align-items: center; }
.teamName[b-qa4wvcklju] { font-weight: 900; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barWrap[b-qa4wvcklju] { height: 12px; background: rgba(148, 163, 184, 0.1); border-radius: 999px; overflow: hidden; }
.blueRow .bar[b-qa4wvcklju] { height: 100%; background: linear-gradient(90deg, var(--blue), var(--blueLight)); border-radius: 999px; }
.redRow .bar[b-qa4wvcklju] { height: 100%; background: linear-gradient(90deg, var(--red), #f87171); border-radius: 999px; }
.pct[b-qa4wvcklju] { text-align: right; font-weight: 950; color: var(--text); font-variant-numeric: tabular-nums; }

.resultFooter[b-qa4wvcklju] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--borderSoft);
}

.resultOddsChip[b-qa4wvcklju] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: var(--panelSoft);
    border: 1px solid var(--borderSoft);
    border-radius: 8px;
}

.resultStatChip[b-qa4wvcklju] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: var(--panelSoft);
    border: 1px solid var(--borderSoft);
    border-radius: 8px;
}

.rdLabel[b-qa4wvcklju] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    white-space: nowrap;
}

.rdValue[b-qa4wvcklju] {
    font-size: 0.95rem;
    font-weight: 900;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.oddsSep[b-qa4wvcklju] { color: var(--muted); font-weight: 400; margin: 0 1px; }
.rdBlue[b-qa4wvcklju] { color: var(--blue); }
.rdRed[b-qa4wvcklju] { color: var(--red); }

/* H2H & Streak Section */
.formSection[b-qa4wvcklju] { margin-top: 20px; padding: 16px; background: linear-gradient(135deg, rgba(37,99,235,.04), rgba(220,38,38,.04)); border: 1px solid var(--borderSoft); border-radius: var(--radiusSm); }
.formSectionTitle[b-qa4wvcklju] { font-weight: 900; color: var(--text); font-size: 1.05rem; margin-bottom: 8px; }

.h2hGrid[b-qa4wvcklju] { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; }
@media (max-width: 600px) { .h2hGrid[b-qa4wvcklju] { grid-template-columns: 1fr; } .h2hVs[b-qa4wvcklju] { text-align: center; } }

.h2hCard[b-qa4wvcklju] { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radiusSm); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.h2hCard.blue-accent[b-qa4wvcklju] { border-top: 3px solid var(--blue); }
.h2hCard.red-accent[b-qa4wvcklju] { border-top: 3px solid var(--red); }
.h2hTeamName[b-qa4wvcklju] { font-weight: 900; font-size: 1rem; color: var(--text); text-align: center; }
.h2hVs[b-qa4wvcklju] { display: flex; align-items: center; justify-content: center; font-weight: 950; color: var(--muted); font-size: 1.1rem; letter-spacing: 0.1em; }

.streakRow[b-qa4wvcklju] { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--borderSoft); }
.streakRow:last-child[b-qa4wvcklju] { border-bottom: none; }
.streakLabel[b-qa4wvcklju] { color: var(--muted); font-size: 0.9rem; font-weight: 600; }
.streakValue[b-qa4wvcklju] { font-weight: 800; font-size: 0.95rem; color: var(--text); }
.streak-win[b-qa4wvcklju] { color: #16a34a; }
.streak-lose[b-qa4wvcklju] { color: #dc2626; }
.streak-neutral[b-qa4wvcklju] { color: var(--muted); }
.elo-value[b-qa4wvcklju] { color: #7c3aed; font-variant-numeric: tabular-nums; }

/* Detail blocks */
.details[b-qa4wvcklju] { margin-top: 14px; }
.details summary[b-qa4wvcklju] { cursor: pointer; font-weight: 950; color: var(--text); }
.detailBlock[b-qa4wvcklju] { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--borderSoft); }
.detailTitle[b-qa4wvcklju] { font-weight: 950; margin-bottom: 10px; color: var(--text); }

/* Tables */
.tableWrap[b-qa4wvcklju] { overflow: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.table[b-qa4wvcklju] { width: 100%; border-collapse: collapse; }
.table th[b-qa4wvcklju], .table td[b-qa4wvcklju] { padding: 8px 10px; border-bottom: 1px solid var(--borderSoft); }
.table thead th[b-qa4wvcklju] { text-align: left; color: var(--muted); font-size: 0.9rem; background: var(--panelSoft); }
.table.compact th[b-qa4wvcklju], .table.compact td[b-qa4wvcklju] { padding: 7px 9px; }
.num[b-qa4wvcklju] { text-align: center; font-variant-numeric: tabular-nums; }
.table th.num[b-qa4wvcklju], .table td.num[b-qa4wvcklju] { text-align: center !important; }

.diff.pos[b-qa4wvcklju] { color: var(--blue); font-weight: 950; }
.diff.neg[b-qa4wvcklju] { color: var(--red); font-weight: 950; }
.diff.zero[b-qa4wvcklju] { color: var(--muted); font-weight: 900; }

.laneGrid[b-qa4wvcklju] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .laneGrid[b-qa4wvcklju] { grid-template-columns: 1fr; } }
.laneCard[b-qa4wvcklju] { border: 1px solid var(--border); border-radius: 12px; background: var(--panel); padding: 10px; }
.laneTitle[b-qa4wvcklju] { font-weight: 950; color: var(--text); margin-bottom: 8px; }
.jsonBox[b-qa4wvcklju] { margin: 0; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--panelSoft); color: var(--text); overflow: auto; max-height: 520px; }
.mono[b-qa4wvcklju] { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace; }

/* Key Differences */
.keyDifferences[b-qa4wvcklju] { background: linear-gradient(135deg, rgba(37,99,235,.04) 0%, rgba(220,38,38,.04) 100%); border: 1px solid rgba(37,99,235,.15); padding: 14px; border-radius: var(--radiusSm); }
.diffList[b-qa4wvcklju] { display: flex; flex-direction: column; gap: 8px; }
.diffRow[b-qa4wvcklju] { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--borderSoft); background: var(--panel); }
.diffRow.diff.pos[b-qa4wvcklju] { border-color: rgba(37,99,235,.25); background: linear-gradient(90deg, rgba(37,99,235,.08) 0%, transparent 100%); }
.diffRow.diff.neg[b-qa4wvcklju] { border-color: rgba(220,38,38,.25); background: linear-gradient(90deg, rgba(220,38,38,.08) 0%, transparent 100%); }
.diffLabel[b-qa4wvcklju] { display: flex; align-items: center; gap: 8px; flex: 1; font-size: 0.95rem; }
.diffLabel strong[b-qa4wvcklju] { color: var(--text); font-weight: 700; }
.diffFavored[b-qa4wvcklju] { font-size: 0.85rem; font-weight: 600; color: var(--muted); padding: 2px 6px; background: var(--borderSoft); border-radius: 4px; white-space: nowrap; }
.diffValue[b-qa4wvcklju] { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.98rem; min-width: 70px; text-align: right; }
.diff.pos .diffValue[b-qa4wvcklju] { color: var(--blue); }
.diff.neg .diffValue[b-qa4wvcklju] { color: var(--red); }

/* Model Metrics */
/* Game Phase & Style */
.gamePhaseSection[b-qa4wvcklju] {
    background: linear-gradient(135deg, rgba(37,99,235,.03), rgba(124,58,237,.03));
    border: 1px solid rgba(124, 58, 237, 0.12);
    padding: 16px;
    border-radius: var(--radiusSm);
}

.phaseGrid[b-qa4wvcklju] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 600px) { .phaseGrid[b-qa4wvcklju] { grid-template-columns: 1fr; } }

.phaseCard[b-qa4wvcklju] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
}

.phaseTitle[b-qa4wvcklju] {
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--text);
    margin-bottom: 10px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.phaseBarRow[b-qa4wvcklju] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.phaseBarRow:last-child[b-qa4wvcklju] { margin-bottom: 0; }

.phaseBarLabel[b-qa4wvcklju] {
    font-size: 0.78rem;
    color: var(--muted);
    font-weight: 600;
    min-width: 100px;
    flex-shrink: 0;
}

.phaseBarTrack[b-qa4wvcklju] {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    display: flex;
}

.phaseBarBlue[b-qa4wvcklju] {
    height: 100%;
    background: var(--blue);
    border-radius: 999px 0 0 999px;
}

.phaseBarRed[b-qa4wvcklju] {
    height: 100%;
    background: var(--red);
    border-radius: 0 999px 999px 0;
}

.traitsSection[b-qa4wvcklju] {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.traitRow[b-qa4wvcklju] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.traitSide[b-qa4wvcklju] {
    font-weight: 800;
    font-size: 0.8rem;
    min-width: 80px;
}
.traitSide.blue-side[b-qa4wvcklju] { color: var(--blue); }
.traitSide.red-side[b-qa4wvcklju] { color: var(--red); }

.traitBadge[b-qa4wvcklju] {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.traitBadge.blue-trait[b-qa4wvcklju] {
    background: rgba(59, 130, 246, 0.1);
    color: var(--blue);
    border: 1px solid rgba(59, 130, 246, 0.25);
}
.traitBadge.red-trait[b-qa4wvcklju] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--red);
    border: 1px solid rgba(239, 68, 68, 0.25);
}

/* ── Lane Edges ──────────────────────────────────────────── */

.draftEdgeSummary[b-qa4wvcklju] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--panelSoft);
    border: 1px solid var(--borderSoft);
}

.draftEdgeLabel[b-qa4wvcklju] {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.draftEdgeValue[b-qa4wvcklju] {
    font-size: 1.1rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}
.draftEdgeValue.blue-edge[b-qa4wvcklju] { color: var(--blue); }
.draftEdgeValue.red-edge[b-qa4wvcklju] { color: var(--red); }
.draftEdgeValue.even-edge[b-qa4wvcklju] { color: var(--muted); }

.draftEdgeFavored[b-qa4wvcklju] {
    font-size: 0.75rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.draftEdgeFavored.blue-edge[b-qa4wvcklju] { background: rgba(59, 130, 246, 0.12); color: var(--blue); }
.draftEdgeFavored.red-edge[b-qa4wvcklju] { background: rgba(239, 68, 68, 0.12); color: var(--red); }
.draftEdgeFavored.even-edge[b-qa4wvcklju] { background: rgba(148, 163, 184, 0.1); color: var(--muted); }

.laneEdgeCards[b-qa4wvcklju] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.laneEdgeCard[b-qa4wvcklju] {
    display: grid;
    grid-template-columns: 70px 1fr 65px;
    grid-template-rows: auto auto;
    gap: 0 10px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--panel);
    border: 1px solid var(--border);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.laneEdgeCard.le-blue[b-qa4wvcklju] {
    border-left: 3px solid var(--blue);
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.06), transparent);
}
.laneEdgeCard.le-red[b-qa4wvcklju] {
    border-left: 3px solid var(--red);
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.06), transparent);
}
.laneEdgeCard.le-even[b-qa4wvcklju] {
    border-left: 3px solid var(--muted);
}

.leRole[b-qa4wvcklju] {
    grid-row: 1 / 3;
    align-self: center;
    font-weight: 900;
    font-size: 0.82rem;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.leBarWrap[b-qa4wvcklju] {
    display: flex;
    align-items: center;
    height: 6px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.1);
    overflow: hidden;
    position: relative;
}

.leBarCenter[b-qa4wvcklju] {
    width: 0;
    flex: 1;
}

.leBarFill[b-qa4wvcklju] {
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s ease;
}

.leBarRight[b-qa4wvcklju] {
    background: var(--blue);
}

.leBarLeft[b-qa4wvcklju] {
    background: var(--red);
    margin-left: auto;
}

.leValue[b-qa4wvcklju] {
    grid-row: 1;
    align-self: center;
    text-align: right;
    font-weight: 900;
    font-size: 0.92rem;
    font-variant-numeric: tabular-nums;
}
.leValue.le-blue[b-qa4wvcklju] { color: var(--blue); }
.leValue.le-red[b-qa4wvcklju] { color: var(--red); }
.leValue.le-even[b-qa4wvcklju] { color: var(--muted); }

.leBreakdown[b-qa4wvcklju] {
    grid-column: 2 / 4;
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

.leStat[b-qa4wvcklju] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    cursor: help;
}

.leStatKey[b-qa4wvcklju] {
    font-weight: 800;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 3px;
    opacity: 0.7;
}

@media (max-width: 480px) {
    .laneEdgeCard[b-qa4wvcklju] {
        grid-template-columns: 55px 1fr 55px;
        padding: 8px 10px;
    }
    .leBreakdown[b-qa4wvcklju] {
        gap: 8px;
    }
}

/* Confidence Badges */
.confidence-high[b-qa4wvcklju] { background: rgba(34, 197, 94, 0.15); color: #22c55e; padding: 4px 12px; border-radius: 6px; font-weight: 600; border: 1px solid rgba(34, 197, 94, 0.3); }
.confidence-medium[b-qa4wvcklju] { background: rgba(234, 179, 8, 0.15); color: #eab308; padding: 4px 12px; border-radius: 6px; font-weight: 600; border: 1px solid rgba(234, 179, 8, 0.3); }
.confidence-low[b-qa4wvcklju] { background: rgba(239, 68, 68, 0.15); color: #ef4444; padding: 4px 12px; border-radius: 6px; font-weight: 600; border: 1px solid rgba(239, 68, 68, 0.3); }

/* Player Rankings */
.playerRankings[b-qa4wvcklju] { background: var(--panel); border: 1px solid var(--border); }
.h2hFullWidth[b-qa4wvcklju] { margin-top: 16px; }
.playerH2hTitle[b-qa4wvcklju] { font-weight: 950; font-size: 1.3rem; color: var(--text); text-align: center; letter-spacing: -0.01em; padding-bottom: 8px; margin-bottom: 0; }
.rankingsDescription[b-qa4wvcklju] { margin: 0 0 16px 0; color: var(--muted); font-size: 0.82rem; text-align: center; }
.legend-win[b-qa4wvcklju] { color: #22c55e; font-weight: 700; }
.legend-lose[b-qa4wvcklju] { color: #ef4444; font-weight: 700; }

/* ── Summary Bar ─────────────────────────────────────────── */
.summaryBar[b-qa4wvcklju] {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 12px;
    background: linear-gradient(90deg, rgba(37,99,235,0.06), transparent, rgba(220,38,38,0.06));
    border-radius: 8px;
    border: 1px solid var(--border);
}

.summaryTeam[b-qa4wvcklju] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.summaryTeam.blueSummary[b-qa4wvcklju] { justify-content: flex-start; }
.summaryTeam.redSummary[b-qa4wvcklju] { justify-content: flex-end; }

.summaryLogo[b-qa4wvcklju] {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}

.summaryTeamName[b-qa4wvcklju] {
    font-weight: 900;
    font-size: 0.9rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.summaryPts[b-qa4wvcklju] {
    font-weight: 900;
    font-size: 1.1rem;
    padding: 2px 10px;
    border-radius: 6px;
    flex-shrink: 0;
}

.summaryPts.stat-advantage[b-qa4wvcklju] { color: #22c55e; background: rgba(34, 197, 94, 0.12); }
.summaryPts.stat-disadvantage[b-qa4wvcklju] { color: #ef4444; background: rgba(239, 68, 68, 0.1); }
.summaryPts.stat-near-equal[b-qa4wvcklju], .summaryPts.stat-equal[b-qa4wvcklju] { color: #eab308; background: rgba(234, 179, 8, 0.1); }

.summaryCenter[b-qa4wvcklju] { display: flex; flex-direction: column; gap: 4px; }

.summaryProgressBar[b-qa4wvcklju] {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    gap: 2px;
}

.summaryProgressBlue[b-qa4wvcklju] {
    background: linear-gradient(90deg, #2563eb, #3b82f6);
    border-radius: 3px 0 0 3px;
    transition: width 0.5s ease;
}

.summaryProgressRed[b-qa4wvcklju] {
    background: linear-gradient(90deg, #ef4444, #dc2626);
    border-radius: 0 3px 3px 0;
    transition: width 0.5s ease;
}

.summaryCompareRow[b-qa4wvcklju] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
}

.scLabel[b-qa4wvcklju] {
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.55rem;
    text-align: center;
    white-space: nowrap;
}

.scVal[b-qa4wvcklju] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.summaryCompareRow .scVal:first-child[b-qa4wvcklju] { text-align: right; }
.summaryCompareRow .scVal:last-child[b-qa4wvcklju] { text-align: left; }

.scVal.stat-advantage[b-qa4wvcklju] { color: #22c55e; }
.scVal.stat-disadvantage[b-qa4wvcklju] { color: #ef4444; }
.scVal.stat-equal[b-qa4wvcklju], .scVal.stat-near-equal[b-qa4wvcklju] { color: #eab308; }

@media (max-width: 600px) {
    .summaryBar[b-qa4wvcklju] { grid-template-columns: 1fr; gap: 8px; }
    .summaryTeam.redSummary[b-qa4wvcklju] { justify-content: flex-start; }
}

/* ── Lane Row H2H Layout ─────────────────────────────────── */
.laneRow[b-qa4wvcklju] {
    margin-bottom: 4px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--panelSoft);
    border: 1px solid var(--border);
}

.laneContent[b-qa4wvcklju] {
    display: grid;
    grid-template-columns: 1fr minmax(180px, 240px) 1fr;
    align-items: center;
    gap: 0;
    padding: 10px 16px;
}

.laneSide[b-qa4wvcklju] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.laneSide.blueSide[b-qa4wvcklju] { justify-content: flex-start; }
.laneSide.redSide[b-qa4wvcklju] { justify-content: flex-end; }

/* Champion portrait */
.champPortrait[b-qa4wvcklju] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    border: 2.5px solid var(--border);
    background: var(--border);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.champPortrait.blueGlow[b-qa4wvcklju] {
    border-color: rgba(37, 99, 235, 0.6);
    box-shadow: 0 0 12px rgba(37, 99, 235, 0.2);
}

.champPortrait.redGlow[b-qa4wvcklju] {
    border-color: rgba(220, 38, 38, 0.6);
    box-shadow: 0 0 12px rgba(220, 38, 38, 0.2);
}

.champPortrait.portraitWin[b-qa4wvcklju] {
    border-color: rgba(34, 197, 94, 0.7);
    box-shadow: 0 0 14px rgba(34, 197, 94, 0.3);
    transform: scale(1.05);
}

.champPortrait.portraitLose[b-qa4wvcklju] {
    opacity: 0.7;
    filter: grayscale(30%);
}

.champPortraitImg[b-qa4wvcklju] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.champPortraitFallback[b-qa4wvcklju] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 1.3rem;
    font-weight: 800;
    color: white;
    background: linear-gradient(135deg, #475569, #334155);
}

.champPortraitFallback.blueFallback[b-qa4wvcklju] {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.champPortraitFallback.redFallback[b-qa4wvcklju] {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
}

/* Player info next to portrait */
.lanePlayerInfo[b-qa4wvcklju] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.lanePlayerInfo.alignRight[b-qa4wvcklju] { text-align: right; }

.lanePlayerName[b-qa4wvcklju] {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.laneChampName[b-qa4wvcklju] {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.noDataText[b-qa4wvcklju] { color: var(--muted); font-style: italic; font-weight: 400; }

/* Score badge */
.laneScore[b-qa4wvcklju] {
    font-size: 1rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    padding: 3px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    flex-shrink: 0;
    min-width: 42px;
    text-align: center;
}

.laneScore.scoreWin[b-qa4wvcklju] {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.15);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.15);
}

.laneScore.scoreLose[b-qa4wvcklju] {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

/* Center stat comparison */
.laneCenter[b-qa4wvcklju] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 0 12px;
    min-width: 0;
}

.laneLabelCenter[b-qa4wvcklju] {
    text-align: center;
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 0 0 2px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--hoverGlow);
}

.laneStatRow[b-qa4wvcklju] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    padding: 2px 4px;
    border-radius: 4px;
    background: rgba(255,255,255,0.02);
}

.laneStatRow:nth-child(odd)[b-qa4wvcklju] {
    background: rgba(255,255,255,0.035);
}

.lsLabel[b-qa4wvcklju] {
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.58rem;
    text-align: center;
    white-space: nowrap;
    padding: 0 4px;
    min-width: 36px;
}

.lsVal[b-qa4wvcklju] {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    font-size: 0.75rem;
}

.laneStatRow .lsVal:first-child[b-qa4wvcklju] { text-align: right; }
.laneStatRow .lsVal:last-child[b-qa4wvcklju] { text-align: left; }

.lsVal.stat-advantage[b-qa4wvcklju] { color: #22c55e; }
.lsVal.stat-disadvantage[b-qa4wvcklju] { color: #ef4444; }
.lsVal.stat-equal[b-qa4wvcklju], .lsVal.stat-near-equal[b-qa4wvcklju] { color: #eab308; }

/* Lane Row — side accent when lane edge is available */
.laneRow.le-blue[b-qa4wvcklju] { border-left: 3px solid rgba(59, 130, 246, 0.5); }
.laneRow.le-red[b-qa4wvcklju] { border-left: 3px solid rgba(239, 68, 68, 0.5); }
.laneRow.le-even[b-qa4wvcklju] { border-left: 3px solid rgba(148, 163, 184, 0.25); }

/* Draft Edge Banner */
.draftEdgeBanner[b-qa4wvcklju] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 16px;
    margin-bottom: 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    font-variant-numeric: tabular-nums;
}
.draftEdgeBanner.deBannerBlue[b-qa4wvcklju] {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.1), rgba(37, 99, 235, 0.04));
    border-color: rgba(59, 130, 246, 0.3);
}
.draftEdgeBanner.deBannerRed[b-qa4wvcklju] {
    background: linear-gradient(90deg, rgba(220, 38, 38, 0.04), rgba(220, 38, 38, 0.1));
    border-color: rgba(239, 68, 68, 0.3);
}
.draftEdgeBanner.deBannerEven[b-qa4wvcklju] {
    background: rgba(148, 163, 184, 0.06);
    border-color: rgba(148, 163, 184, 0.2);
}
.deBannerLabel[b-qa4wvcklju] {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}
.deBannerValue[b-qa4wvcklju] {
    font-size: 1.1rem;
    font-weight: 950;
}
.deBannerBlue .deBannerValue[b-qa4wvcklju] { color: #60a5fa; }
.deBannerRed .deBannerValue[b-qa4wvcklju] { color: #f87171; }
.deBannerEven .deBannerValue[b-qa4wvcklju] { color: var(--muted); }
.deBannerSide[b-qa4wvcklju] {
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 4px;
}
.deBannerBlue .deBannerSide[b-qa4wvcklju] { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.deBannerRed .deBannerSide[b-qa4wvcklju] { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.deBannerEven .deBannerSide[b-qa4wvcklju] { background: rgba(148, 163, 184, 0.1); color: var(--muted); }

/* Lane Edge Pills (inline between player info and score) */
.laneEdgePills[b-qa4wvcklju] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}
.blueEdgePills[b-qa4wvcklju] { align-items: flex-end; }
.redEdgePills[b-qa4wvcklju] { align-items: flex-start; }

.edgePill[b-qa4wvcklju] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.6rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
    white-space: nowrap;
    position: relative;
    cursor: help;
}

/* Custom styled tooltip */
.edgePill[data-tooltip][b-qa4wvcklju]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 14px;
    border-radius: 8px;
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border: 1px solid rgba(148, 163, 184, 0.15);
    color: #e2e8f0;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform: translateX(-50%) translateY(4px);
    z-index: 100;
}
.edgePill[data-tooltip][b-qa4wvcklju]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1e293b;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 100;
}
.edgePill[data-tooltip]:hover[b-qa4wvcklju]::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.edgePill[data-tooltip]:hover[b-qa4wvcklju]::before {
    opacity: 1;
}
.edgePillBlue[b-qa4wvcklju] {
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
}
.edgePillRed[b-qa4wvcklju] {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
}
.epKey[b-qa4wvcklju] {
    font-weight: 900;
    font-size: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.7;
}
.epVal[b-qa4wvcklju] {
    font-weight: 800;
    font-size: 0.62rem;
}

@media (max-width: 600px) {
    .laneContent[b-qa4wvcklju] { grid-template-columns: 1fr; gap: 8px; }
    .laneSide.redSide[b-qa4wvcklju] { justify-content: flex-start; }
    .champPortrait[b-qa4wvcklju] { width: 44px; height: 44px; }
    .laneEdgePills[b-qa4wvcklju] { flex-direction: row; flex-wrap: wrap; gap: 2px; }
    .edgePill[b-qa4wvcklju] { padding: 1px 4px; font-size: 0.52rem; }
    .epKey[b-qa4wvcklju] { font-size: 0.45rem; }
    .epVal[b-qa4wvcklju] { font-size: 0.55rem; }
    .draftEdgeBanner[b-qa4wvcklju] { flex-wrap: wrap; gap: 6px; padding: 8px 12px; }
    .deBannerValue[b-qa4wvcklju] { font-size: 0.95rem; }
}

/* Keep stat classes for other panels */
.stat[b-qa4wvcklju] { display: flex; justify-content: space-between; align-items: center; padding: 2px 6px; border-radius: 3px; background: var(--panelSoft); font-size: 0.68rem; }
.stat.stat-advantage[b-qa4wvcklju] { background: rgba(34, 197, 94, 0.12); border-left: 3px solid #22c55e; }
.stat.stat-advantage .label[b-qa4wvcklju] { color: #15803d; font-weight: 600; }
.stat.stat-advantage .value[b-qa4wvcklju] { color: #22c55e; font-weight: 700; }
.stat.stat-disadvantage[b-qa4wvcklju] { background: rgba(239, 68, 68, 0.12); border-left: 3px solid #ef4444; }
.stat.stat-disadvantage .label[b-qa4wvcklju] { color: #991b1b; font-weight: 600; }
.stat.stat-disadvantage .value[b-qa4wvcklju] { color: #ef4444; font-weight: 700; }
.stat.stat-equal[b-qa4wvcklju], .stat.stat-near-equal[b-qa4wvcklju] { background: rgba(234, 179, 8, 0.10); border-left: 3px solid #eab308; }
.stat.stat-equal .label[b-qa4wvcklju], .stat.stat-near-equal .label[b-qa4wvcklju] { color: #a16207; font-weight: 600; }
.stat.stat-equal .value[b-qa4wvcklju], .stat.stat-near-equal .value[b-qa4wvcklju] { color: #ca8a04; font-weight: 700; }
.stat.confidence[b-qa4wvcklju] { background: var(--panelSoft); border-left: 3px solid var(--muted); }
.stat .label[b-qa4wvcklju] { font-weight: 600; color: var(--muted); flex: 0 0 auto; min-width: 40px; font-size: 0.62rem; text-transform: uppercase; }
.stat .value[b-qa4wvcklju] { font-weight: 700; color: var(--text); text-align: right; font-size: 0.68rem; }

/* (Team summary replaced by .summaryBar above) */

/* Match History Section */
.matchHistorySection[b-qa4wvcklju] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.matchHistoryList[b-qa4wvcklju] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 400px;
    overflow-y: auto;
}

.matchHistoryRow[b-qa4wvcklju] {
    display: grid;
    grid-template-columns: 1.5fr 70px 60px 90px auto;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--panelSoft);
    border: 1px solid var(--borderSoft);
    border-left: 3px solid transparent;
    font-size: 0.85rem;
    color: var(--text);
    transition: background 0.15s ease;
}

.matchHistoryRow.mhBlueWin[b-qa4wvcklju] {
    border-left-color: var(--blue);
    background: linear-gradient(90deg, rgba(59,130,246,0.06) 0%, var(--panelSoft) 40%);
}

.matchHistoryRow.mhRedWin[b-qa4wvcklju] {
    border-left-color: var(--red);
    background: linear-gradient(90deg, rgba(239,68,68,0.05) 0%, var(--panelSoft) 40%);
}

.matchHistoryRow:hover[b-qa4wvcklju] { background: rgba(59, 130, 246, 0.06); }

@media (max-width: 768px) {
    .historyTabs[b-qa4wvcklju] {
        gap: 0;
    }

    .historyTab[b-qa4wvcklju] {
        padding: 8px 6px;
        font-size: 0.68rem;
        white-space: normal;
        text-align: center;
        line-height: 1.2;
        gap: 4px;
    }

    .tabCount[b-qa4wvcklju] {
        font-size: 0.65rem;
        padding: 1px 6px;
    }

    .matchHistoryRow[b-qa4wvcklju] {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        gap: 4px 8px;
        padding: 8px 10px;
        font-size: 0.78rem;
    }

    .mhTeams[b-qa4wvcklju] {
        grid-column: 1 / -1;
        font-size: 0.78rem;
    }

    .mhTeamName[b-qa4wvcklju] {
        font-size: 0.75rem;
    }

    .mhScore[b-qa4wvcklju] {
        font-size: 0.8rem;
    }

    .mhDuration[b-qa4wvcklju] {
        font-size: 0.7rem;
    }

    .mhDate[b-qa4wvcklju] {
        font-size: 0.7rem;
        text-align: right;
    }

    .mhMvp[b-qa4wvcklju] {
        grid-column: 1 / -1;
        font-size: 0.68rem;
    }

    .matchHistoryList[b-qa4wvcklju] {
        max-height: 350px;
    }
}

.mhTeams[b-qa4wvcklju] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mhVs[b-qa4wvcklju] {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 600;
}

.mhTeamName[b-qa4wvcklju] {
    font-weight: 600;
    color: var(--muted);
}

.mhTeamName.mhWinner[b-qa4wvcklju] {
    font-weight: 800;
    color: var(--text);
}

.mhTeamName.mhLoser[b-qa4wvcklju] {
    opacity: 0.55;
}

.mhScore[b-qa4wvcklju] {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: center;
    font-size: 0.9rem;
}
.mhScore .scoreWin[b-qa4wvcklju] { color: var(--text); font-weight: 900; }
.mhScore .scoreLose[b-qa4wvcklju] { color: var(--muted); font-weight: 600; }
.mhScore .scoreSep[b-qa4wvcklju] { color: var(--muted); margin: 0 2px; }

.mhDuration[b-qa4wvcklju] {
    color: var(--muted);
    font-size: 0.78rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.mhDate[b-qa4wvcklju] {
    color: var(--muted);
    font-size: 0.8rem;
    text-align: center;
}

.mhMvp[b-qa4wvcklju] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mhMvpBadge[b-qa4wvcklju] {
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 5px;
    border-radius: 3px;
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.3);
    flex-shrink: 0;
    line-height: 1;
}
.mhMvpChamp[b-qa4wvcklju] {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--mutedFaint);
}
.mhMvp.blue-mvp[b-qa4wvcklju] {
    background: rgba(59, 130, 246, 0.10);
    border: 1px solid rgba(59, 130, 246, 0.25);
    color: var(--text);
}
.mhMvp.red-mvp[b-qa4wvcklju] {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.20);
    color: var(--text);
}
.h2hWarning[b-qa4wvcklju] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 8px;
    color: #fbbf24;
    font-size: 0.82rem;
    font-weight: 600;
    margin-top: 12px;
}
.h2hWarning svg[b-qa4wvcklju] {
    flex-shrink: 0;
    stroke: #f59e0b;
}

/* History Tabs */
.historyTabs[b-qa4wvcklju] {
    display: flex;
    gap: 0;
    margin-bottom: 12px;
    border-bottom: 2px solid var(--border);
}

.historyTab[b-qa4wvcklju] {
    flex: 1;
    padding: 10px 16px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    margin-bottom: -2px;
    white-space: nowrap;
}

.historyTab:hover[b-qa4wvcklju] {
    color: var(--text);
    background: var(--borderSoft);
}

.historyTab.active[b-qa4wvcklju] {
    color: var(--blue);
    border-bottom-color: var(--blue);
}

.tabCount[b-qa4wvcklju] {
    font-size: 0.75rem;
    font-weight: 800;
    background: var(--borderSoft);
    color: var(--muted);
    padding: 2px 8px;
    border-radius: 999px;
    min-width: 24px;
    text-align: center;
}

.historyTab.active .tabCount[b-qa4wvcklju] {
    background: rgba(37, 99, 235, 0.12);
    color: var(--blue);
}

/* H2H Summary */
.h2hSummary[b-qa4wvcklju] {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
    padding: 10px 16px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.06), rgba(220, 38, 38, 0.06));
    border-radius: 10px;
    border: 1px solid var(--borderSoft);
}

.h2hRecord[b-qa4wvcklju] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.05rem;
    font-weight: 800;
}

.h2hBlue[b-qa4wvcklju] { color: var(--blue); }
.h2hRed[b-qa4wvcklju] { color: var(--red); }
.h2hDash[b-qa4wvcklju] { color: var(--muted); font-weight: 400; }

.noH2hData[b-qa4wvcklju] {
    text-align: center;
    padding: 20px 16px;
    color: var(--muted);
    font-size: 0.92rem;
    font-style: italic;
    background: var(--panelSoft);
    border-radius: 8px;
    border: 1px dashed var(--border);
}

/* ── Login Gate Card ── */
.gateCard[b-qa4wvcklju] {
    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 var(--shadowSoft);
}

.gateIcon[b-qa4wvcklju] {
    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[b-qa4wvcklju] {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.01em;
    margin: 0;
}

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

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

.gateCta[b-qa4wvcklju] {
    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[b-qa4wvcklju] {
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.35);
    transform: translateY(-1px);
    text-decoration: none;
    color: #fff;
}

.gateSecondary[b-qa4wvcklju] {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.15s;
}

.gateSecondary:hover[b-qa4wvcklju] {
    color: var(--text);
    text-decoration: none;
}

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

    .gateTitle[b-qa4wvcklju] {
        font-size: 1.1rem;
    }

    .compareGrid[b-qa4wvcklju] {
        grid-template-columns: 1fr;
    }
}

/* ============================
   Compare All Models
   ============================ */

/* Compare All button in model selector bar */
.compareAllCard[b-qa4wvcklju] {
    border-color: rgba(167, 139, 250, 0.3) !important;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.06), rgba(167, 139, 250, 0.04)) !important;
}
.compareAllCard:hover:not(:disabled)[b-qa4wvcklju] {
    border-color: #a78bfa !important;
    background: rgba(167, 139, 250, 0.12) !important;
}
.compareAllCard.selected[b-qa4wvcklju] {
    border-color: #a78bfa !important;
    background: rgba(167, 139, 250, 0.15) !important;
    box-shadow: 0 0 16px rgba(167, 139, 250, 0.15);
}
.compareIcon[b-qa4wvcklju] {
    opacity: 0.85;
}

.tag-compare[b-qa4wvcklju] {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.3), rgba(139, 92, 246, 0.25));
    color: #c4b5fd;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Compare panel — sits inline where ResultBlock normally is */
.comparePanel[b-qa4wvcklju] {
    margin-top: 20px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.04), rgba(59, 130, 246, 0.02));
    border: 1px solid rgba(167, 139, 250, 0.2);
    border-radius: var(--radiusSm);
    padding: 20px;
    box-shadow: inset 0 1px 0 rgba(167, 139, 250, 0.08);
}

.comparePanelHeader[b-qa4wvcklju] {
    margin-bottom: 18px;
    text-align: center;
}
.comparePanelTitle[b-qa4wvcklju] {
    display: block;
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -0.02em;
}
.comparePanelSub[b-qa4wvcklju] {
    display: block;
    font-size: 0.82rem;
    color: var(--muted);
    margin-top: 4px;
}

/* Loading state */
.compareLoading[b-qa4wvcklju] {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}
.compareSpinner[b-qa4wvcklju] {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(167, 139, 250, 0.2);
    border-top-color: #a78bfa;
    border-radius: 50%;
    animation: compareSpin-b-qa4wvcklju 0.8s linear infinite;
}
@keyframes compareSpin-b-qa4wvcklju {
    to { transform: rotate(360deg); }
}

/* Grid layout — 2x2 for breathing room */
.compareGrid[b-qa4wvcklju] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

/* Individual model cards */
.compareCard[b-qa4wvcklju] {
    background: var(--panel);
    border: 2px solid var(--border);
    border-radius: var(--radiusSm);
    padding: 18px 20px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}
.compareCard[b-qa4wvcklju]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--border);
}
.compareCard:hover[b-qa4wvcklju] {
    border-color: rgba(148, 163, 184, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--shadowSoft);
}

/* Card accent top borders */
.compareCard-niche[b-qa4wvcklju]::before {
    background: linear-gradient(90deg, #b45309, #f59e0b);
}
.compareCard-niche[b-qa4wvcklju] {
    border-color: rgba(217, 119, 6, 0.3);
}
.compareCard-premium[b-qa4wvcklju]::before {
    background: linear-gradient(90deg, #7c3aed, #a78bfa);
}
.compareCard-premium[b-qa4wvcklju] {
    border-color: rgba(139, 92, 246, 0.3);
}
.compareCard-avg[b-qa4wvcklju]::before,
.compareAverage[b-qa4wvcklju]::before {
    background: linear-gradient(90deg, #a78bfa, #818cf8, #a78bfa);
}
.compareCard-avg[b-qa4wvcklju],
.compareAverage[b-qa4wvcklju] {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.08), rgba(139, 92, 246, 0.04));
    border-color: rgba(167, 139, 250, 0.35);
}

.compareCardHead[b-qa4wvcklju] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-top: 2px;
    gap: 6px;
}
.compareCardHead > span[b-qa4wvcklju] {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.compareModelName[b-qa4wvcklju] {
    font-weight: 900;
    font-size: 1.05rem;
    color: var(--text);
}
.compareModelName.name-basic[b-qa4wvcklju] { color: #60a5fa; }
.compareModelName.name-niche[b-qa4wvcklju] { color: #f59e0b; }
.compareModelName.name-premium[b-qa4wvcklju] { color: #a78bfa; }
.compareModelName.name-avg[b-qa4wvcklju] { color: #c4b5fd; }

.compareTag[b-qa4wvcklju] {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.compareTag.tag-basic[b-qa4wvcklju] {
    background: rgba(59, 130, 246, 0.15);
    color: var(--blueLight);
}
.compareTag.tag-niche[b-qa4wvcklju] {
    background: linear-gradient(135deg, #b45309, #d97706, #f59e0b);
    color: #fff;
}
.compareTag.tag-premium[b-qa4wvcklju] {
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: #fff;
}
.compareTag.tag-avg[b-qa4wvcklju] {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.3), rgba(139, 92, 246, 0.25));
    color: #c4b5fd;
    border: 1px solid rgba(167, 139, 250, 0.3);
}

/* Winner/confidence row */
.compareWinnerRow[b-qa4wvcklju] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.compareWinnerBadge[b-qa4wvcklju] {
    font-size: 0.75rem;
    font-weight: 900;
    padding: 5px 12px;
    border-radius: 7px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.compareWinnerBadge.badge-blue[b-qa4wvcklju] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.12));
    color: var(--blueLight);
    border: 1px solid rgba(59, 130, 246, 0.25);
}
.compareWinnerBadge.badge-red[b-qa4wvcklju] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.12));
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.25);
}
.compareConfBadge[b-qa4wvcklju] {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 6px;
    letter-spacing: 0.04em;
}

/* Bars */
.compareBars[b-qa4wvcklju] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.compareBarRow[b-qa4wvcklju] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.compareTeam[b-qa4wvcklju] {
    font-size: 0.78rem;
    font-weight: 700;
    min-width: 36px;
    max-width: 80px;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.compareTeam.blue[b-qa4wvcklju] { color: var(--blue); }
.compareTeam.red[b-qa4wvcklju] { color: var(--red); }

.compareBarWrap[b-qa4wvcklju] {
    flex: 1;
    height: 12px;
    background: var(--hoverGlow);
    border-radius: 6px;
    overflow: hidden;
}

.compareBar[b-qa4wvcklju] {
    height: 100%;
    border-radius: 6px;
    transition: width 0.5s ease;
}
.compareBar.blue[b-qa4wvcklju] {
    background: linear-gradient(90deg, var(--blue), var(--blueLight));
}
.compareBar.red[b-qa4wvcklju] {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

.comparePct[b-qa4wvcklju] {
    font-size: 0.95rem;
    font-weight: 900;
    color: var(--muted);
    min-width: 52px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.comparePct.winner[b-qa4wvcklju] {
    color: var(--text);
}

/* Odds row */
.compareOdds[b-qa4wvcklju] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid var(--hoverGlow);
    font-size: 0.82rem;
}
.compareOddsLabel[b-qa4wvcklju] {
    color: var(--muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.68rem;
}
.compareOddsValue[b-qa4wvcklju] {
    font-weight: 800;
    font-size: 0.92rem;
}
.compareOddsValue .rdBlue[b-qa4wvcklju] { color: var(--blueLight); }
.compareOddsValue .rdRed[b-qa4wvcklju] { color: #f87171; }

/* Verdict */
.compareVerdict[b-qa4wvcklju] {
    margin-top: 16px;
    padding: 14px 18px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    font-weight: 700;
}
.verdict-agree[b-qa4wvcklju] {
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: #4ade80;
}
.verdict-split[b-qa4wvcklju] {
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.25);
    color: #fbbf24;
}
.verdictIcon[b-qa4wvcklju] {
    font-size: 1.2rem;
}

/* Locked / Premium overlay cards */
.compareCard-locked[b-qa4wvcklju] {
    position: relative;
    overflow: hidden;
}

.compareCard-locked .lockedContent[b-qa4wvcklju] {
    filter: blur(8px);
    -webkit-filter: blur(8px);
    pointer-events: none;
    user-select: none;
    opacity: 0.5;
}

.premiumOverlay[b-qa4wvcklju] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 2;
    color: #c4b5fd;
    background: var(--overlayBg);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.premiumOverlay svg[b-qa4wvcklju] {
    stroke: #a78bfa;
    opacity: 0.9;
}

.premiumOverlayText[b-qa4wvcklju] {
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: var(--text);
}

.premiumOverlayBtn[b-qa4wvcklju] {
    display: inline-block;
    padding: 7px 22px;
    border-radius: 8px;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff;
    font-weight: 800;
    font-size: 0.82rem;
    text-decoration: none;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    transition: all 0.2s ease;
    border: none;
}

.premiumOverlayBtn:hover[b-qa4wvcklju] {
    background: linear-gradient(135deg, #6d28d9, #9333ea);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
}

@media (max-width: 640px) {
    .compareGrid[b-qa4wvcklju] {
        grid-template-columns: 1fr;
    }
    .compareTeam[b-qa4wvcklju] {
        min-width: 30px;
        max-width: 60px;
    }
}
/* /Components/Pages/PredictMatch.razor.rz.scp.css */
/* Shared styles for PredictMatch page */

.pageHeader[b-dhksjw38ga] { margin-bottom: 18px; text-align: center; }
.page-title[b-dhksjw38ga] { margin: 0; font-weight: 900; color: var(--text); font-size: 2.3rem; letter-spacing: -0.02em; }
.page-subtitle[b-dhksjw38ga] { margin: 6px 0 0 0; color: var(--muted); font-size: 1rem; }

/* Match-detail-style header for results */
.matchDetailPage[b-dhksjw38ga] {
    max-width: 900px;
    margin: 24px auto 0 auto;
}
.matchDetailHeader[b-dhksjw38ga] {
    text-align: center;
    margin-bottom: 24px;
    padding: 24px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radiusSm);
}
.mdTeams[b-dhksjw38ga] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}
.mdTeam[b-dhksjw38ga] {
    display: flex;
    align-items: center;
    gap: 10px;
}
.mdTeam.mdRed[b-dhksjw38ga] { flex-direction: row-reverse; }
.mdTeamLink[b-dhksjw38ga] {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.15s;
}
.mdTeamLink:hover[b-dhksjw38ga] { opacity: 0.8; }
.mdRed .mdTeamLink[b-dhksjw38ga] { flex-direction: row-reverse; }
.mdTeamLogo[b-dhksjw38ga] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.05);
}
.mdTeamName[b-dhksjw38ga] {
    font-weight: 900;
    font-size: 1.3rem;
    color: var(--text);
}
.mdVs[b-dhksjw38ga] {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--muted);
    text-align: center;
}
@media (max-width: 640px) {
    .mdTeams[b-dhksjw38ga] { flex-direction: column; gap: 12px; }
    .mdTeam.mdRed[b-dhksjw38ga] { flex-direction: row; }
    .mdTeamLogo[b-dhksjw38ga] { width: 36px; height: 36px; }
    .mdTeamName[b-dhksjw38ga] { font-size: 1rem; }
}

/* Model selector */
.modelSelector[b-dhksjw38ga] {
    margin: 0 auto 20px auto;
    max-width: 900px;
}
.modelLabel[b-dhksjw38ga] {
    font-weight: 700;
    margin: 0 0 10px 0;
    color: var(--text);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.modelCards[b-dhksjw38ga] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
.modelCard[b-dhksjw38ga] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 2px solid var(--border);
    background: var(--panel);
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    font-size: 0.82rem;
    white-space: nowrap;
    flex: 0 0 auto;
}
.modelCard:hover:not(.locked)[b-dhksjw38ga] {
    border-color: var(--blue);
    background: rgba(59, 130, 246, 0.1);
}
.modelCard.selected[b-dhksjw38ga] {
    border-color: var(--blue);
    background: rgba(59, 130, 246, 0.1);
    box-shadow: 0 0 0 1px var(--blue);
}
.modelCard.locked[b-dhksjw38ga] {
    opacity: 0.6;
    cursor: not-allowed;
    border-style: dashed;
}
.modelCardName[b-dhksjw38ga] {
    font-weight: 600;
    color: var(--text);
}
.modelCardTag[b-dhksjw38ga] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.tag-premium[b-dhksjw38ga] {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff;
}
.tag-niche[b-dhksjw38ga] {
    background: linear-gradient(135deg, #b45309, #d97706, #f59e0b);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.tag-locked[b-dhksjw38ga] {
    background: linear-gradient(135deg, #6b21a8, #9333ea);
    color: #fff;
    padding: 3px 10px;
}

/* Card */
.card.fullWidth[b-dhksjw38ga] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
    max-width: 900px;
    margin: 0 auto;
}
.cardHeader[b-dhksjw38ga] { margin-bottom: 18px; }
.cardTitle[b-dhksjw38ga] { font-weight: 900; color: var(--text); font-size: 1.25rem; }
.cardHint[b-dhksjw38ga] { margin-top: 4px; color: var(--muted); font-size: 0.92rem; }

/* Form */
.formRow[b-dhksjw38ga] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 12px;
}
@media (max-width: 600px) {
    .formRow[b-dhksjw38ga] { grid-template-columns: 1fr; }
}
.field[b-dhksjw38ga] { display: flex; flex-direction: column; gap: 6px; }

.selectWithLogo[b-dhksjw38ga] {
    display: flex;
    align-items: center;
    gap: 10px;
}
.selectWithLogo .select[b-dhksjw38ga] {
    flex: 1;
}
.selectLogo[b-dhksjw38ga] {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 8px;
    background: var(--hoverGlow);
    padding: 3px;
    flex-shrink: 0;
}
.label[b-dhksjw38ga] { font-weight: 900; color: var(--text); font-size: 0.95rem; }
.label.blue[b-dhksjw38ga] { color: var(--blue); }
.label.red[b-dhksjw38ga] { color: var(--red); }

.select[b-dhksjw38ga] {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 11px 42px 11px 12px;
    background: var(--panel);
    color: var(--text);
    box-shadow: var(--shadowSoft);
    font-size: 0.98rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23e2e8f0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px 18px;
}
.select:focus[b-dhksjw38ga] { outline: none; border-color: rgba(37, 99, 235, .55); box-shadow: 0 0 0 4px rgba(37, 99, 235, .14); }
.select:disabled[b-dhksjw38ga] { background-color: var(--panelDeep); color: var(--mutedFaint); }
select option:disabled[b-dhksjw38ga] { color: var(--mutedFaint); }

.buttonRow[b-dhksjw38ga] {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.buttonRow .btn[b-dhksjw38ga] { flex: 1; min-width: 140px; }

.btn[b-dhksjw38ga] {
    border-radius: 12px;
    padding: 12px 14px;
    font-weight: 950;
    border: 1px solid var(--border);
    cursor: pointer;
    user-select: none;
    letter-spacing: 0.2px;
    box-shadow: var(--shadowSoft);
    background: var(--panel);
    color: var(--text);
    text-align: center;
}
.btn:disabled[b-dhksjw38ga] { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.btn.primary[b-dhksjw38ga] { background: linear-gradient(180deg, rgba(37,99,235,1), rgba(29,78,216,1)); color: #fff; border-color: transparent; }
.btn.dark[b-dhksjw38ga] { background: linear-gradient(180deg, #111827, #0b1220); color: #fff; border-color: transparent; width: 100%; margin-top: 16px; }

.helper[b-dhksjw38ga] { margin-top: 10px; color: var(--muted); font-size: 0.92rem; }
.callout[b-dhksjw38ga] { border: 1px solid var(--border); background: var(--panel); border-radius: 12px; padding: 10px 12px; }
.callout.muted[b-dhksjw38ga] { color: var(--muted); background: var(--panelSoft); border-color: var(--borderSoft); }
.callout.error[b-dhksjw38ga] { border-color: rgba(220, 38, 38, .35); background: rgba(220, 38, 38, .08); color: #7f1d1d; }
.mt-12[b-dhksjw38ga] { margin-top: 12px; }

/* Picks */
.picksGrid[b-dhksjw38ga] { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
@media (max-width: 720px) { .picksGrid[b-dhksjw38ga] { grid-template-columns: 1fr; } }
.picksCol[b-dhksjw38ga] { border: 1px solid var(--border); border-radius: var(--radiusSm); padding: 14px; background: var(--panelSoft); }
.blueBorder[b-dhksjw38ga] { border-color: rgba(37, 99, 235, .35); }
.redBorder[b-dhksjw38ga] { border-color: rgba(220, 38, 38, .35); }
.picksTitle[b-dhksjw38ga] { font-weight: 950; margin-bottom: 10px; font-size: 1rem; color: var(--text); }
.picksTitle.blue[b-dhksjw38ga] { color: var(--blue); }
.picksTitle.red[b-dhksjw38ga] { color: var(--red); }
.pickRow[b-dhksjw38ga] { display: grid; grid-template-columns: 90px 1fr; gap: 10px; align-items: center; margin-bottom: 10px; }
.role[b-dhksjw38ga] { color: var(--muted); font-weight: 900; letter-spacing: 0.2px; }

/* Results */
.result[b-dhksjw38ga] { margin-top: 20px; border-radius: var(--radiusSm); border: 1px solid var(--border); background: var(--panel); padding: 20px; box-shadow: var(--shadowSoft); }
.result.winner-blue[b-dhksjw38ga] { border-color: rgba(37,99,235,.45); box-shadow: 0 0 0 3px rgba(37,99,235,.10), var(--shadowSoft); }
.result.winner-red[b-dhksjw38ga] { border-color: rgba(220,38,38,.45); box-shadow: 0 0 0 3px rgba(220,38,38,.10), var(--shadowSoft); }

.resultHeader[b-dhksjw38ga] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.resultWinnerBadge[b-dhksjw38ga] {
    font-weight: 900;
    font-size: 0.82rem;
    padding: 5px 14px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.resultWinnerBadge.badge-blue[b-dhksjw38ga] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.1));
    color: var(--blueLight);
    border: 1px solid rgba(59, 130, 246, 0.3);
}
.resultWinnerBadge.badge-red[b-dhksjw38ga] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.1));
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.resultConfBadge[b-dhksjw38ga] {
    font-weight: 800;
    font-size: 0.68rem;
    padding: 4px 10px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.resultConfBadge.conf-high[b-dhksjw38ga] {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.25);
}
.resultConfBadge.conf-med[b-dhksjw38ga] {
    background: rgba(234, 179, 8, 0.12);
    color: #fbbf24;
    border: 1px solid rgba(234, 179, 8, 0.25);
}
.resultConfBadge.conf-low[b-dhksjw38ga] {
    background: var(--borderSoft);
    color: var(--muted);
    border: 1px solid var(--borderSoft);
}

.bars[b-dhksjw38ga] { display: grid; gap: 10px; }
.barRow[b-dhksjw38ga] { display: grid; grid-template-columns: 1.5fr 3fr 80px; gap: 10px; align-items: center; }
.teamName[b-dhksjw38ga] { font-weight: 900; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barWrap[b-dhksjw38ga] { height: 12px; background: var(--borderSoft); border-radius: 999px; overflow: hidden; }
.blueRow .bar[b-dhksjw38ga] { height: 100%; background: linear-gradient(90deg, var(--blue), var(--blueLight)); border-radius: 999px; }
.redRow .bar[b-dhksjw38ga] { height: 100%; background: linear-gradient(90deg, var(--red), #f87171); border-radius: 999px; }
.pct[b-dhksjw38ga] { text-align: right; font-weight: 950; color: var(--text); font-variant-numeric: tabular-nums; }

.resultFooter[b-dhksjw38ga] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--borderSoft);
}

.resultOddsChip[b-dhksjw38ga] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: var(--panelSoft);
    border: 1px solid var(--borderSoft);
    border-radius: 8px;
}

.resultStatChip[b-dhksjw38ga] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: var(--panelSoft);
    border: 1px solid var(--borderSoft);
    border-radius: 8px;
}

.rdLabel[b-dhksjw38ga] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    white-space: nowrap;
}

.rdValue[b-dhksjw38ga] {
    font-size: 0.95rem;
    font-weight: 900;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.oddsSep[b-dhksjw38ga] { color: var(--muted); font-weight: 400; margin: 0 1px; }
.rdBlue[b-dhksjw38ga] { color: var(--blue); }
.rdRed[b-dhksjw38ga] { color: var(--red); }

/* H2H & Streak Section */
.formSection[b-dhksjw38ga] { margin-top: 20px; padding: 16px; background: linear-gradient(135deg, rgba(37,99,235,.04), rgba(220,38,38,.04)); border: 1px solid var(--borderSoft); border-radius: var(--radiusSm); }
.formSectionTitle[b-dhksjw38ga] { font-weight: 900; color: var(--text); font-size: 1.05rem; margin-bottom: 8px; }

.h2hGrid[b-dhksjw38ga] { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; }
@media (max-width: 600px) { .h2hGrid[b-dhksjw38ga] { grid-template-columns: 1fr; } .h2hVs[b-dhksjw38ga] { text-align: center; } }

.h2hCard[b-dhksjw38ga] { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radiusSm); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.h2hCard.blue-accent[b-dhksjw38ga] { border-top: 3px solid var(--blue); }
.h2hCard.red-accent[b-dhksjw38ga] { border-top: 3px solid var(--red); }
.h2hTeamName[b-dhksjw38ga] { font-weight: 900; font-size: 1rem; color: var(--text); text-align: center; }
.h2hVs[b-dhksjw38ga] { display: flex; align-items: center; justify-content: center; font-weight: 950; color: var(--muted); font-size: 1.1rem; letter-spacing: 0.1em; }

.streakRow[b-dhksjw38ga] { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--borderSoft); }
.streakRow:last-child[b-dhksjw38ga] { border-bottom: none; }
.streakLabel[b-dhksjw38ga] { color: var(--muted); font-size: 0.9rem; font-weight: 600; }
.streakValue[b-dhksjw38ga] { font-weight: 800; font-size: 0.95rem; color: var(--text); }
.streak-win[b-dhksjw38ga] { color: #16a34a; }
.streak-lose[b-dhksjw38ga] { color: #dc2626; }
.streak-neutral[b-dhksjw38ga] { color: var(--muted); }
.elo-value[b-dhksjw38ga] { color: #7c3aed; font-variant-numeric: tabular-nums; }

/* Detail blocks */
.details[b-dhksjw38ga] { margin-top: 14px; }
.details summary[b-dhksjw38ga] { cursor: pointer; font-weight: 950; color: var(--text); }
.detailBlock[b-dhksjw38ga] { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--borderSoft); }
.detailTitle[b-dhksjw38ga] { font-weight: 950; margin-bottom: 10px; color: var(--text); }

/* Tables */
.tableWrap[b-dhksjw38ga] { overflow: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.table[b-dhksjw38ga] { width: 100%; border-collapse: collapse; }
.table th[b-dhksjw38ga], .table td[b-dhksjw38ga] { padding: 8px 10px; border-bottom: 1px solid var(--borderSoft); }
.table thead th[b-dhksjw38ga] { text-align: left; color: var(--muted); font-size: 0.9rem; background: var(--panelSoft); }
.table.compact th[b-dhksjw38ga], .table.compact td[b-dhksjw38ga] { padding: 7px 9px; }
.num[b-dhksjw38ga] { text-align: center; font-variant-numeric: tabular-nums; }
.table th.num[b-dhksjw38ga], .table td.num[b-dhksjw38ga] { text-align: center !important; }

.diff.pos[b-dhksjw38ga] { color: var(--blue); font-weight: 950; }
.diff.neg[b-dhksjw38ga] { color: var(--red); font-weight: 950; }
.diff.zero[b-dhksjw38ga] { color: var(--muted); font-weight: 900; }

.laneGrid[b-dhksjw38ga] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .laneGrid[b-dhksjw38ga] { grid-template-columns: 1fr; } }
.laneCard[b-dhksjw38ga] { border: 1px solid var(--border); border-radius: 12px; background: var(--panel); padding: 10px; }
.laneTitle[b-dhksjw38ga] { font-weight: 950; color: var(--text); margin-bottom: 8px; }
.jsonBox[b-dhksjw38ga] { margin: 0; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--panelSoft); color: var(--text); overflow: auto; max-height: 520px; }
.mono[b-dhksjw38ga] { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace; }

/* Key Differences */
.keyDifferences[b-dhksjw38ga] { background: linear-gradient(135deg, rgba(37,99,235,.04) 0%, rgba(220,38,38,.04) 100%); border: 1px solid rgba(37,99,235,.15); padding: 14px; border-radius: var(--radiusSm); }
.diffList[b-dhksjw38ga] { display: flex; flex-direction: column; gap: 8px; }
.diffRow[b-dhksjw38ga] { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--borderSoft); background: var(--panel); }
.diffRow.diff.pos[b-dhksjw38ga] { border-color: rgba(37,99,235,.25); background: linear-gradient(90deg, rgba(37,99,235,.08) 0%, transparent 100%); }
.diffRow.diff.neg[b-dhksjw38ga] { border-color: rgba(220,38,38,.25); background: linear-gradient(90deg, rgba(220,38,38,.08) 0%, transparent 100%); }
.diffLabel[b-dhksjw38ga] { display: flex; align-items: center; gap: 8px; flex: 1; font-size: 0.95rem; }
.diffLabel strong[b-dhksjw38ga] { color: var(--text); font-weight: 700; }
.diffFavored[b-dhksjw38ga] { font-size: 0.85rem; font-weight: 600; color: var(--muted); padding: 2px 6px; background: var(--panelDeep); border-radius: 4px; white-space: nowrap; }
.diffValue[b-dhksjw38ga] { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.98rem; min-width: 70px; text-align: right; }
.diff.pos .diffValue[b-dhksjw38ga] { color: var(--blue); }
.diff.neg .diffValue[b-dhksjw38ga] { color: var(--red); }

/* Game Phase & Style */
.gamePhaseSection[b-dhksjw38ga] {
    background: linear-gradient(135deg, rgba(37,99,235,.03), rgba(124,58,237,.03));
    border: 1px solid rgba(124, 58, 237, 0.12);
    padding: 16px;
    border-radius: var(--radiusSm);
}

.phaseGrid[b-dhksjw38ga] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 600px) { .phaseGrid[b-dhksjw38ga] { grid-template-columns: 1fr; } }

.phaseCard[b-dhksjw38ga] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
}

.phaseTitle[b-dhksjw38ga] {
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--text);
    margin-bottom: 10px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.phaseBarRow[b-dhksjw38ga] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.phaseBarRow:last-child[b-dhksjw38ga] { margin-bottom: 0; }

.phaseBarLabel[b-dhksjw38ga] {
    font-size: 0.78rem;
    color: var(--muted);
    font-weight: 600;
    min-width: 100px;
    flex-shrink: 0;
}

.phaseBarTrack[b-dhksjw38ga] {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    display: flex;
}

.phaseBarBlue[b-dhksjw38ga] {
    height: 100%;
    background: var(--blue);
    border-radius: 999px 0 0 999px;
}

.phaseBarRed[b-dhksjw38ga] {
    height: 100%;
    background: var(--red);
    border-radius: 0 999px 999px 0;
}

.traitsSection[b-dhksjw38ga] {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.traitRow[b-dhksjw38ga] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.traitSide[b-dhksjw38ga] {
    font-weight: 800;
    font-size: 0.8rem;
    min-width: 80px;
}
.traitSide.blue-side[b-dhksjw38ga] { color: var(--blue); }
.traitSide.red-side[b-dhksjw38ga] { color: var(--red); }

.traitBadge[b-dhksjw38ga] {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.traitBadge.blue-trait[b-dhksjw38ga] {
    background: rgba(59, 130, 246, 0.1);
    color: var(--blue);
    border: 1px solid rgba(59, 130, 246, 0.25);
}
.traitBadge.red-trait[b-dhksjw38ga] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--red);
    border: 1px solid rgba(239, 68, 68, 0.25);
}

/* Confidence Badges */
.confidence-high[b-dhksjw38ga] { background: rgba(34, 197, 94, 0.15); color: #22c55e; padding: 4px 12px; border-radius: 6px; font-weight: 600; border: 1px solid rgba(34, 197, 94, 0.3); }
.confidence-medium[b-dhksjw38ga] { background: rgba(234, 179, 8, 0.15); color: #eab308; padding: 4px 12px; border-radius: 6px; font-weight: 600; border: 1px solid rgba(234, 179, 8, 0.3); }
.confidence-low[b-dhksjw38ga] { background: rgba(239, 68, 68, 0.15); color: #ef4444; padding: 4px 12px; border-radius: 6px; font-weight: 600; border: 1px solid rgba(239, 68, 68, 0.3); }

/* Player Rankings */
.playerRankings[b-dhksjw38ga] { background: linear-gradient(135deg, rgba(59, 130, 246, 0.06) 0%, rgba(239, 68, 68, 0.04) 100%); border: 2px solid rgba(59, 130, 246, 0.2); }
.rankingsDescription[b-dhksjw38ga] { margin: 12px 0 20px 0; color: var(--muted); font-size: 0.95rem; font-style: italic; }

.laneMatchup[b-dhksjw38ga] { margin-bottom: 20px; }
.matchupCards[b-dhksjw38ga] { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; max-width: 400px; margin: 0 auto; }

.rankingCard[b-dhksjw38ga] { flex: 1; min-width: 120px; max-width: 160px; padding: 6px; border-radius: 12px; border: 2px solid var(--border); background: var(--panelSoft); display: flex; flex-direction: column; gap: 4px; transition: all 0.3s ease; }
.rankingCard:hover[b-dhksjw38ga] { transform: translateY(-4px); box-shadow: 0 8px 16px var(--hoverShadow); }
.rankingCard.blue-team[b-dhksjw38ga] { border-color: rgba(37, 99, 235, 0.3); background: rgba(37, 99, 235, 0.05); border-top: 3px solid #2563eb; }
.rankingCard.red-team[b-dhksjw38ga] { border-color: rgba(220, 38, 38, 0.3); background: rgba(220, 38, 38, 0.05); border-top: 3px solid #dc2626; }
.rankingCard.empty[b-dhksjw38ga] { justify-content: center; align-items: center; min-height: 120px; }
.noData[b-dhksjw38ga] { text-align: center; color: var(--muted); font-size: 0.9rem; }

.champImageWrapper[b-dhksjw38ga] { width: 100%; height: 50px; border-radius: 8px; overflow: hidden; background: var(--border); display: flex; align-items: center; justify-content: center; }

/* Match History Section */
.matchHistorySection[b-dhksjw38ga] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.matchHistoryTitle[b-dhksjw38ga] {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text);
    margin-bottom: 10px;
}

.matchHistoryList[b-dhksjw38ga] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 400px;
    overflow-y: auto;
}

.matchHistoryRow[b-dhksjw38ga] {
    display: grid;
    grid-template-columns: 1.5fr 70px 60px 90px auto;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--panelSoft);
    border: 1px solid var(--borderSoft);
    border-left: 3px solid transparent;
    font-size: 0.85rem;
    color: var(--text);
    transition: background 0.15s ease;
}

.matchHistoryRow.mhBlueWin[b-dhksjw38ga] {
    border-left-color: var(--blue);
    background: linear-gradient(90deg, rgba(59,130,246,0.06) 0%, var(--panelSoft) 40%);
}

.matchHistoryRow.mhRedWin[b-dhksjw38ga] {
    border-left-color: var(--red);
    background: linear-gradient(90deg, rgba(239,68,68,0.05) 0%, var(--panelSoft) 40%);
}

.matchHistoryRow:hover[b-dhksjw38ga] { background: rgba(59, 130, 246, 0.06); }

@media (max-width: 768px) {
    .historyTabs[b-dhksjw38ga] {
        gap: 0;
    }

    .historyTab[b-dhksjw38ga] {
        padding: 8px 6px;
        font-size: 0.68rem;
        white-space: normal;
        text-align: center;
        line-height: 1.2;
        gap: 4px;
    }

    .tabCount[b-dhksjw38ga] {
        font-size: 0.65rem;
        padding: 1px 6px;
    }

    .matchHistoryRow[b-dhksjw38ga] {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        gap: 4px 8px;
        padding: 8px 10px;
        font-size: 0.78rem;
    }

    .mhTeams[b-dhksjw38ga] {
        grid-column: 1 / -1;
        font-size: 0.78rem;
    }

    .mhTeamName[b-dhksjw38ga] {
        font-size: 0.75rem;
    }

    .mhScore[b-dhksjw38ga] {
        font-size: 0.8rem;
    }

    .mhDuration[b-dhksjw38ga] {
        font-size: 0.7rem;
    }

    .mhDate[b-dhksjw38ga] {
        font-size: 0.7rem;
        text-align: right;
    }

    .mhMvp[b-dhksjw38ga] {
        grid-column: 1 / -1;
        font-size: 0.68rem;
    }

    .matchHistoryList[b-dhksjw38ga] {
        max-height: 350px;
    }
}

.mhTeams[b-dhksjw38ga] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mhVs[b-dhksjw38ga] {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 600;
}

.mhTeamName[b-dhksjw38ga] {
    font-weight: 600;
    color: var(--muted);
}

.mhTeamName.mhWinner[b-dhksjw38ga] {
    font-weight: 800;
    color: var(--text);
}

.mhTeamName.mhLoser[b-dhksjw38ga] {
    opacity: 0.55;
}

.mhScore[b-dhksjw38ga] {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: center;
    font-size: 0.9rem;
}
.mhScore .scoreWin[b-dhksjw38ga] { color: var(--text); font-weight: 900; }
.mhScore .scoreLose[b-dhksjw38ga] { color: var(--muted); font-weight: 600; }
.mhScore .scoreSep[b-dhksjw38ga] { color: var(--muted); margin: 0 2px; }

.mhDuration[b-dhksjw38ga] {
    color: var(--muted);
    font-size: 0.78rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.mhDate[b-dhksjw38ga] {
    color: var(--muted);
    font-size: 0.8rem;
    text-align: center;
}

.mhMvp[b-dhksjw38ga] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mhMvpBadge[b-dhksjw38ga] {
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 5px;
    border-radius: 3px;
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.3);
    flex-shrink: 0;
    line-height: 1;
}
.mhMvpChamp[b-dhksjw38ga] {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--mutedFaint);
}
.mhMvp.blue-mvp[b-dhksjw38ga] {
    background: rgba(59, 130, 246, 0.10);
    border: 1px solid rgba(59, 130, 246, 0.25);
    color: var(--text);
}
.mhMvp.red-mvp[b-dhksjw38ga] {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.20);
    color: var(--text);
}
.h2hWarning[b-dhksjw38ga] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 8px;
    color: #fbbf24;
    font-size: 0.82rem;
    font-weight: 600;
    margin-top: 12px;
}
.h2hWarning svg[b-dhksjw38ga] {
    flex-shrink: 0;
    stroke: #f59e0b;
}
.champImage[b-dhksjw38ga] { width: 100%; height: 100%; object-fit: cover; }
.champImageFallback[b-dhksjw38ga] { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; font-size: 1.8rem; font-weight: 700; }
.rankingCard.blue-team .champImageFallback[b-dhksjw38ga] { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
.rankingCard.red-team .champImageFallback[b-dhksjw38ga] { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }

.playerTeamInfo[b-dhksjw38ga] { margin-bottom: 4px; padding: 4px; text-align: center; background: var(--panelDeep); border-radius: 6px; }
.playerNameTeam[b-dhksjw38ga] { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.playerName[b-dhksjw38ga] { font-size: 0.78rem; font-weight: 700; color: var(--text); }
.teamNameBadge[b-dhksjw38ga] { font-size: 0.65rem; font-weight: 600; padding: 2px 6px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; display: block; }
.teamNameBadge.team-blue[b-dhksjw38ga] { background: rgba(37, 99, 235, 0.15); color: #2563eb; border: 1px solid rgba(37, 99, 235, 0.3); }
.teamNameBadge.team-red[b-dhksjw38ga] { background: rgba(220, 38, 38, 0.15); color: #dc2626; border: 1px solid rgba(220, 38, 38, 0.3); }

.champInfo[b-dhksjw38ga] { text-align: center; }
.champName[b-dhksjw38ga] { font-size: 0.75rem; font-weight: 700; color: var(--text); }

.performanceScore[b-dhksjw38ga] { background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(37, 99, 235, 0.05)); border-radius: 8px; padding: 4px; text-align: center; border: 1px solid rgba(37, 99, 235, 0.15); }
.performanceScore .scoreValue[b-dhksjw38ga] { font-size: 1rem; font-weight: 700; color: #4f46e5; line-height: 1; }
.performanceScore .scoreLabel[b-dhksjw38ga] { font-size: 0.55rem; color: var(--muted); text-transform: uppercase; }

.keyStats[b-dhksjw38ga] { display: flex; flex-direction: column; gap: 2px; }
.stat[b-dhksjw38ga] { display: flex; justify-content: space-between; align-items: center; padding: 2px 6px; border-radius: 3px; background: var(--panelSoft); font-size: 0.68rem; }
.stat.stat-advantage[b-dhksjw38ga] { background: rgba(34, 197, 94, 0.12); border-left: 3px solid #22c55e; }
.stat.stat-advantage .label[b-dhksjw38ga] { color: #15803d; font-weight: 600; }
.stat.stat-advantage .value[b-dhksjw38ga] { color: #22c55e; font-weight: 700; }
.stat.stat-disadvantage[b-dhksjw38ga] { background: rgba(239, 68, 68, 0.12); border-left: 3px solid #ef4444; }
.stat.stat-disadvantage .label[b-dhksjw38ga] { color: #991b1b; font-weight: 600; }
.stat.stat-disadvantage .value[b-dhksjw38ga] { color: #ef4444; font-weight: 700; }
.stat.stat-equal[b-dhksjw38ga] { background: var(--panelSoft); border-left: 3px solid var(--muted); }
.stat.confidence[b-dhksjw38ga] { background: var(--panelSoft); border-left: 3px solid var(--muted); }
.stat .label[b-dhksjw38ga] { font-weight: 600; color: var(--muted); flex: 0 0 auto; min-width: 40px; font-size: 0.62rem; text-transform: uppercase; }
.stat .value[b-dhksjw38ga] { font-weight: 700; color: var(--text); text-align: right; font-size: 0.68rem; }

.vsDivider[b-dhksjw38ga] { flex: 0 0 auto; padding: 0 8px; font-size: 1.1rem; font-weight: 700; color: var(--textSoft); text-transform: uppercase; letter-spacing: 0.1em; }

/* History Tabs */
.historyTabs[b-dhksjw38ga] {
    display: flex;
    gap: 0;
    margin-bottom: 12px;
    border-bottom: 2px solid var(--border);
}

.historyTab[b-dhksjw38ga] {
    flex: 1;
    padding: 10px 16px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    margin-bottom: -2px;
    white-space: nowrap;
}

.historyTab:hover[b-dhksjw38ga] {
    color: var(--text);
    background: var(--hoverGlow);
}

.historyTab.active[b-dhksjw38ga] {
    color: var(--blue);
    border-bottom-color: var(--blue);
}

.tabCount[b-dhksjw38ga] {
    font-size: 0.75rem;
    font-weight: 800;
    background: var(--borderSoft);
    color: var(--muted);
    padding: 2px 8px;
    border-radius: 999px;
    min-width: 24px;
    text-align: center;
}

.historyTab.active .tabCount[b-dhksjw38ga] {
    background: rgba(37, 99, 235, 0.12);
    color: var(--blue);
}

/* H2H Summary */
.h2hSummary[b-dhksjw38ga] {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
    padding: 10px 16px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.06), rgba(220, 38, 38, 0.06));
    border-radius: 10px;
    border: 1px solid var(--borderSoft);
}

.h2hRecord[b-dhksjw38ga] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.05rem;
    font-weight: 800;
}

.h2hBlue[b-dhksjw38ga] { color: var(--blue); }
.h2hRed[b-dhksjw38ga] { color: var(--red); }
.h2hDash[b-dhksjw38ga] { color: var(--muted); font-weight: 400; }

.noH2hData[b-dhksjw38ga] {
    text-align: center;
    padding: 20px 16px;
    color: var(--muted);
    font-size: 0.92rem;
    font-style: italic;
    background: var(--panelSoft);
    border-radius: 8px;
    border: 1px dashed var(--border);
}

/* ============================
   Compare All Models
   ============================ */

/* Compare All button in model selector bar */
.compareAllCard[b-dhksjw38ga] {
    border-color: rgba(167, 139, 250, 0.3) !important;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.06), rgba(167, 139, 250, 0.04)) !important;
}
.compareAllCard:hover:not(:disabled)[b-dhksjw38ga] {
    border-color: #a78bfa !important;
    background: rgba(167, 139, 250, 0.12) !important;
}
.compareAllCard.selected[b-dhksjw38ga] {
    border-color: #a78bfa !important;
    background: rgba(167, 139, 250, 0.15) !important;
    box-shadow: 0 0 16px rgba(167, 139, 250, 0.15);
}
.compareIcon[b-dhksjw38ga] {
    opacity: 0.85;
}

.tag-compare[b-dhksjw38ga] {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.3), rgba(139, 92, 246, 0.25));
    color: #c4b5fd;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Compare panel — sits inline where ResultBlock normally is */
.comparePanel[b-dhksjw38ga] {
    margin-top: 20px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.04), rgba(59, 130, 246, 0.02));
    border: 1px solid rgba(167, 139, 250, 0.2);
    border-radius: var(--radiusSm);
    padding: 20px;
    box-shadow: inset 0 1px 0 rgba(167, 139, 250, 0.08);
}

.comparePanelHeader[b-dhksjw38ga] {
    margin-bottom: 18px;
    text-align: center;
}
.comparePanelTitle[b-dhksjw38ga] {
    display: block;
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -0.02em;
}
.comparePanelSub[b-dhksjw38ga] {
    display: block;
    font-size: 0.82rem;
    color: var(--muted);
    margin-top: 4px;
}

/* Loading state */
.compareLoading[b-dhksjw38ga] {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}
.compareSpinner[b-dhksjw38ga] {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(167, 139, 250, 0.2);
    border-top-color: #a78bfa;
    border-radius: 50%;
    animation: compareSpin-b-dhksjw38ga 0.8s linear infinite;
}
@keyframes compareSpin-b-dhksjw38ga {
    to { transform: rotate(360deg); }
}

/* Grid layout — 2x2 for breathing room */
.compareGrid[b-dhksjw38ga] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

/* Individual model cards */
.compareCard[b-dhksjw38ga] {
    background: var(--panel);
    border: 2px solid var(--border);
    border-radius: var(--radiusSm);
    padding: 18px 20px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}
.compareCard[b-dhksjw38ga]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--border);
}
.compareCard:hover[b-dhksjw38ga] {
    border-color: rgba(148, 163, 184, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--hoverShadow);
}

/* Card accent top borders */
.compareCard-niche[b-dhksjw38ga]::before {
    background: linear-gradient(90deg, #b45309, #f59e0b);
}
.compareCard-niche[b-dhksjw38ga] {
    border-color: rgba(217, 119, 6, 0.3);
}
.compareCard-premium[b-dhksjw38ga]::before {
    background: linear-gradient(90deg, #7c3aed, #a78bfa);
}
.compareCard-premium[b-dhksjw38ga] {
    border-color: rgba(139, 92, 246, 0.3);
}
.compareCard-avg[b-dhksjw38ga]::before,
.compareAverage[b-dhksjw38ga]::before {
    background: linear-gradient(90deg, #a78bfa, #818cf8, #a78bfa);
}
.compareCard-avg[b-dhksjw38ga],
.compareAverage[b-dhksjw38ga] {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.08), rgba(139, 92, 246, 0.04));
    border-color: rgba(167, 139, 250, 0.35);
}

.compareCardHead[b-dhksjw38ga] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-top: 2px;
    gap: 6px;
}
.compareCardHead > span[b-dhksjw38ga] {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.compareModelName[b-dhksjw38ga] {
    font-weight: 900;
    font-size: 1.05rem;
    color: var(--text);
}
.compareModelName.name-basic[b-dhksjw38ga] { color: #60a5fa; }
.compareModelName.name-niche[b-dhksjw38ga] { color: #f59e0b; }
.compareModelName.name-premium[b-dhksjw38ga] { color: #a78bfa; }
.compareModelName.name-avg[b-dhksjw38ga] { color: #c4b5fd; }

.compareTag[b-dhksjw38ga] {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.compareTag.tag-basic[b-dhksjw38ga] {
    background: rgba(59, 130, 246, 0.15);
    color: var(--blueLight);
}
.compareTag.tag-niche[b-dhksjw38ga] {
    background: linear-gradient(135deg, #b45309, #d97706, #f59e0b);
    color: #fff;
}
.compareTag.tag-premium[b-dhksjw38ga] {
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: #fff;
}
.compareTag.tag-avg[b-dhksjw38ga] {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.3), rgba(139, 92, 246, 0.25));
    color: #c4b5fd;
    border: 1px solid rgba(167, 139, 250, 0.3);
}

/* Winner/confidence row */
.compareWinnerRow[b-dhksjw38ga] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.compareWinnerBadge[b-dhksjw38ga] {
    font-size: 0.75rem;
    font-weight: 900;
    padding: 5px 12px;
    border-radius: 7px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.compareWinnerBadge.badge-blue[b-dhksjw38ga] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.12));
    color: var(--blueLight);
    border: 1px solid rgba(59, 130, 246, 0.25);
}
.compareWinnerBadge.badge-red[b-dhksjw38ga] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.12));
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.25);
}
.compareConfBadge[b-dhksjw38ga] {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 6px;
    letter-spacing: 0.04em;
}

/* Bars */
.compareBars[b-dhksjw38ga] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.compareBarRow[b-dhksjw38ga] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.compareTeam[b-dhksjw38ga] {
    font-size: 0.78rem;
    font-weight: 700;
    min-width: 36px;
    max-width: 80px;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.compareTeam.blue[b-dhksjw38ga] { color: var(--blue); }
.compareTeam.red[b-dhksjw38ga] { color: var(--red); }

.compareBarWrap[b-dhksjw38ga] {
    flex: 1;
    height: 12px;
    background: var(--hoverGlow);
    border-radius: 6px;
    overflow: hidden;
}

.compareBar[b-dhksjw38ga] {
    height: 100%;
    border-radius: 6px;
    transition: width 0.5s ease;
}
.compareBar.blue[b-dhksjw38ga] {
    background: linear-gradient(90deg, var(--blue), var(--blueLight));
}
.compareBar.red[b-dhksjw38ga] {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

.comparePct[b-dhksjw38ga] {
    font-size: 0.95rem;
    font-weight: 900;
    color: var(--muted);
    min-width: 52px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.comparePct.winner[b-dhksjw38ga] {
    color: var(--text);
}

/* Odds row */
.compareOdds[b-dhksjw38ga] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid var(--borderSoft);
    font-size: 0.82rem;
}
.compareOddsLabel[b-dhksjw38ga] {
    color: var(--muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.68rem;
}
.compareOddsValue[b-dhksjw38ga] {
    font-weight: 800;
    font-size: 0.92rem;
}
.compareOddsValue .rdBlue[b-dhksjw38ga] { color: var(--blueLight); }
.compareOddsValue .rdRed[b-dhksjw38ga] { color: #f87171; }

/* Verdict */
.compareVerdict[b-dhksjw38ga] {
    margin-top: 16px;
    padding: 14px 18px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    font-weight: 700;
}
.verdict-agree[b-dhksjw38ga] {
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: #4ade80;
}
.verdict-split[b-dhksjw38ga] {
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.25);
    color: #fbbf24;
}
.verdictIcon[b-dhksjw38ga] {
    font-size: 1.2rem;
}

/* Locked / Premium overlay cards */
.compareCard-locked[b-dhksjw38ga] {
    position: relative;
    overflow: hidden;
}

.compareCard-locked .lockedContent[b-dhksjw38ga] {
    filter: blur(8px);
    -webkit-filter: blur(8px);
    pointer-events: none;
    user-select: none;
    opacity: 0.5;
}

.premiumOverlay[b-dhksjw38ga] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 2;
    color: #c4b5fd;
    background: var(--overlayBg);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.premiumOverlay svg[b-dhksjw38ga] {
    stroke: #a78bfa;
    opacity: 0.9;
}

.premiumOverlayText[b-dhksjw38ga] {
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: var(--text);
}

.premiumOverlayBtn[b-dhksjw38ga] {
    display: inline-block;
    padding: 7px 22px;
    border-radius: 8px;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff;
    font-weight: 800;
    font-size: 0.82rem;
    text-decoration: none;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    transition: all 0.2s ease;
    border: none;
}

.premiumOverlayBtn:hover[b-dhksjw38ga] {
    background: linear-gradient(135deg, #6d28d9, #9333ea);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
}

@media (max-width: 640px) {
    .compareGrid[b-dhksjw38ga] {
        grid-template-columns: 1fr;
    }
    .compareTeam[b-dhksjw38ga] {
        min-width: 30px;
        max-width: 60px;
    }
}
/* /Components/Pages/PremiumPreviewA.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   PREMIUM PREVIEW A — Full dedicated landing page mockup
   Internal preview only. English-only, fake numbers.
═══════════════════════════════════════════════════════════════════ */

.pmaPage[b-9bd1osw5e6] {
    color: var(--text);
    overflow-x: hidden;
}

/* ════════════════════ HERO ════════════════════ */
.pmaHero[b-9bd1osw5e6] {
    position: relative;
    padding: 100px 24px 80px;
    isolation: isolate;
    text-align: center;
    overflow: hidden;
}

.pmaHeroBg[b-9bd1osw5e6] {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.pmaHeroGlowGold[b-9bd1osw5e6],
.pmaHeroGlowCyan[b-9bd1osw5e6],
.pmaHeroGlowPurple[b-9bd1osw5e6] {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.35;
    animation: pmaFloat-b-9bd1osw5e6 14s ease-in-out infinite;
}

.pmaHeroGlowGold[b-9bd1osw5e6] {
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, #f59e0b 0%, transparent 70%);
}

.pmaHeroGlowCyan[b-9bd1osw5e6] {
    top: 40%;
    right: -200px;
    background: radial-gradient(circle, #22d3ee 0%, transparent 70%);
    animation-delay: -5s;
}

.pmaHeroGlowPurple[b-9bd1osw5e6] {
    bottom: -200px;
    left: -100px;
    background: radial-gradient(circle, #a78bfa 0%, transparent 70%);
    animation-delay: -9s;
}

@keyframes pmaFloat-b-9bd1osw5e6 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, -20px) scale(1.05); }
}

.pmaHeroGlowGold[b-9bd1osw5e6] {
    animation-name: pmaFloatGold-b-9bd1osw5e6;
}
@keyframes pmaFloatGold-b-9bd1osw5e6 {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.08); }
}

.pmaHeroInner[b-9bd1osw5e6] {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

.pmaHeroEyebrow[b-9bd1osw5e6] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.05));
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 100px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #f59e0b;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 24px;
}

.pmaHeroEyebrowDot[b-9bd1osw5e6] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fbbf24;
    box-shadow: 0 0 12px #fbbf24;
    animation: pmaPulse-b-9bd1osw5e6 1.8s ease-in-out infinite;
}

@keyframes pmaPulse-b-9bd1osw5e6 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.pmaHeroTitle[b-9bd1osw5e6] {
    font-size: clamp(2.4rem, 6vw, 4.2rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.035em;
    margin: 0 0 22px 0;
    color: var(--text);
}

.pmaHeroTitleAccent[b-9bd1osw5e6] {
    background: linear-gradient(135deg, #fbbf24 0%, #38bdf8 50%, #c084fc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.pmaHeroSub[b-9bd1osw5e6] {
    font-size: 1.15rem;
    color: var(--muted);
    line-height: 1.55;
    max-width: 640px;
    margin: 0 auto 36px;
}

.pmaHeroCtaRow[b-9bd1osw5e6] {
    display: flex;
    gap: 14px;
    justify-content: center;
    margin-bottom: 60px;
    flex-wrap: wrap;
}

.pmaCtaPrimary[b-9bd1osw5e6],
.pmaCtaSecondary[b-9bd1osw5e6],
.pmaPricingCta[b-9bd1osw5e6] {
    /* These render as <button> elements (changed from <a> to bypass Blazor's
       enhanced-nav interception on hash anchors and on redirect-only endpoints).
       Explicit border/cursor/font-family resets keep them visually identical to
       the prior anchor-styled CTAs. */
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.pmaCtaPrimary[b-9bd1osw5e6],
.pmaCtaSecondary[b-9bd1osw5e6] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
}

.pmaCtaPrimary[b-9bd1osw5e6] {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #451a03;
    box-shadow: 0 10px 30px -10px rgba(245, 158, 11, 0.5), 0 0 0 1px rgba(251, 191, 36, 0.2);
}

.pmaCtaPrimary:hover[b-9bd1osw5e6] {
    transform: translateY(-2px);
    box-shadow: 0 14px 38px -10px rgba(245, 158, 11, 0.7), 0 0 0 1px rgba(251, 191, 36, 0.4);
}

.pmaCtaSecondary[b-9bd1osw5e6] {
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--border);
}

.pmaCtaSecondary:hover[b-9bd1osw5e6] {
    border-color: var(--text);
    transform: translateY(-2px);
}

.pmaTicker[b-9bd1osw5e6] {
    display: inline-flex;
    align-items: center;
    gap: 28px;
    padding: 16px 28px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 16px;
    backdrop-filter: blur(20px);
    flex-wrap: wrap;
    justify-content: center;
}

.pmaTickerItem[b-9bd1osw5e6] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.pmaTickerValue[b-9bd1osw5e6] {
    font-size: 1.35rem;
    font-weight: 800;
    color: #22c55e;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* Negative-ROI override for the Consensus ROI ticker chip. The default chip
   colour is green (the page leans on a "positive numbers = good news" frame),
   so a losing month rendered green would mislead — flip to red. */
.pmaTickerValue.pmaTickerValueNegative[b-9bd1osw5e6] {
    color: #ef4444;
}

.pmaTickerLabel[b-9bd1osw5e6] {
    font-size: 0.72rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.pmaTickerDot[b-9bd1osw5e6] {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--border);
}

/* ════════════════════ SECTIONS ════════════════════ */
.pmaSection[b-9bd1osw5e6] {
    max-width: 1180px;
    margin: 0 auto;
    padding: 80px 24px;
}

.pmaSectionDark[b-9bd1osw5e6] {
    background: linear-gradient(180deg, transparent, rgba(15, 23, 42, 0.4), transparent);
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.pmaSectionDark > *[b-9bd1osw5e6] {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

.pmaSectionHeader[b-9bd1osw5e6] {
    text-align: center;
    margin-bottom: 56px;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

.pmaSectionTag[b-9bd1osw5e6] {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 100px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 16px;
}

.pmaSectionTagGold[b-9bd1osw5e6] {
    background: rgba(251, 191, 36, 0.12);
    color: #f59e0b;
    border: 1px solid rgba(251, 191, 36, 0.25);
}

.pmaSectionTagGreen[b-9bd1osw5e6] {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.pmaSectionTitle[b-9bd1osw5e6] {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0 0 14px 0;
    color: var(--text);
}

.pmaSectionSub[b-9bd1osw5e6] {
    font-size: 1.02rem;
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
}

/* ════════════════════ MODEL GRID ════════════════════ */
.pmaModelGrid[b-9bd1osw5e6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

.pmaModelCard[b-9bd1osw5e6] {
    position: relative;
    padding: 26px 24px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.pmaModelCard:hover[b-9bd1osw5e6] {
    transform: translateY(-4px);
}

.pmaModelCardGlow[b-9bd1osw5e6] {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.25;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.pmaModelCard:hover .pmaModelCardGlow[b-9bd1osw5e6] {
    opacity: 0.45;
}

.pmaModelCardAmber:hover[b-9bd1osw5e6] { border-color: rgba(251, 191, 36, 0.4); }
.pmaModelCardAmber .pmaModelCardGlow[b-9bd1osw5e6] { background: #fbbf24; }

.pmaModelCardPurple:hover[b-9bd1osw5e6] { border-color: rgba(167, 139, 250, 0.4); }
.pmaModelCardPurple .pmaModelCardGlow[b-9bd1osw5e6] { background: #a78bfa; }

.pmaModelCardCyan:hover[b-9bd1osw5e6] { border-color: rgba(34, 211, 238, 0.4); }
.pmaModelCardCyan .pmaModelCardGlow[b-9bd1osw5e6] { background: #22d3ee; }

.pmaModelCardBlue:hover[b-9bd1osw5e6] { border-color: rgba(96, 165, 250, 0.4); }
.pmaModelCardBlue .pmaModelCardGlow[b-9bd1osw5e6] { background: #60a5fa; }

/* BEST PERFORMER highlight — composes with the model's themed border so the
   identity color isn't lost. Soft green wash + bumped border opacity + faint
   glow ring around the card so the "this one's the leader right now" cue
   reads at a glance without overpowering the rest of the grid. */
.pmaModelCardBest[b-9bd1osw5e6] {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.06) 0%, var(--panel) 60%);
    border-color: rgba(74, 222, 128, 0.4) !important;
    box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.18), 0 6px 24px rgba(74, 222, 128, 0.1);
}
.pmaModelCardBest:hover[b-9bd1osw5e6] {
    border-color: rgba(74, 222, 128, 0.55) !important;
}

/* BEST PERFORMER chip — same green pill we use on the Value Engine SERIES /
   GAMES tiles + the Picks dropdown so users learn one visual for "this one's
   the leader". */
.pmaModelBadgeBest[b-9bd1osw5e6] {
    background: rgba(74, 222, 128, 0.18);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.45);
}

.pmaModelCardFeatured[b-9bd1osw5e6] {
    grid-column: span 2;
    background: linear-gradient(135deg, var(--panel), rgba(34, 211, 238, 0.04));
    border-color: rgba(34, 211, 238, 0.25);
}

.pmaModelCardFree[b-9bd1osw5e6] {
    opacity: 0.78;
}

.pmaModelFeaturedRibbon[b-9bd1osw5e6],
.pmaModelFreeBadge[b-9bd1osw5e6] {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 4px 10px;
    border-radius: 100px;
    z-index: 1;
}

.pmaModelFeaturedRibbon[b-9bd1osw5e6] {
    background: linear-gradient(135deg, #22d3ee, #0891b2);
    color: #042f2e;
}

.pmaModelFreeBadge[b-9bd1osw5e6] {
    background: var(--bg);
    color: var(--muted);
    border: 1px solid var(--border);
}

.pmaModelCardHead[b-9bd1osw5e6] {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
    position: relative;
}

.pmaModelIcon[b-9bd1osw5e6] {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pmaModelIconAmber[b-9bd1osw5e6] { background: rgba(251, 191, 36, 0.12); color: #fbbf24; }
.pmaModelIconPurple[b-9bd1osw5e6] { background: rgba(167, 139, 250, 0.12); color: #a78bfa; }
.pmaModelIconCyan[b-9bd1osw5e6] { background: rgba(34, 211, 238, 0.12); color: #22d3ee; }
.pmaModelIconBlue[b-9bd1osw5e6] { background: rgba(96, 165, 250, 0.12); color: #60a5fa; }

.pmaModelName[b-9bd1osw5e6] {
    display: block;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.015em;
}

.pmaModelTag[b-9bd1osw5e6] {
    display: block;
    font-size: 0.72rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-top: 2px;
}

.pmaModelDesc[b-9bd1osw5e6] {
    font-size: 0.9rem;
    color: var(--muted);
    line-height: 1.55;
    margin: 0 0 18px 0;
    position: relative;
}

.pmaModelStats[b-9bd1osw5e6] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    position: relative;
}

.pmaModelStat[b-9bd1osw5e6] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pmaModelStatValue[b-9bd1osw5e6] {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.pmaModelStatValueAmber[b-9bd1osw5e6] { color: #fbbf24; }
.pmaModelStatValuePurple[b-9bd1osw5e6] { color: #a78bfa; }
.pmaModelStatValueCyan[b-9bd1osw5e6] { color: #22d3ee; }
.pmaModelStatValueBlue[b-9bd1osw5e6] { color: #60a5fa; }
/* ROI value: green for positive, red for negative — applied uniformly to every
   model regardless of brand color, so subscribers can scan the cards and see at
   a glance which model is up vs. down on the active stake-window. Muted gray
   when there's no data (e.g., model hasn't shipped any +EV picks yet). */
.pmaModelStatValuePos[b-9bd1osw5e6] { color: #4ade80; }
.pmaModelStatValueNeg[b-9bd1osw5e6] { color: #f87171; }
.pmaModelStatValueMuted[b-9bd1osw5e6] { color: var(--muted, #9ca3af); }

/* Window toggle (All time / Last 30 days) — pill-style segmented control. Each
   model card has its own toggle so stat windows can vary card-to-card. */
.pmaWindowToggle[b-9bd1osw5e6] {
    display: inline-flex;
    gap: 0;
    padding: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
/* Card-scoped variant — slightly more compact so the toggle doesn't dominate
   the card's modest vertical space, and full-width via flex so the two
   buttons evenly fill the card width below the description. */
.pmaWindowToggleCard[b-9bd1osw5e6] {
    display: flex;
    margin: 8px 0 16px;
    width: fit-content;
}
.pmaWindowOpt[b-9bd1osw5e6] {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--muted, #9ca3af);
    padding: 6px 14px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.pmaWindowOpt:hover[b-9bd1osw5e6] {
    color: var(--text, #e5e7eb);
}
.pmaWindowOptActive[b-9bd1osw5e6] {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}
.pmaWindowOptActive:hover[b-9bd1osw5e6] {
    color: #fbbf24;
}

/* Last-5 winning-picks proof rows. Each row carries enough info that a
   prospective subscriber can audit the claim themselves: date · league ·
   model · matchup with the picked team highlighted · edge · odds · WON +Xu.
   Mirrors the row spacing of the Stake Tracker history list so the visual
   language stays consistent across the site. */
.pmaPicksProof[b-9bd1osw5e6] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}
.pmaPickProofRow[b-9bd1osw5e6] {
    display: grid;
    grid-template-columns: 96px auto minmax(0, 1fr) 76px auto auto;
    gap: 14px;
    align-items: center;
    padding: 12px 18px;
    border-radius: 12px;
    background: rgba(74, 222, 128, 0.04);
    border: 1px solid rgba(74, 222, 128, 0.15);
}
.pmaPickProofDate[b-9bd1osw5e6] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.pmaPickProofDateText[b-9bd1osw5e6] {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text, #e5e7eb);
}
.pmaPickProofLeague[b-9bd1osw5e6] {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--muted, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pmaPickProofModel[b-9bd1osw5e6] {
    /* Inherits pmaPickModelChip / pmaPickModelChip-{color} styling */
}
/* Multi-model chip column. When several premium models flag the same +EV pick
   and all of them win, we collapse them into one row with a chip per model
   instead of stacking N near-identical rows. The flex layout lets the chips
   wrap on narrow screens; on desktop they sit horizontally in stable
   Consensus → LightGBM → PCA Sweep order. */
.pmaPickProofModels[b-9bd1osw5e6] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.pmaPickProofMatch[b-9bd1osw5e6] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
}
.pmaPickProofTeam[b-9bd1osw5e6] {
    color: var(--muted, #9ca3af);
    font-weight: 600;
}
.pmaPickProofTeam.pmaPickProofChosen[b-9bd1osw5e6] {
    color: #4ade80;
    font-weight: 800;
}
.pmaPickProofVs[b-9bd1osw5e6] {
    color: var(--muted, #9ca3af);
    font-size: 0.7rem;
    opacity: 0.7;
}
/* Average EV cell — small label on top so users know this is averaged across
   the models that agreed (vs a single model's per-row EV which would be
   misleading when multiple chips are shown). */
.pmaPickProofEdge[b-9bd1osw5e6] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
}
.pmaPickProofEdgeLabel[b-9bd1osw5e6] {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--muted, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pmaPickProofEdgeValue[b-9bd1osw5e6] {
    color: #4ade80;
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
.pmaPickProofOdds[b-9bd1osw5e6] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.pmaPickProofOddsTeam[b-9bd1osw5e6] {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--muted, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pmaPickProofOddsNum[b-9bd1osw5e6] {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--text, #e5e7eb);
    font-variant-numeric: tabular-nums;
}
.pmaPickProofResult[b-9bd1osw5e6] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}
.pmaPickProofWon[b-9bd1osw5e6] {
    font-size: 0.65rem;
    font-weight: 800;
    color: #4ade80;
    background: rgba(74, 222, 128, 0.12);
    border: 1px solid rgba(74, 222, 128, 0.3);
    padding: 2px 8px;
    border-radius: 6px;
    letter-spacing: 0.04em;
}

@media (max-width: 720px) {
    .pmaPickProofRow[b-9bd1osw5e6] {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "date models"
            "match match"
            "edge odds"
            "result result";
        row-gap: 8px;
    }
    .pmaPickProofDate[b-9bd1osw5e6] { grid-area: date; }
    .pmaPickProofModels[b-9bd1osw5e6] { grid-area: models; justify-self: end; flex-wrap: wrap; justify-content: flex-end; }
    .pmaPickProofMatch[b-9bd1osw5e6] { grid-area: match; }
    .pmaPickProofEdge[b-9bd1osw5e6] { grid-area: edge; align-items: flex-start; text-align: left; }
    .pmaPickProofOdds[b-9bd1osw5e6] { grid-area: odds; }
    .pmaPickProofResult[b-9bd1osw5e6] { grid-area: result; flex-direction: row; align-items: center; justify-content: flex-start; }
}

/* Model-name color tags so the header reads in the same hue as the rest of the
   card's accent — mirrors the Home page spotlight where each model's name is
   themed. White-on-dark stays default; themed names get a colored gradient. */
.pmaModelNameAmber[b-9bd1osw5e6]  { color: #fbbf24; }
.pmaModelNamePurple[b-9bd1osw5e6] { color: #a78bfa; }
.pmaModelNameCyan[b-9bd1osw5e6]   { color: #22d3ee; }
.pmaModelNameBlue[b-9bd1osw5e6]   { color: #60a5fa; }

/* Badge row mirrors Home.razor's spotlight pair (PREMIUM + character tag).
   The shared `.modelBadge` and `.badge*` classes are defined on Home.razor.css
   — those styles live in the same Blazor app, but Razor scoped CSS only applies
   within its declaring component, so we redefine the SAME look here to keep
   PremiumPreviewA self-contained. Keep colors / sizes in lockstep with Home. */
.pmaModelHeadText[b-9bd1osw5e6] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pmaModelBadgeRow[b-9bd1osw5e6] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
[b-9bd1osw5e6] .modelBadge {
    font-size: 0.6rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
[b-9bd1osw5e6] .badgeBasic {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}
[b-9bd1osw5e6] .badgePremium {
    background: linear-gradient(135deg, #4c1d95, #6d28d9, #9333ea);
    color: #fff;
    border: 1px solid rgba(147, 51, 234, 0.55);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 0 8px rgba(196, 181, 253, 0.18);
}
[b-9bd1osw5e6] .badgeMetaSavvy {
    background: linear-gradient(135deg, #b45309, #d97706, #f59e0b);
    color: #fff;
    border: 1px solid rgba(245, 158, 11, 0.4);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
[b-9bd1osw5e6] .badgeHyperTuned {
    background: linear-gradient(135deg, #6d28d9, #8b5cf6, #a78bfa);
    color: #fff;
    border: 1px solid rgba(167, 139, 250, 0.4);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
[b-9bd1osw5e6] .badgeRiskBalanced {
    background: linear-gradient(135deg, #0e7490, #06b6d4, #22d3ee);
    color: #fff;
    border: 1px solid rgba(34, 211, 238, 0.4);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ── Blurred Value Picks teaser ──────────────────────────────────────────
   Real rows from the upcoming-+EV feed with team names and odds masked. The
   model + edge are visible (those are the headline value proposition); the
   actual pick stays behind the upgrade. */



.pmaPickModelChip[b-9bd1osw5e6] {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 5px 10px;
    border-radius: 6px;
    letter-spacing: 0.02em;
}
.pmaPickModelChip-amber[b-9bd1osw5e6]  { background: rgba(251, 191, 36, 0.15); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.3); }
.pmaPickModelChip-purple[b-9bd1osw5e6] { background: rgba(167, 139, 250, 0.15); color: #a78bfa; border: 1px solid rgba(167, 139, 250, 0.3); }
.pmaPickModelChip-cyan[b-9bd1osw5e6]   { background: rgba(34, 211, 238, 0.15); color: #22d3ee; border: 1px solid rgba(34, 211, 238, 0.3); }
.pmaPickModelChip-blue[b-9bd1osw5e6]   { background: rgba(96, 165, 250, 0.15); color: #60a5fa; border: 1px solid rgba(96, 165, 250, 0.3); }

/* Series / Games tab strip above the notable +EV proof rows.
   Pill-style, centered, sized large enough that this section reads as a
   real navigation surface rather than a tiny filter chip. Two-pill row sits
   inside a single bordered shell so the active treatment is a contiguous
   slide between scopes — feels like one control, not two buttons.
   `width: fit-content + margin: 0 auto` is what actually centers a flex
   container inside a block-level parent. */
.pmaPicksTabs[b-9bd1osw5e6] {
    display: flex;
    width: fit-content;
    margin: 0 auto 24px;
    padding: 6px;
    gap: 4px;
    background: rgba(74, 222, 128, 0.05);
    border: 1px solid rgba(74, 222, 128, 0.2);
    border-radius: 14px;
}
.pmaPicksTab[b-9bd1osw5e6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    padding: 12px 28px;
    background: transparent;
    color: var(--muted, #9ca3af);
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 0.92rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.pmaPicksTab:hover[b-9bd1osw5e6] {
    background: rgba(74, 222, 128, 0.08);
    color: var(--text, #e5e7eb);
}
.pmaPicksTabActive[b-9bd1osw5e6] {
    background: rgba(74, 222, 128, 0.18);
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.5);
    box-shadow: 0 1px 8px rgba(74, 222, 128, 0.15);
}
.pmaPicksTabActive:hover[b-9bd1osw5e6] {
    background: rgba(74, 222, 128, 0.22);
    color: #4ade80;
}
/* Blurred team + odds blocks — visible bar shapes so the user understands the
   layout but can't read the underlying pick. `user-select: none` makes drag-
   highlight impossible so the trick doesn't fall apart on tablet. */



.pmaPickBlurredOdds-team[b-9bd1osw5e6] {
    width: 36px; height: 14px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.10);
    filter: blur(1px);
}
.pmaPickBlurredOdds-num[b-9bd1osw5e6] {
    width: 44px; height: 18px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.14);
    filter: blur(1px);
}
@keyframes pmaShimmer-b-9bd1osw5e6 {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.pmaPicksDisclaimer[b-9bd1osw5e6] {
    text-align: center;
    font-size: 0.78rem;
    color: var(--muted);
    margin: 16px 0 0;
    font-style: italic;
}

.pmaModelStatLabel[b-9bd1osw5e6] {
    font-size: 0.65rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.pmaModelsFootnote[b-9bd1osw5e6] {
    text-align: center;
    font-size: 0.78rem;
    color: var(--muted);
    margin-top: 28px;
    line-height: 1.5;
}

/* ════════════════════ VALUE PICKS MOCK ════════════════════ */








































/* Pick teaser odds block — mirrors .pickPickBlock on the real /picks page:
   team name (small, neutral) stacked above the odds (bold gold). Replaces the
   prior "@ 1.92" inline glyph which felt off-pattern next to the real page. */


















/* ════════════════════ PERKS ════════════════════ */
.pmaPerksGrid[b-9bd1osw5e6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.pmaPerkCard[b-9bd1osw5e6] {
    padding: 28px 24px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 16px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.pmaPerkCard:hover[b-9bd1osw5e6] {
    transform: translateY(-2px);
    border-color: var(--muted);
}

.pmaPerkIcon[b-9bd1osw5e6] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.pmaPerkIconRed[b-9bd1osw5e6] { background: rgba(239, 68, 68, 0.12); color: #ef4444; }
.pmaPerkIconAmber[b-9bd1osw5e6] { background: rgba(251, 191, 36, 0.12); color: #fbbf24; }
.pmaPerkIconPurple[b-9bd1osw5e6] { background: rgba(167, 139, 250, 0.12); color: #a78bfa; }
.pmaPerkIconCyan[b-9bd1osw5e6] { background: rgba(34, 211, 238, 0.12); color: #22d3ee; }

.pmaPerkTitle[b-9bd1osw5e6] {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0 0 8px 0;
    color: var(--text);
    letter-spacing: -0.015em;
}

.pmaPerkText[b-9bd1osw5e6] {
    font-size: 0.92rem;
    color: var(--muted);
    line-height: 1.55;
    margin: 0;
}

/* ════════════════════ PRICING ════════════════════ */
.pmaSectionPricing[b-9bd1osw5e6] {
    text-align: center;
}

.pmaPricingWrap[b-9bd1osw5e6] {
    display: flex;
    justify-content: center;
}

.pmaPricingCard[b-9bd1osw5e6] {
    position: relative;
    max-width: 480px;
    width: 100%;
    padding: 36px;
    background: linear-gradient(180deg, rgba(251, 191, 36, 0.05) 0%, var(--panel) 26%);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 22px;
    overflow: hidden;
    text-align: left;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(251, 191, 36, 0.15);
}

.pmaPricingCardGlow[b-9bd1osw5e6] {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, #f59e0b 0%, transparent 70%);
    filter: blur(80px);
    opacity: 0.25;
    pointer-events: none;
}

.pmaPricingHeader[b-9bd1osw5e6] {
    position: relative;
    margin-bottom: 28px;
}

.pmaPricingTier[b-9bd1osw5e6] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 800;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pmaPricingPlans[b-9bd1osw5e6] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px;
    position: relative;
}

.pmaPricingPlan[b-9bd1osw5e6] {
    /* Switched from horizontal-baseline flex to a vertical column so the new
       structure stacks cleanly:
         1. Plan label (Monthly / Yearly)
         2. Compare row: ~~original~~ + percent-off chip
         3. Price row: big number + per-unit suffix
         4. Tagline: "Early Launch Discount"
       Top padding leaves room for the absolute-positioned ribbon. */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 22px 18px 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pmaPricingPlan:hover[b-9bd1osw5e6] {
    border-color: var(--muted);
}

.pmaPricingPlanActive[b-9bd1osw5e6] {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(245, 158, 11, 0.02));
    border-color: rgba(251, 191, 36, 0.4);
    box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.15);
}

.pmaPricingPlanLabel[b-9bd1osw5e6] {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.005em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Ribbon — sits at the top of the card, centred over the border so it reads as
   a "label tab" attached to the card. Two variants:
     popular = purple (matches MOST POPULAR in the reference)
     value   = green  (matches BEST VALUE in the reference) */
.pmaPricingPlanRibbon[b-9bd1osw5e6] {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    padding: 4px 12px;
    border-radius: 999px;
    white-space: nowrap;
    line-height: 1.2;
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.6);
}
.pmaPricingPlanRibbonPopular[b-9bd1osw5e6] {
    background: linear-gradient(135deg, #a78bfa, #6366f1);
    color: #fff;
}
.pmaPricingPlanRibbonValue[b-9bd1osw5e6] {
    background: linear-gradient(135deg, #34d399, #10b981);
    color: #0b1220;
}

/* Compare row holds the strikethrough original + percent-off chip side by side. */
.pmaPricingPlanCompare[b-9bd1osw5e6] {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}

/* Price row — large bold price + small per-unit suffix on the same baseline. */
.pmaPricingPlanPriceRow[b-9bd1osw5e6] {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 2px;
}

.pmaPricingDiscount[b-9bd1osw5e6] {
    /* Brightened: the chip is now the inline discount signal next to the
       strikethrough (it used to sit next to the plan label as a side-tag).
       Higher background opacity + tighter padding gives it more visual weight
       so the percent-off reads as the headline savings number. */
    font-size: 0.72rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(34, 197, 94, 0.22);
    color: #4ade80;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.pmaPricingPlanPrice[b-9bd1osw5e6] {
    /* Big price — larger than the previous 1.5rem to match the reference's
       visual hierarchy where the launch price dominates the card. */
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.035em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Original-price strikethrough — sits on the compare row ABOVE the new price.
   Lighter and smaller than before because the eye should land on the big new
   price; the strikethrough is the "anchor" reference price, not the headline. */
.pmaPricingPlanOriginal[b-9bd1osw5e6] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--muted);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: rgba(248, 113, 113, 0.7);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

/* Tagline ("Early Launch Discount") under the price row. Centered to match the
   stacked card layout. */
.pmaPricingPlanNote[b-9bd1osw5e6] {
    margin-top: 8px;
    font-size: 0.78rem;
    color: var(--muted);
    letter-spacing: 0.01em;
    text-align: center;
}

.pmaPricingPlanPer[b-9bd1osw5e6] {
    font-size: 0.85rem;
    color: var(--muted);
    font-weight: 500;
}

/* Founder tier — collapsible disclosure that replaced the old perks checklist.
   Gold-themed (this is the premium page, where gold is the allowed emphasis
   accent) so it reads as a prestige tier. CSS-only expand via a hidden checkbox:
   the grid-template-rows 0fr->1fr trick animates height with no JS. */
.pmaFounder[b-9bd1osw5e6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 12px 0 2px;
    width: 100%;
}

.pmaFounderToggle[b-9bd1osw5e6] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.pmaFounderTrigger[b-9bd1osw5e6] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 20px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: #fcd34d;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.18), rgba(245, 158, 11, 0.07));
    border: 1px solid rgba(251, 191, 36, 0.45);
    box-shadow: 0 2px 14px -6px rgba(251, 191, 36, 0.4);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    user-select: none;
}

.pmaFounderTrigger:hover[b-9bd1osw5e6] {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.28), rgba(245, 158, 11, 0.13));
    border-color: rgba(251, 191, 36, 0.65);
    box-shadow: 0 0 26px -6px rgba(251, 191, 36, 0.55);
}

.pmaFounderToggle:focus-visible + .pmaFounderTrigger[b-9bd1osw5e6] {
    outline: 2px solid rgba(251, 191, 36, 0.7);
    outline-offset: 2px;
}

.pmaFounderChevron[b-9bd1osw5e6] {
    transition: transform 0.25s ease;
}

.pmaFounderToggle:checked + .pmaFounderTrigger .pmaFounderChevron[b-9bd1osw5e6] {
    transform: rotate(180deg);
}

.pmaFounderPanelWrap[b-9bd1osw5e6] {
    display: grid;
    grid-template-rows: 0fr;
    width: 100%;
    transition: grid-template-rows 0.3s ease;
}

.pmaFounderToggle:checked ~ .pmaFounderPanelWrap[b-9bd1osw5e6] {
    grid-template-rows: 1fr;
}

.pmaFounderPanelInner[b-9bd1osw5e6] {
    overflow: hidden;
    min-height: 0;
}

.pmaFounderBenefits[b-9bd1osw5e6] {
    list-style: none;
    margin: 12px 0 2px;
    padding: 16px 18px;
    background: linear-gradient(180deg, rgba(251, 191, 36, 0.08), rgba(251, 191, 36, 0.02));
    border: 1px solid rgba(251, 191, 36, 0.18);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.pmaFounderBenefits li[b-9bd1osw5e6] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--text);
    text-align: left;
}

.pmaFounderBenefits li svg[b-9bd1osw5e6] {
    flex-shrink: 0;
    margin-top: 3px;
}

.pmaPricingCta[b-9bd1osw5e6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 20px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #451a03;
    text-decoration: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 800;
    box-shadow: 0 10px 30px -10px rgba(245, 158, 11, 0.6);
    transition: all 0.2s ease;
    position: relative;
}

.pmaPricingCta:hover[b-9bd1osw5e6] {
    transform: translateY(-2px);
    box-shadow: 0 14px 38px -10px rgba(245, 158, 11, 0.8);
}

.pmaPricingTrust[b-9bd1osw5e6] {
    margin-top: 14px;
    font-size: 0.78rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
}

.pmaPricingTrustBrand[b-9bd1osw5e6] {
    color: #635bff;
    font-weight: 700;
}

/* ════════════════════ FOOTER STRIP ════════════════════ */
.pmaFooterStrip[b-9bd1osw5e6] {
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 24px 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 0.85rem;
}

.pmaFooterStripItem[b-9bd1osw5e6] {
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0.75;
}

.pmaFooterStripDot[b-9bd1osw5e6] {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--border);
}

/* ════════════════════ PREMIUM MARKETS ════════════════════ */
/* The illustrative mock market cards (pmaMarketGrid / pmaMarketCard / bars / monograms)
   were replaced by real <UpcomingMatchCard> instances rendered in a global .upcomingGrid,
   so their bespoke styles were removed. Only .pmaMarketSampleChip survives — it's still
   used by the EV-alert showcase below. */
.pmaMarketSampleChip[b-9bd1osw5e6] {
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 7px;
    border-radius: 100px;
    background: var(--bg);
    border: 1px dashed var(--border);
}

/* ── EMAIL ALERT SHOWCASE ─────────────────────────────────────────────── */
.pmaAlertFootnote[b-9bd1osw5e6] {
    font-size: 0.78rem;
    color: var(--muted);
    margin: 0;
}

/* Two halves: filter card (left) + template email (right). */
.pmaAlertGrid[b-9bd1osw5e6] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    align-items: start;
    max-width: 1040px;
    margin: 0 auto;
}

.pmaAlertCol[b-9bd1osw5e6] {
    min-width: 0;
}

.pmaAlertColHeading[b-9bd1osw5e6] {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 12px;
    letter-spacing: -0.01em;
    text-align: center;
}

/* Template email — mimics the real inbox alert. */
.pmaEmailPreview[b-9bd1osw5e6] {
    padding: 24px;
    background: #1e293b;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.6);
}

.pmaEmailLogo[b-9bd1osw5e6] {
    text-align: center;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #e2e8f0;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #334155;
}
.pmaEmailLogo span[b-9bd1osw5e6] { color: #22d3ee; }

.pmaEmailPillRow[b-9bd1osw5e6] {
    text-align: center;
    margin-bottom: 14px;
}

/* +EV pill — mirrors the cyan pill in the production email header. */
.pmaEmailEvPill[b-9bd1osw5e6] {
    display: inline-block;
    background: rgba(34, 211, 238, 0.12);
    border: 1px solid rgba(34, 211, 238, 0.35);
    color: #22d3ee;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 4px 12px;
}

.pmaEmailGreeting[b-9bd1osw5e6] {
    font-size: 1rem;
    color: #e2e8f0;
    font-weight: 700;
    margin: 0 0 4px;
}

.pmaEmailCaption[b-9bd1osw5e6] {
    font-size: 0.88rem;
    color: #cbd5e1;
    margin: 0 0 14px;
}

.pmaEmailMatch[b-9bd1osw5e6] {
    text-align: center;
    background: #0f172a;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 14px;
}

.pmaEmailTeams[b-9bd1osw5e6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 1.05rem;
    font-weight: 800;
    color: #e2e8f0;
}

.pmaEmailVs[b-9bd1osw5e6] {
    color: #64748b;
    font-weight: 500;
    font-size: 0.85rem;
}

.pmaEmailLeague[b-9bd1osw5e6] {
    margin-bottom: 10px;
    font-size: 0.7rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.pmaEmailTeamLogo[b-9bd1osw5e6] {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
}

/* Per-model card — mirrors the production email's dark card with a model-colored
   left border, "<Model> favors <Team>" head + favored-team logo, and a 3-column
   MODEL PROB / MARKET ODDS / EDGE (EV) stat row. */
.pmaEmailModelCard[b-9bd1osw5e6] {
    background: #0f172a;
    border: 1px solid #1e293b;
    border-left: 3px solid #334155;
    border-radius: 8px;
    padding: 14px 16px;
    margin: 10px 0;
}

.pmaEmailModelHead[b-9bd1osw5e6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.pmaEmailModelFavors[b-9bd1osw5e6] {
    font-size: 0.85rem;
    color: #94a3b8;
}

.pmaEmailModelFavors strong[b-9bd1osw5e6] {
    color: #e2e8f0;
    font-weight: 700;
}

.pmaEmailModelName[b-9bd1osw5e6] {
    font-weight: 700;
    margin-right: 2px;
}

.pmaEmailModelLogo[b-9bd1osw5e6] {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}

.pmaEmailStatRow[b-9bd1osw5e6] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.pmaEmailStat[b-9bd1osw5e6] {
    text-align: center;
    padding: 4px;
}

.pmaEmailStatLabel[b-9bd1osw5e6] {
    display: block;
    color: #94a3b8;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.pmaEmailStatValue[b-9bd1osw5e6] {
    display: block;
    color: #e2e8f0;
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pmaEmailStatEv[b-9bd1osw5e6] {
    color: #22c55e;
}

.pmaEmailStatShiftDown[b-9bd1osw5e6] {
    color: #f87171;
}

/* ── Tracked-pick prediction-change alert (second Premium alert) ─────────── */

/* Second grid row: explainer card paired with its email mock. Centered so the
   short card doesn't leave a void beside the tall email (the original stacked
   layout put both emails in one column and left the left column half-empty). */
.pmaAlertGridSecond[b-9bd1osw5e6] {
    margin-top: 26px;
    align-items: center;
}

/* Explainer card for the tracked-pick digest. */
.pmaTrackedAlertCard[b-9bd1osw5e6] {
    padding: 18px 20px;
    background: #131c2c;
    border: 1px solid var(--border);
    border-radius: 14px;
}

.pmaTrackedAlertHead[b-9bd1osw5e6] {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #a78bfa;
    margin-bottom: 8px;
}

.pmaTrackedAlertTitle[b-9bd1osw5e6] {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text);
    margin: 0;
    letter-spacing: -0.01em;
}

.pmaPremiumChip[b-9bd1osw5e6] {
    background: #6d28d9;
    color: #ede9fe;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 3px 10px;
    margin-left: auto;
    flex-shrink: 0;
}

.pmaTrackedAlertText[b-9bd1osw5e6] {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--muted);
    margin: 0;
}

/* Prediction-change pill — purple, to visually separate it from the cyan +EV alert. */
.pmaEmailChangePill[b-9bd1osw5e6] {
    background: rgba(167, 139, 250, 0.12);
    border-color: rgba(167, 139, 250, 0.4);
    color: #a78bfa;
}

/* "Your pick" chip inside the match card of the change digest. */
.pmaEmailPickChip[b-9bd1osw5e6] {
    display: inline-block;
    margin-top: 8px;
    background: rgba(109, 40, 217, 0.18);
    border: 1px solid rgba(167, 139, 250, 0.35);
    color: #c4b5fd;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 3px 10px;
}

.pmaEmailBtn[b-9bd1osw5e6] {
    display: block;
    text-align: center;
    background: #6366f1;
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 11px 0;
    border-radius: 8px;
    margin: 16px 0 12px;
}

@media (max-width: 820px) {
    .pmaAlertGrid[b-9bd1osw5e6] {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

/* ════════════════════ RESPONSIVE ════════════════════ */
@media (max-width: 900px) {
    .pmaModelCardFeatured[b-9bd1osw5e6] {
        grid-column: span 1;
    }

    

    

    

    

    

    

    

    
}

@media (max-width: 600px) {
    .pmaHero[b-9bd1osw5e6] {
        padding: 60px 20px 50px;
    }

    .pmaTicker[b-9bd1osw5e6] {
        gap: 16px;
        padding: 14px 18px;
    }

    .pmaSection[b-9bd1osw5e6] {
        padding: 60px 20px;
    }

    .pmaPricingCard[b-9bd1osw5e6] {
        padding: 28px 22px;
    }
}

/* Premium markets uses the shared <UpcomingMatchCard> inside a .upcomingGrid.
   That grid class is defined in Home.razor.css (isolated to Home), so it doesn't
   reach this page — restate it here. */
.upcomingGrid[b-9bd1osw5e6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(427px, 1fr));
    gap: 12px;
}

/* Premium markets are shown one-at-a-time via tabs; center the single card. */
.pmaMarketCardWrap[b-9bd1osw5e6] {
    max-width: 470px;
    margin: 0 auto;
}

/* Premium-markets tabs: per-market colors matching the Picks market dropdown
   (Series Handicap orange, Total Maps teal, Exact Score indigo). Neutral container
   so the green picks-tab tint doesn't bleed onto the market accents. */
.pmaMarketTabs[b-9bd1osw5e6] {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--border);
}

.pmaMarketTab--handicap[b-9bd1osw5e6] { color: #fb923c; }
.pmaMarketTab--handicap:hover[b-9bd1osw5e6] { background: rgba(251, 146, 60, 0.10); color: #fb923c; }
.pmaMarketTab--handicap.pmaPicksTabActive[b-9bd1osw5e6],
.pmaMarketTab--handicap.pmaPicksTabActive:hover[b-9bd1osw5e6] {
    background: rgba(251, 146, 60, 0.18);
    color: #fb923c;
    border-color: rgba(251, 146, 60, 0.5);
    box-shadow: 0 1px 8px rgba(251, 146, 60, 0.15);
}

.pmaMarketTab--totalmaps[b-9bd1osw5e6] { color: #2dd4bf; }
.pmaMarketTab--totalmaps:hover[b-9bd1osw5e6] { background: rgba(45, 212, 191, 0.10); color: #2dd4bf; }
.pmaMarketTab--totalmaps.pmaPicksTabActive[b-9bd1osw5e6],
.pmaMarketTab--totalmaps.pmaPicksTabActive:hover[b-9bd1osw5e6] {
    background: rgba(45, 212, 191, 0.18);
    color: #2dd4bf;
    border-color: rgba(45, 212, 191, 0.5);
    box-shadow: 0 1px 8px rgba(45, 212, 191, 0.15);
}

.pmaMarketTab--exactscore[b-9bd1osw5e6] { color: #818cf8; }
.pmaMarketTab--exactscore:hover[b-9bd1osw5e6] { background: rgba(129, 140, 248, 0.10); color: #818cf8; }
.pmaMarketTab--exactscore.pmaPicksTabActive[b-9bd1osw5e6],
.pmaMarketTab--exactscore.pmaPicksTabActive:hover[b-9bd1osw5e6] {
    background: rgba(129, 140, 248, 0.18);
    color: #818cf8;
    border-color: rgba(129, 140, 248, 0.5);
    box-shadow: 0 1px 8px rgba(129, 140, 248, 0.15);
}

/* Team crests in the "Last 7 days notable +EV picks" rows. */
.pmaPickProofLogo[b-9bd1osw5e6] {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 6px;
}

/* Mobile: the 3 market tabs (long labels) overflow the fit-content strip and get
   cut off. Make the market-tab strip full-width and let the tabs shrink to share
   the row equally. Only the market tabs (3 long labels) need this; the 2-tab
   Series/Games strips are unaffected. */
@media (max-width: 600px) {
    .pmaMarketTabs[b-9bd1osw5e6] {
        width: 100%;
        max-width: 100%;
    }
    .pmaMarketTabs .pmaPicksTab[b-9bd1osw5e6] {
        min-width: 0;
        flex: 1 1 0;
        padding: 10px 6px;
        font-size: 0.7rem;
    }
}

/* Section headlines: white base with a gradient accent portion, matching the hero.
   (.pmaSectionTitle keeps its default white/block style so the tag chip sits above it.) */
.pmaSectionTitleAccent[b-9bd1osw5e6] {
    background: linear-gradient(135deg, #fbbf24 0%, #38bdf8 50%, #c084fc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}

/* Keep the section "New" chip on its own line above the title (centered), not inline
   beside the (now inline-friendly) title text. */
.pmaSectionTag[b-9bd1osw5e6] {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

/* Descriptions: lift off pure gray toward near-white for readability. */
.pmaSectionSub[b-9bd1osw5e6],
.pmaHeroSub[b-9bd1osw5e6],
.pmaModelDesc[b-9bd1osw5e6],
.pmaPerkText[b-9bd1osw5e6] {
    color: #cbd5e1;
}

/* ── Value Picks dashboard preview — page-level pieces only. The pick CARD styling now
   lives in the shared PickCard component (PickCard.razor.css); this keeps just the model
   track strip + list wrapper rendered around the <PickCard> components. ── */
.pkList[b-9bd1osw5e6] { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 13px; }
.pkModelCards[b-9bd1osw5e6] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 14px; }
.pkModelCard[b-9bd1osw5e6] { background: var(--panel); border: 1px solid var(--border); border-radius: 11px; padding: 12px 14px; border-left: 3px solid var(--c); }
.pkModelCardName[b-9bd1osw5e6] { display: inline-flex; align-items: center; gap: 7px; font-size: 0.82rem; font-weight: 800; color: var(--text); }
.pkModelCardDot[b-9bd1osw5e6] { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.pkModelCardStats[b-9bd1osw5e6] { display: flex; gap: 14px; margin-top: 9px; }
.pkModelStat[b-9bd1osw5e6] { display: flex; flex-direction: column; gap: 1px; }
.pkModelStatVal[b-9bd1osw5e6] { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.pkModelStatVal.pos[b-9bd1osw5e6] { color: #4ade80; }
.pkModelStatVal.neg[b-9bd1osw5e6] { color: #f87171; }
.pkModelStatLbl[b-9bd1osw5e6] { font-size: 0.55rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mutedFaint); font-weight: 700; }
@media (max-width: 700px) {
    .pkModelCards[b-9bd1osw5e6] { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .pkModelCard[b-9bd1osw5e6] { padding: 11px 12px; }
    .pkModelCardStats[b-9bd1osw5e6] { gap: 10px; flex-wrap: wrap; }
    .pkModelStatVal[b-9bd1osw5e6] { font-size: 0.95rem; }
}
@media (max-width: 420px) {
    .pkModelCards[b-9bd1osw5e6] { grid-template-columns: 1fr; }
}
.pmaVpBoard[b-9bd1osw5e6] { max-width: 980px; margin: 0 auto; }

/* ── Compact Free vs Premium comparison (pricing section) ── */
.pmaCompare[b-9bd1osw5e6] {
    position: relative;
    max-width: 560px;
    margin: 0 auto 26px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 16px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 90%, #a78bfa 10%) 0%, var(--panel) 42%);
    overflow: hidden;
    box-shadow: 0 22px 52px -28px rgba(0, 0, 0, 0.7);
}
/* Raised PREMIUM column: a continuous purple panel down the right side, sized to
   the 120px premium column + the row's 18px right gutter (= 138px) so its left
   divider lands exactly on the column's left edge. Clipped to the card radius. */
.pmaCompare[b-9bd1osw5e6]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 138px;
    background: linear-gradient(180deg, rgba(167, 139, 250, 0.22), rgba(167, 139, 250, 0.06));
    border-left: 1px solid rgba(167, 139, 250, 0.3);
    box-shadow: inset 0 1px 0 rgba(167, 139, 250, 0.4);
    pointer-events: none;
    z-index: 0;
}
.pmaCompareRow[b-9bd1osw5e6] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 104px 120px;
    align-items: center;
    padding: 12px 18px;
    font-size: 0.82rem;
    color: var(--text);
    border-top: 1px solid rgba(148, 163, 184, 0.1);
}
.pmaCompareRow:first-child[b-9bd1osw5e6] { border-top: none; }
.pmaCompareRow > span:first-child[b-9bd1osw5e6] { font-weight: 500; }
.pmaCompareRow > span:nth-child(2)[b-9bd1osw5e6],
.pmaCompareRow > span:nth-child(3)[b-9bd1osw5e6] { text-align: center; font-size: 0.74rem; color: var(--mutedFaint); }
.pmaCompareHead[b-9bd1osw5e6] {
    font-size: 0.64rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--mutedFaint);
    background: linear-gradient(180deg, rgba(148, 163, 184, 0.06), transparent);
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.pmaCompareHead > span:nth-child(2)[b-9bd1osw5e6], .pmaCompareHead > span:nth-child(3)[b-9bd1osw5e6] { font-size: 0.68rem; }
.pmaCompareFeatureHead[b-9bd1osw5e6] { color: var(--mutedFaint); }
.pmaComparePremiumCol[b-9bd1osw5e6] { color: #a78bfa !important; font-weight: 800; }
.pmaCompareFreeCol[b-9bd1osw5e6] { color: #60a5fa !important; font-weight: 700; }
/* Circular badges for the boolean feature rows — green "included" ticks, muted
   crosses — so the yes/no reads at a glance instead of as bare glyphs. */
.pmaCompareMark[b-9bd1osw5e6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
}
.pmaCompareTick[b-9bd1osw5e6] {
    background: rgba(34, 197, 94, 0.14);
    border: 1px solid rgba(34, 197, 94, 0.32);
    box-shadow: 0 0 12px -4px rgba(34, 197, 94, 0.45);
}
.pmaCompareCross[b-9bd1osw5e6] {
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.16);
}
@media (max-width: 480px) {
    .pmaCompareRow[b-9bd1osw5e6] { grid-template-columns: 1fr 72px 92px; padding: 10px 12px; }
    .pmaCompare[b-9bd1osw5e6]::before { width: 104px; }
}
/* /Components/Pages/Privacy.razor.rz.scp.css */
/* Shared legal page styles — used by Terms and Privacy */
.legalPage[b-r4wilusdrs] {
    max-width: 680px;
    margin: 0 auto;
    padding: 40px 20px 80px;
}

/* ── Hero ── */
.legalHero[b-r4wilusdrs] {
    margin-bottom: 44px;
}

.legalTitle[b-r4wilusdrs] {
    font-size: 2rem;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -0.03em;
    margin-bottom: 8px;
}

.legalUpdated[b-r4wilusdrs] {
    font-size: 0.82rem;
    color: var(--muted);
    opacity: 0.6;
}

/* ── Sections ── */
.legalSection[b-r4wilusdrs] {
    margin-bottom: 32px;
}

.legalHeading[b-r4wilusdrs] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}

.legalSection p[b-r4wilusdrs] {
    font-size: 0.88rem;
    color: var(--muted);
    line-height: 1.75;
    margin-bottom: 10px;
}

.legalSection p:last-child[b-r4wilusdrs] {
    margin-bottom: 0;
}

.legalSection ul[b-r4wilusdrs] {
    margin: 8px 0 12px 20px;
    padding: 0;
}

.legalSection li[b-r4wilusdrs] {
    font-size: 0.88rem;
    color: var(--muted);
    line-height: 1.75;
    margin-bottom: 4px;
}

.legalSection a[b-r4wilusdrs] {
    color: var(--blue);
    text-decoration: none;
}

.legalSection a:hover[b-r4wilusdrs] {
    text-decoration: underline;
}

.legalSection strong[b-r4wilusdrs] {
    color: var(--text);
    font-weight: 600;
}

/* ── Mobile ── */
@media (max-width: 640px) {
    .legalTitle[b-r4wilusdrs] {
        font-size: 1.6rem;
    }

    .legalSection[b-r4wilusdrs] {
        margin-bottom: 24px;
    }
}
/* /Components/Pages/Rankings.razor.rz.scp.css */
/* ── Design Tokens (inherited from :root / [data-theme]) ──── */

/* ── Section Layout ────────────────────────────────────────── */

.section[b-u3f053tc9c] {
    padding: 32px 24px;
    margin-bottom: 36px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.sectionTitle[b-u3f053tc9c] {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -0.02em;
}

.sectionSubtitle[b-u3f053tc9c] {
    margin: 4px 0 20px;
    color: var(--muted);
    font-size: 0.88rem;
}

/* ── Rankings Header + Controls ────────────────────────────── */

.rankingsHeader[b-u3f053tc9c] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.rankingsHeader .sectionTitle[b-u3f053tc9c] { margin: 0; }
.rankingsHeader .sectionSubtitle[b-u3f053tc9c] { margin: 4px 0 0; }

.rankingsControls[b-u3f053tc9c] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

/* Search box */
.searchBox[b-u3f053tc9c] {
    position: relative;
    display: flex;
    align-items: center;
}

.searchIcon[b-u3f053tc9c] {
    position: absolute;
    left: 10px;
    color: var(--muted);
    pointer-events: none;
}

.searchInput[b-u3f053tc9c] {
    padding: 8px 12px 8px 32px;
    border-radius: 10px;
    border: 2px solid var(--border);
    background: var(--panel);
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 500;
    font-family: inherit;
    min-width: 170px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.searchInput[b-u3f053tc9c]::placeholder {
    color: var(--muted);
    opacity: 0.6;
}

/* League type filter */
.leagueTypeFilter[b-u3f053tc9c] {
    display: flex;
    align-items: center;
}

.leagueTypeSelect[b-u3f053tc9c] {
    padding: 8px 12px;
    border-radius: 10px;
    border: 2px solid var(--border);
    background: var(--panel);
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.leagueTypeSelect:focus[b-u3f053tc9c] {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 191, 255, 0.1);
}

.searchInput:hover[b-u3f053tc9c] {
    border-color: var(--blue);
}

.searchInput:focus[b-u3f053tc9c] {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

/* ── Rankings Panel ────────────────────────────────────────── */

.rankingsPanel[b-u3f053tc9c] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0;
    box-shadow: var(--shadowSoft);
    overflow: hidden;
}

.rankTableScroll[b-u3f053tc9c] {
    max-height: 620px;
    overflow-y: auto;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(37,99,235,0.2) transparent;
}

.rankTableScroll[b-u3f053tc9c]::-webkit-scrollbar {
    width: 6px;
}

.rankTableScroll[b-u3f053tc9c]::-webkit-scrollbar-track {
    background: transparent;
}

.rankTableScroll[b-u3f053tc9c]::-webkit-scrollbar-thumb {
    background: rgba(37,99,235,0.2);
    border-radius: 3px;
}

.rankTableScroll[b-u3f053tc9c]::-webkit-scrollbar-thumb:hover {
    background: rgba(37,99,235,0.35);
}

/* Sticky header inside scroll */
.rankTableScroll .rankTable thead[b-u3f053tc9c] {
    position: sticky;
    top: 0;
    z-index: 1;
}

.rankingsFooter[b-u3f053tc9c] {
    padding: 8px 14px;
    border-top: 1px solid var(--borderSoft);
    background: var(--panelSoft);
}

.rankingsCount[b-u3f053tc9c] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.02em;
}

.rankTable[b-u3f053tc9c] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    table-layout: fixed;
}

.rankTable thead th[b-u3f053tc9c] {
    background: var(--panelSoft);
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.rankTable thead th.thRank[b-u3f053tc9c] { width: 48px; text-align: center; }
.rankTable thead th.thNum[b-u3f053tc9c] { width: 85px; text-align: right; }
.rankTable thead th.thRole[b-u3f053tc9c] { width: 90px; }

.rankTable tbody tr[b-u3f053tc9c] {
    border-bottom: 1px solid var(--borderSoft);
    transition: background 0.1s ease;
}

.rankTable tbody tr:last-child[b-u3f053tc9c] { border-bottom: none; }
.rankTable tbody tr:hover[b-u3f053tc9c] { background: var(--panelSoft); }

.rankTable td[b-u3f053tc9c] {
    padding: 10px 12px;
    color: var(--text);
}

.tdRank[b-u3f053tc9c] { text-align: center; width: 48px; }
.tdTeam[b-u3f053tc9c] { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdStat[b-u3f053tc9c] { width: 85px; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.tdRole[b-u3f053tc9c] { width: 90px; }

.teamCell[b-u3f053tc9c] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Team-name cell is now an <a> to the standalone /team hub page; keep the row's
   existing look (no underline, inherit text color) — the whole row also navigates. */
.teamCellLink[b-u3f053tc9c] {
    text-decoration: none;
    color: inherit;
}

.rankTeamLogo[b-u3f053tc9c] {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    padding: 2px;
    flex-shrink: 0;
}

.rankNum[b-u3f053tc9c] {
    font-weight: 700;
    color: var(--muted);
    font-size: 0.82rem;
}

.regionTag[b-u3f053tc9c] {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(59, 130, 246, 0.15);
    color: var(--blueLight);
}

/* Win rate colors */
.wrHigh[b-u3f053tc9c] { color: #16a34a; font-weight: 700; }
.wrMid[b-u3f053tc9c] { color: var(--text); font-weight: 600; }
.wrLow[b-u3f053tc9c] { color: var(--red); font-weight: 600; }

/* W/L record column */
.wlRecord[b-u3f053tc9c] { font-weight: 600; white-space: nowrap; }
.wlWins[b-u3f053tc9c] { color: #16a34a; }
.wlLosses[b-u3f053tc9c] { color: var(--red); }

/* Side win rate colors */
.wrBlue[b-u3f053tc9c] { color: #60a5fa; font-weight: 600; }
.wrRed[b-u3f053tc9c] { color: #f87171; font-weight: 600; }

/* Diff colors */
.diffPositive[b-u3f053tc9c] { color: #16a34a; font-weight: 700; }
.diffNegative[b-u3f053tc9c] { color: var(--red); font-weight: 700; }

/* ── Breadcrumb ──────────────────────────────────────────── */

.breadcrumb[b-u3f053tc9c] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: var(--panelSoft);
    border: 1px solid var(--border);
    border-radius: var(--radiusSm);
}

.breadcrumbLink[b-u3f053tc9c] {
    color: var(--blue);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    transition: color 0.15s ease;
}

.breadcrumbLink:hover[b-u3f053tc9c] {
    color: var(--blueLight);
    text-decoration: underline;
}

.breadcrumbSep[b-u3f053tc9c] {
    color: var(--muted);
    flex-shrink: 0;
}

.breadcrumbCurrent[b-u3f053tc9c] {
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 700;
}

/* ── Clickable Rows ─────────────────────────────────────── */

.clickableRow[b-u3f053tc9c] {
    cursor: pointer;
}

.clickableRow:hover[b-u3f053tc9c] {
    background: rgba(59, 130, 246, 0.06) !important;
}

.drillChevron[b-u3f053tc9c] {
    color: var(--muted);
    opacity: 0.4;
    flex-shrink: 0;
    margin-left: auto;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.clickableRow:hover .drillChevron[b-u3f053tc9c] {
    opacity: 1;
    color: var(--blue);
    transform: translateX(2px);
}

/* ── League-specific ──────────────────────────────────────── */

.leagueTable[b-u3f053tc9c] {
    table-layout: auto;
}

.leagueCell[b-u3f053tc9c] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.leagueName[b-u3f053tc9c] {
    font-weight: 700;
    color: var(--text);
}

/* ── League Card Grid ─────────────────────────────────────── */

.leagueGrid[b-u3f053tc9c] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    padding: 16px;
}

.leagueGridFooter[b-u3f053tc9c] {
    padding: 10px 16px;
    border-top: 1px solid var(--borderSoft);
    background: var(--panelSoft);
    border-radius: 0 0 var(--radius) var(--radius);
}

.skeletonLeagueCard[b-u3f053tc9c] {
    background: rgba(26, 34, 54, 0.5);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px 16px;
    min-height: 120px;
}

.leagueCard[b-u3f053tc9c] {
    background: linear-gradient(135deg, rgba(26, 34, 54, 0.9), rgba(30, 40, 64, 0.7));
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 0;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
    position: relative;
}

.leagueCard[b-u3f053tc9c]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--blue), #8b5cf6, var(--blue));
    opacity: 0;
    transition: opacity 0.2s ease;
}

.leagueCard:hover[b-u3f053tc9c] {
    transform: translateY(-3px);
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.12), var(--hoverShadow);
}

.leagueCard:hover[b-u3f053tc9c]::before {
    opacity: 1;
}

.leagueCardHeader[b-u3f053tc9c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 12px;
    gap: 12px;
}

.leagueCardHeaderLeft[b-u3f053tc9c] {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
}

.leagueCardLogo[b-u3f053tc9c] {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 6px;
    opacity: 0.85;
}

.leagueCardName[b-u3f053tc9c] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.leagueTag[b-u3f053tc9c] {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
}

.leagueTagIntl[b-u3f053tc9c] {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.25);
}

.leagueTagPlayoffs[b-u3f053tc9c] {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.25);
}

/* ── Inactive Leagues ─────────────────────────────────────── */

.inactiveLeaguesSection[b-u3f053tc9c] {
    margin-top: 1.5rem;
}

.inactiveLeaguesToggle[b-u3f053tc9c] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.inactiveLeaguesToggle:hover[b-u3f053tc9c] {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.inactiveLeaguesChevron[b-u3f053tc9c] {
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.inactiveLeaguesChevron.chevronOpen[b-u3f053tc9c] {
    transform: rotate(180deg);
}

.inactiveLeaguesCount[b-u3f053tc9c] {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: auto;
}

.inactiveLeagueGrid[b-u3f053tc9c] {
    margin-top: 0.75rem;
}

.leagueCardInactive[b-u3f053tc9c] {
    opacity: 0.6;
    border-color: rgba(255, 255, 255, 0.04) !important;
}

.leagueCardInactive:hover[b-u3f053tc9c] {
    opacity: 0.85;
}

.leagueCardArrow[b-u3f053tc9c] {
    color: var(--muted);
    opacity: 0.3;
    flex-shrink: 0;
    transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.leagueCard:hover .leagueCardArrow[b-u3f053tc9c] {
    opacity: 1;
    color: var(--blue);
    transform: translateX(3px);
}

/* Metrics row */
.leagueCardMetrics[b-u3f053tc9c] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin: 0 16px;
    background: var(--borderSoft);
    border-radius: 10px;
    overflow: hidden;
}

.lcMetric[b-u3f053tc9c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 4px;
    background: var(--panelSoft);
}

.lcMetricValue[b-u3f053tc9c] {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.lcMetricLabel[b-u3f053tc9c] {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

/* Highlights section */
.leagueCardHighlights[b-u3f053tc9c] {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--borderSoft);
}

.lcHighlightRow[b-u3f053tc9c] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--borderSoft);
}

.lcHighlightRow:last-child[b-u3f053tc9c] {
    border-bottom: none;
}

.lcHighlightTag[b-u3f053tc9c] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    min-width: 36px;
    text-align: center;
}

.lcTagKDA[b-u3f053tc9c] {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.lcTagCS[b-u3f053tc9c] {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
}

.lcTagKP[b-u3f053tc9c] {
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
}

.lcTagDPM[b-u3f053tc9c] {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
}

.lcTagVS[b-u3f053tc9c] {
    background: rgba(168, 85, 247, 0.12);
    color: #c084fc;
}

.lcHighlightName[b-u3f053tc9c] {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lcHighlightValue[b-u3f053tc9c] {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Champion per role row */
.leagueCardChampions[b-u3f053tc9c] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px 12px;
    border-top: 1px solid var(--borderSoft);
    background: var(--panelSoft);
}

.lcChampLabel[b-u3f053tc9c] {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    flex-shrink: 0;
    white-space: nowrap;
}

.lcChampRow[b-u3f053tc9c] {
    display: flex;
    gap: 6px;
    flex: 1;
    justify-content: flex-end;
}

.lcChampSlot[b-u3f053tc9c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.lcChampRole[b-u3f053tc9c] {
    font-size: 0.5rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 1px 4px;
    border-radius: 3px;
}

.lcChampRole-top[b-u3f053tc9c] { color: #f87171; }
.lcChampRole-jungle[b-u3f053tc9c] { color: #4ade80; }
.lcChampRole-mid[b-u3f053tc9c] { color: #818cf8; }
.lcChampRole-adc[b-u3f053tc9c] { color: #fbbf24; }
.lcChampRole-support[b-u3f053tc9c] { color: #38bdf8; }

.lcChampIcon[b-u3f053tc9c] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--borderSoft);
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.lcChampSlot:hover .lcChampIcon[b-u3f053tc9c] {
    transform: scale(1.12);
    border-color: var(--blue);
}

.lcChampIconPlaceholder[b-u3f053tc9c] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--borderSoft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--muted);
}

/* ── Stats Ribbon ─────────────────────────────────────────── */

.statsRibbon[b-u3f053tc9c] {
    display: flex;
    gap: 4px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--borderSoft);
    background: var(--panelSoft);
    overflow-x: auto;
    flex-wrap: wrap;
}

.statCard[b-u3f053tc9c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 14px;
    border-radius: 0;
    background: transparent;
    min-width: 70px;
}

.statLabel[b-u3f053tc9c] {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.statValue[b-u3f053tc9c] {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* ── Player Header ────────────────────────────────────────── */

.playerHeader[b-u3f053tc9c] {
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--borderSoft);
    background: var(--panelSoft);
}

.playerHeaderInfo[b-u3f053tc9c] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.playerDetailName[b-u3f053tc9c] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -0.01em;
}

.playerHeaderMeta[b-u3f053tc9c] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.playerHeaderTeam[b-u3f053tc9c] {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
}

/* ── Compare Dropdown ──────────────────────────────────────── */

.compareRow[b-u3f053tc9c] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
}

.compareLabel[b-u3f053tc9c] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.compareSelect[b-u3f053tc9c] {
    background: var(--panelSoft);
    color: var(--fg);
    border: 1px solid var(--borderSoft);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
}

.compareSelect:hover[b-u3f053tc9c],
.compareSelect:focus[b-u3f053tc9c] {
    border-color: var(--accent);
}

/* ── Stats Grid (player detail) ───────────────────────────── */

.subsectionTitle[b-u3f053tc9c] {
    margin: 0;
    padding: 14px 20px 8px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

/* Champion-pool header lays the subsection title + scope dropdown on one row, with
   the dropdown right-aligned. The title keeps its uppercase muted styling, the
   dropdown gets a compact native-select look that matches the rest of the page's
   muted-on-dark palette. */
.championPoolHeader[b-u3f053tc9c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.championPoolHeader .subsectionTitle[b-u3f053tc9c] {
    padding-right: 0;
}
.championPoolScope[b-u3f053tc9c] {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    color: #e5e7eb;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 6px 28px 6px 10px;
    margin: 10px 20px 4px 0;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%239ca3af' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 6px;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.championPoolScope:hover[b-u3f053tc9c] {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.18);
}
.championPoolScope:disabled[b-u3f053tc9c] {
    opacity: 0.6;
    cursor: progress;
}
/* Native <option> elements live in the browser's OS-rendered popup and don't
   inherit most of the parent <select>'s styling. Without explicit color +
   background-color on the option itself the popup paints whatever colors the
   browser's "default form palette" decides on, which on a dark-mode UI ends up
   as low-contrast grey-on-grey (the original bug). Forcing both properties +
   the :checked / :hover states gives a readable open-list across Chrome/Firefox/
   Safari. Edge / WebKit ignore most :hover styling on options, but the base
   white-on-near-black is high-contrast enough on its own. */
.championPoolScope option[b-u3f053tc9c] {
    color: #e5e7eb;
    background-color: #111827;
    font-weight: 500;
}
.championPoolScope option:checked[b-u3f053tc9c],
.championPoolScope option:hover[b-u3f053tc9c] {
    background-color: #1f2937;
    color: #ffffff;
}
/* Subtle dim+disable on the table while a new scope is loading so the user gets
   feedback during the re-fetch. Tablename rows stay readable, just lower contrast. */
.championPoolLoading[b-u3f053tc9c] {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.statsGrid[b-u3f053tc9c] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 2px;
    padding: 4px 16px 16px;
}

.statsGridSmall[b-u3f053tc9c] {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
}

.statItem[b-u3f053tc9c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 8px;
    border-radius: 0;
    background: transparent;
    border: none;
    border-left: 2px solid var(--hoverGlow);
}

.statItemLabel[b-u3f053tc9c] {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.statItemValue[b-u3f053tc9c] {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* ── Champion Table ───────────────────────────────────────── */

.champTable[b-u3f053tc9c] {
    table-layout: auto;
}

.champIcon[b-u3f053tc9c] {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

/* ── Player-specific ──────────────────────────────────────── */

.playerName[b-u3f053tc9c] {
    font-weight: 700;
    color: var(--text);
}

.playerTeam[b-u3f053tc9c] {
    color: var(--muted);
    font-weight: 500;
    font-size: 0.82rem;
}

.roleTag[b-u3f053tc9c] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.roleTag-top[b-u3f053tc9c] {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
}

.roleTag-jungle[b-u3f053tc9c] {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
}

.roleTag-mid[b-u3f053tc9c] {
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
}

.roleTag-adc[b-u3f053tc9c] {
    background: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
}

.roleTag-support[b-u3f053tc9c] {
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
}

/* ── Utility ───────────────────────────────────────────────── */

.loadingPlaceholder[b-u3f053tc9c] {
    padding: 40px 20px;
    text-align: center;
    color: var(--muted);
    font-size: 0.9rem;
}

.loadingOverlay[b-u3f053tc9c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 80px 20px;
    min-height: 300px;
}

.loadingSpinner[b-u3f053tc9c] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(59, 130, 246, 0.15);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-u3f053tc9c 0.8s linear infinite;
}

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

.loadingText[b-u3f053tc9c] {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.02em;
}

.emptyState[b-u3f053tc9c] {
    padding: 40px 20px;
    text-align: center;
    color: var(--muted);
    font-size: 0.88rem;
    font-style: italic;
}

/* ── Responsive ────────────────────────────────────────────── */

@media (max-width: 768px) {
    .section[b-u3f053tc9c] {
        padding: 16px 10px;
    }

    .sectionTitle[b-u3f053tc9c] {
        font-size: 1.15rem;
    }

    .sectionSubtitle[b-u3f053tc9c] {
        font-size: 0.78rem;
        margin-bottom: 12px;
    }

    .rankingsHeader[b-u3f053tc9c] {
        flex-direction: column;
        margin-bottom: 10px;
    }

    .rankingsControls[b-u3f053tc9c] {
        width: 100%;
        gap: 6px;
        position: sticky;
        top: 56px;
        z-index: 5;
        background: var(--bg);
        padding: 8px 0;
        margin-bottom: 8px;
    }

    .searchBox[b-u3f053tc9c] {
        flex: 1;
    }

    .searchInput[b-u3f053tc9c] {
        flex: 1;
        width: 100%;
        min-width: 0;
        font-size: 0.75rem;
        padding: 7px 10px 7px 30px;
    }

    .leagueTypeSelect[b-u3f053tc9c] {
        font-size: 0.75rem;
        padding: 7px 10px;
    }

    /* ── Breadcrumb ──────────────────────────────── */

    .breadcrumb[b-u3f053tc9c] {
        padding: 8px 12px;
        gap: 5px;
        margin-bottom: 10px;
    }

    .breadcrumbLink[b-u3f053tc9c],
    .breadcrumbCurrent[b-u3f053tc9c] {
        font-size: 0.72rem;
    }

    /* ── Rankings Panel ──────────────────────────── */

    .rankingsPanel[b-u3f053tc9c] {
        border-radius: 10px;
    }

    /* ── League Cards ────────────────────────────── */

    .leagueGrid[b-u3f053tc9c] {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 10px;
    }

    .leagueCardHeader[b-u3f053tc9c] {
        padding: 12px 12px 10px;
        gap: 8px;
    }

    .leagueCardName[b-u3f053tc9c] {
        font-size: 0.85rem;
    }

    .leagueCardMetrics[b-u3f053tc9c] {
        margin: 0 10px;
    }

    .lcMetric[b-u3f053tc9c] {
        padding: 8px 2px;
    }

    .lcMetricValue[b-u3f053tc9c] {
        font-size: 0.82rem;
    }

    .lcMetricLabel[b-u3f053tc9c] {
        font-size: 0.5rem;
    }

    .lcHighlightRow[b-u3f053tc9c] {
        padding: 6px 10px;
        gap: 6px;
    }

    .lcHighlightName[b-u3f053tc9c],
    .lcHighlightValue[b-u3f053tc9c] {
        font-size: 0.7rem;
    }

    .leagueCardChampions[b-u3f053tc9c] {
        padding: 8px 10px 10px;
        gap: 8px;
    }

    .lcChampIcon[b-u3f053tc9c],
    .lcChampIconPlaceholder[b-u3f053tc9c] {
        width: 24px;
        height: 24px;
    }

    .inactiveLeaguesToggle[b-u3f053tc9c] {
        font-size: 0.78rem;
        padding: 0.6rem 0.8rem;
    }

    /* ── League Detail Header ────────────────────── */

    .leagueDetailHeader[b-u3f053tc9c] {
        flex-direction: column;
        gap: 10px;
        padding: 14px 12px;
    }

    .leagueDetailName[b-u3f053tc9c] {
        font-size: 1.05rem;
    }

    .leagueDetailMeta[b-u3f053tc9c] {
        gap: 6px;
    }

    .leagueDetailStat[b-u3f053tc9c] {
        font-size: 0.7rem;
    }

    /* ── League Stats Sections ───────────────────── */

    .leagueStatsSection[b-u3f053tc9c] {
        padding: 12px 12px;
    }

    .leagueStatsGrid[b-u3f053tc9c] {
        grid-template-columns: repeat(2, 1fr);
    }

    .leagueStat[b-u3f053tc9c] {
        padding: 8px 6px;
    }

    .leagueStatValue[b-u3f053tc9c] {
        font-size: 0.82rem;
    }

    /* ── Champion Picks / Bans ───────────────────── */

    .champRoleSection[b-u3f053tc9c] {
        padding: 12px 12px 14px;
    }

    .champRoleTabs[b-u3f053tc9c] {
        gap: 3px;
        flex-wrap: wrap;
    }

    .champRoleTab[b-u3f053tc9c] {
        padding: 5px 10px;
        font-size: 0.65rem;
    }

    .champRoleGrid[b-u3f053tc9c] {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px;
    }

    .champRoleCard[b-u3f053tc9c] {
        padding: 6px 8px;
        gap: 8px;
    }

    .champRoleIcon[b-u3f053tc9c],
    .champRoleIconPlaceholder[b-u3f053tc9c] {
        width: 30px;
        height: 30px;
    }

    .champRoleCardName[b-u3f053tc9c] {
        font-size: 0.72rem;
    }

    .champRoleCardStats[b-u3f053tc9c] {
        gap: 5px;
        font-size: 0.6rem;
    }

    /* ── Team Table ──────────────────────────────── */

    .teamTableTitle[b-u3f053tc9c] {
        padding: 12px 12px 6px !important;
        font-size: 0.72rem;
    }

    .rankTable[b-u3f053tc9c] {
        font-size: 0.75rem;
        min-width: 600px;
    }

    .rankTable thead th[b-u3f053tc9c] {
        padding: 8px 8px;
        font-size: 0.6rem;
    }

    .rankTable td[b-u3f053tc9c] {
        padding: 8px 8px;
    }

    .rankTeamLogo[b-u3f053tc9c] {
        width: 22px;
        height: 22px;
    }

    .teamCell[b-u3f053tc9c] {
        gap: 6px;
    }

    /* ── Player Table ────────────────────────────── */

    .playerTable[b-u3f053tc9c] {
        min-width: 700px;
    }

    .playerHeader[b-u3f053tc9c] {
        padding: 14px 12px 12px;
    }

    .playerDetailName[b-u3f053tc9c] {
        font-size: 1rem;
    }

    .compareRow[b-u3f053tc9c] {
        padding: 10px 12px;
        flex-wrap: wrap;
    }

    .compareLabel[b-u3f053tc9c] {
        font-size: 0.72rem;
    }

    .compareSelect[b-u3f053tc9c] {
        font-size: 0.75rem;
        padding: 5px 10px;
    }

    .subsectionTitle[b-u3f053tc9c] {
        padding: 10px 12px 6px;
        font-size: 0.7rem;
    }

    .statsGrid[b-u3f053tc9c] {
        grid-template-columns: repeat(3, 1fr);
        padding: 4px 10px 12px;
    }

    .statsRibbon[b-u3f053tc9c] {
        gap: 4px;
        padding: 8px 10px;
    }

    .statCard[b-u3f053tc9c] {
        min-width: 55px;
        padding: 4px 6px;
    }

    .statLabel[b-u3f053tc9c] {
        font-size: 0.55rem;
    }

    .statValue[b-u3f053tc9c] {
        font-size: 0.78rem;
    }

    /* ── Match History (League View) ─────────────── */

    .matchHistoryPanel[b-u3f053tc9c] {
        border-radius: 10px;
    }

    .matchHistoryRow[b-u3f053tc9c] {
        gap: 8px;
        padding: 8px 10px;
    }

    .mhDate[b-u3f053tc9c] {
        min-width: 0;
        flex-shrink: 0;
        width: auto;
    }

    .mhDateDay[b-u3f053tc9c] {
        font-size: 0.58rem;
        white-space: nowrap;
    }

    .mhTeams[b-u3f053tc9c] {
        gap: 4px;
        min-width: 0;
    }

    .mhTeamName[b-u3f053tc9c] {
        font-size: 0.68rem;
        min-width: 0;
        gap: 3px;
    }

    .mhTeamLogo[b-u3f053tc9c] {
        width: 16px;
        height: 16px;
    }

    .mhScoreNum[b-u3f053tc9c] {
        font-size: 0.78rem;
        min-width: 12px;
    }

    .mhScoreSep[b-u3f053tc9c] {
        font-size: 0.72rem;
    }

    .mhMeta[b-u3f053tc9c] {
        min-width: 0;
        gap: 2px;
    }

    .mhPatch[b-u3f053tc9c] {
        display: none;
    }

    .mhScore[b-u3f053tc9c] {
        gap: 2px;
    }

    .rankingsFooter[b-u3f053tc9c] {
        padding: 6px 10px;
    }

    .rankingsCount[b-u3f053tc9c] {
        font-size: 0.62rem;
    }
}

/* ── League Detail Header ─────────────────────────────────── */

.leagueDetailHeader[b-u3f053tc9c] {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 24px 20px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(139, 92, 246, 0.06), transparent);
    border-bottom: 1px solid var(--borderSoft);
}

.leagueDetailIcon[b-u3f053tc9c] {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--borderSoft);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.leagueDetailLogo[b-u3f053tc9c] {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.leagueDetailInfo[b-u3f053tc9c] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.leagueDetailName[b-u3f053tc9c] {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -0.02em;
}

.leagueDetailMeta[b-u3f053tc9c] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.leagueDetailStat[b-u3f053tc9c] {
    font-size: 0.78rem;
    color: var(--muted);
    font-weight: 600;
}

.leagueDetailDot[b-u3f053tc9c] {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--muted);
    opacity: 0.4;
}

.teamRecordBadge[b-u3f053tc9c] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.recordWins[b-u3f053tc9c] {
    color: #22c55e;
}

.recordLosses[b-u3f053tc9c] {
    color: #ef4444;
}

.recordSep[b-u3f053tc9c] {
    color: var(--muted);
    opacity: 0.5;
    font-weight: 400;
}

.teamWrBadge[b-u3f053tc9c] {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
}

.teamWrBadge.wrPositive[b-u3f053tc9c] {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.teamWrBadge.wrNegative[b-u3f053tc9c] {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* ── League Stats Grid ────────────────────────────────────── */

.leagueStatsSection[b-u3f053tc9c] {
    padding: 16px 20px;
    border-bottom: 1px solid var(--borderSoft);
}

.leagueStatsSectionTitle[b-u3f053tc9c] {
    margin: 0 0 10px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.predAccInfoIcon[b-u3f053tc9c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    opacity: 0.6;
    cursor: help;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.predAccInfoIcon:hover[b-u3f053tc9c] {
    opacity: 1;
    color: var(--text);
}

.leagueStatsGrid[b-u3f053tc9c] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 2px;
}

.leagueStat[b-u3f053tc9c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 10px 8px;
    border-radius: 0;
    background: transparent;
    border: none;
    border-left: 2px solid var(--hoverGlow);
}

.leagueStatMvp[b-u3f053tc9c] {
    background: transparent;
    border-left: 2px solid rgba(251, 191, 36, 0.35);
}

.leagueStatValue[b-u3f053tc9c] {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.leagueStatLabel[b-u3f053tc9c] {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    text-align: center;
}

/* ── Champion Role Section ────────────────────────────────── */

.champRoleSection[b-u3f053tc9c] {
    padding: 16px 20px 20px;
    border-bottom: 1px solid var(--borderSoft);
}

.champRoleSectionTitle[b-u3f053tc9c] {
    margin: 0 0 12px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.champRoleTabs[b-u3f053tc9c] {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
}

.champRoleTab[b-u3f053tc9c] {
    padding: 6px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.champRoleTab:hover[b-u3f053tc9c] {
    border-color: var(--blue);
    color: var(--text);
}

.champRoleTabActive[b-u3f053tc9c] {
    background: rgba(59, 130, 246, 0.15);
    border-color: var(--blue);
    color: var(--blueLight);
}

.champRoleGrid[b-u3f053tc9c] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 8px;
}

.champRoleCard[b-u3f053tc9c] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--borderSoft);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.champRoleCard:hover[b-u3f053tc9c] {
    border-color: rgba(59, 130, 246, 0.3);
    background: rgba(59, 130, 246, 0.04);
}

.champRoleCardImg[b-u3f053tc9c] {
    flex-shrink: 0;
}

.champRoleIcon[b-u3f053tc9c] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--borderSoft);
}

.champRoleIconPlaceholder[b-u3f053tc9c] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--borderSoft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--muted);
}

.champRoleCardInfo[b-u3f053tc9c] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.champRoleCardName[b-u3f053tc9c] {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.champRoleCardStats[b-u3f053tc9c] {
    display: flex;
    gap: 8px;
    font-size: 0.65rem;
    font-weight: 600;
    white-space: nowrap;
}

.champRoleCardGames[b-u3f053tc9c] {
    color: var(--muted);
}

.champRoleCardWR[b-u3f053tc9c] {
    font-weight: 700;
}

.champRoleCardKDA[b-u3f053tc9c] {
    color: var(--muted);
}

/* ── Sortable Columns ────────────────────────────────────── */

.sortableCol[b-u3f053tc9c] {
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease;
    position: relative;
}

.sortableCol:hover[b-u3f053tc9c] {
    color: var(--text) !important;
}

.sortableCol[b-u3f053tc9c]::after {
    content: "\2195";
    margin-left: 3px;
    opacity: 0.3;
    font-size: 0.6rem;
}

.sortableCol.sortDesc[b-u3f053tc9c]::after {
    content: "\25BC";
    opacity: 0.9;
    color: var(--blue);
}

.sortableCol.sortAsc[b-u3f053tc9c]::after {
    content: "\25B2";
    opacity: 0.9;
    color: var(--blue);
}

/* ── Best-in-League Tag ──────────────────────────────────── */

.bestTag[b-u3f053tc9c] {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    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.25);
    vertical-align: middle;
}

/* ── League Rank Badges ──────────────────────────────────── */

.rankBadge[b-u3f053tc9c] {
    display: inline-block;
    margin-left: 2px;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    vertical-align: middle;
}

.rankBadge1[b-u3f053tc9c] {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.25), rgba(245, 158, 11, 0.18));
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.rankBadge2[b-u3f053tc9c] {
    background: rgba(96, 165, 250, 0.12);
    color: #60a5fa;
    border: 1px solid rgba(96, 165, 250, 0.2);
}

.rankBadgeTop[b-u3f053tc9c] {
    background: rgba(74, 222, 128, 0.10);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.18);
}

.rankBadgeBot[b-u3f053tc9c] {
    background: rgba(248, 113, 113, 0.10);
    color: #f87171;
    border: 1px solid rgba(248, 113, 113, 0.18);
}

/* ── Team Table Title ─────────────────────────────────────── */

/* ── Ban Styles ──────────────────────────────────────────── */

.leagueCardBans[b-u3f053tc9c] {
    background: rgba(239, 68, 68, 0.04);
}

.lcBanLabel[b-u3f053tc9c] {
    color: #f87171 !important;
}

.lcBanIcon[b-u3f053tc9c] {
    border-color: rgba(239, 68, 68, 0.2) !important;
    filter: saturate(0.7);
}

.lcChampSlot:hover .lcBanIcon[b-u3f053tc9c] {
    border-color: rgba(239, 68, 68, 0.5) !important;
    filter: saturate(1);
}

.champBanCard[b-u3f053tc9c] {
    border-color: rgba(239, 68, 68, 0.12);
}

.champBanCard:hover[b-u3f053tc9c] {
    border-color: rgba(239, 68, 68, 0.3) !important;
    background: rgba(239, 68, 68, 0.04) !important;
}

.champBanIcon[b-u3f053tc9c] {
    border-color: rgba(239, 68, 68, 0.2) !important;
}

.champBanRate[b-u3f053tc9c] {
    color: #f87171 !important;
    font-weight: 700;
}

/* ── League Card Prediction Accuracy ──────────────────────── */
.leagueCardPredictions[b-u3f053tc9c] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(148,163,184,0.08);
}

.lcPredLabel[b-u3f053tc9c] {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.75);
    margin-bottom: 8px;
}

.lcPredModels[b-u3f053tc9c] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lcPredModel[b-u3f053tc9c] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}

.lcPredModelName[b-u3f053tc9c] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    min-width: 36px;
    text-transform: uppercase;
}

.lcPredModel-fasttree[b-u3f053tc9c]  { color: #60a5fa; }
.lcPredModel-lightgbm[b-u3f053tc9c]  { color: #fbbf24; }
.lcPredModel-pcasweep[b-u3f053tc9c]   { color: #a78bfa; }
.lcPredModel-consensus[b-u3f053tc9c] { color: #22d3ee; }

.lcPredStat[b-u3f053tc9c] {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(148,163,184,0.06);
    border-radius: 6px;
    padding: 3px 8px;
}

.lcPredType[b-u3f053tc9c] {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.8);
    font-weight: 600;
    min-width: 32px;
}

.lcPredRate[b-u3f053tc9c] {
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.lcPredHigh[b-u3f053tc9c] { color: #4ade80; }
.lcPredMid[b-u3f053tc9c]  { color: #fbbf24; }
.lcPredLow[b-u3f053tc9c]  { color: #f87171; }

.lcPredCount[b-u3f053tc9c] {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.5);
    font-variant-numeric: tabular-nums;
}

/* ── League Detail Prediction Accuracy ────────────────────── */
.predAccGrid[b-u3f053tc9c] { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.predAccCard[b-u3f053tc9c] { background: linear-gradient(135deg, rgba(30,40,64,0.7), rgba(22,30,48,0.5)); border: 1px solid color-mix(in srgb, var(--model-color) 25%, transparent); border-radius: 12px; padding: 16px 18px; transition: border-color 0.2s ease; }
.predAccCard:hover[b-u3f053tc9c] { border-color: color-mix(in srgb, var(--model-color) 45%, transparent); }
.predAccCardHeader[b-u3f053tc9c] { display: flex; align-items: center; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.predAccModelName[b-u3f053tc9c] { font-size: 0.88rem; font-weight: 700; color: var(--model-color); letter-spacing: 0.02em; }
.predAccCardBody[b-u3f053tc9c] { display: flex; flex-direction: column; gap: 10px; }
.predAccRow[b-u3f053tc9c] { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; }
.predAccRowLabel[b-u3f053tc9c] { font-size: 0.76rem; font-weight: 600; color: rgba(255,255,255,0.85); text-transform: uppercase; letter-spacing: 0.03em; }
.predAccBarWrap[b-u3f053tc9c] { height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; }
.predAccBar[b-u3f053tc9c] { height: 100%; background: var(--model-color); border-radius: 3px; opacity: 0.7; transition: width 0.4s ease; }
.predAccRowRate[b-u3f053tc9c] { font-size: 0.88rem; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 36px; text-align: right; }
.predAccRowCount[b-u3f053tc9c] { font-size: 0.72rem; color: rgba(255,255,255,0.55); font-variant-numeric: tabular-nums; min-width: 30px; text-align: right; }

/* ── Team Table Title ─────────────────────────────────────── */

.teamTableTitle[b-u3f053tc9c] {
    margin: 0;
    padding: 18px 20px 10px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

/* ── Player Table ────────────────────────────────────────── */

.playerTable[b-u3f053tc9c] {
    table-layout: auto;
    min-width: 900px;
}

.playerTable thead th[b-u3f053tc9c] {
    white-space: nowrap;
}

.playerTable .thPlayerName[b-u3f053tc9c] {
    min-width: 130px;
}

.playerTable .thNum[b-u3f053tc9c] {
    width: 70px;
    text-align: right;
}

.playerTable .tdStat[b-u3f053tc9c] {
    white-space: nowrap;
    font-size: 0.8rem;
}

/* ── Champion Table Expanded ─────────────────────────────── */

.champTable[b-u3f053tc9c] {
    min-width: 800px;
}

.champTable .thNum[b-u3f053tc9c] {
    width: 70px;
}

/* ── Match History (League View) ──────────────────────────── */

.matchHistoryPanel[b-u3f053tc9c] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadowSoft);
}

.matchHistoryScroll[b-u3f053tc9c] {
    max-height: 500px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(37,99,235,0.2) transparent;
}

.matchHistoryRow[b-u3f053tc9c] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--borderSoft);
    transition: background 0.1s ease;
}

.matchHistoryRow:last-child[b-u3f053tc9c] { border-bottom: none; }

.mhDate[b-u3f053tc9c] {
    min-width: 55px;
    flex-shrink: 0;
}

.mhDateDay[b-u3f053tc9c] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
}

.mhTeams[b-u3f053tc9c] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    justify-content: center;
    min-width: 0;
}

.mhTeamName[b-u3f053tc9c] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--muted);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.mhTeamRight[b-u3f053tc9c] {
    text-align: left;
    justify-content: flex-start;
}

.mhTeamLogo[b-u3f053tc9c] {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}

.mhTeamWinner[b-u3f053tc9c] {
    color: var(--text);
    font-weight: 800;
}

.mhScore[b-u3f053tc9c] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.mhScoreNum[b-u3f053tc9c] {
    font-size: 0.95rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    min-width: 16px;
    text-align: center;
}

.mhScoreWin[b-u3f053tc9c] { color: #22c55e; }
.mhScoreLoss[b-u3f053tc9c] { color: var(--muted); opacity: 0.6; }

.mhScoreSep[b-u3f053tc9c] {
    color: var(--muted);
    opacity: 0.4;
    font-weight: 400;
    font-size: 0.85rem;
}

.mhMeta[b-u3f053tc9c] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-width: 60px;
    justify-content: flex-end;
}

.mhPatch[b-u3f053tc9c] {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--muted);
    opacity: 0.6;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255,255,255,0.04);
}

/* ── Series Detail ────────────────────────────────────────── */

.seriesHeaderWrapper[b-u3f053tc9c] {
    position: relative;
}

.seriesTournamentBadge[b-u3f053tc9c] {
    display: flex;
    align-items: center;
    gap: 6px;
    position: absolute;
    top: 12px;
    right: 16px;
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    z-index: 1;
}

.seriesTournamentBadge:hover[b-u3f053tc9c] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(99, 179, 237, 0.3);
}

.seriesTournamentIcon[b-u3f053tc9c] {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 4px;
}

.seriesTournamentName[b-u3f053tc9c] {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.seriesHeader[b-u3f053tc9c] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 28px 24px 16px;
}

.seriesTeamBlock[b-u3f053tc9c] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 140px;
    cursor: pointer;
    transition: opacity 0.15s;
}

.seriesTeamBlock:hover[b-u3f053tc9c] {
    opacity: 0.8;
}

.seriesTeamBlock:first-child[b-u3f053tc9c] { justify-content: flex-end; }
.seriesTeamBlock:last-child[b-u3f053tc9c] { justify-content: flex-start; }

.seriesTeamName[b-u3f053tc9c] {
    font-size: 1.2rem;
    font-weight: 800;
    color: #f0f4f8;
    letter-spacing: -0.01em;
}

.seriesTeamLink[b-u3f053tc9c] {
    transition: color 0.15s;
}

.seriesTeamBlock:hover .seriesTeamLink[b-u3f053tc9c] {
    color: #63b3ed;
}

.seriesBlockWinner[b-u3f053tc9c] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.03));
    border-radius: 10px;
    padding: 8px 14px;
}

.seriesTeamLogo[b-u3f053tc9c] {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 8px;
    flex-shrink: 0;
}

.seriesScoreBlock[b-u3f053tc9c] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.seriesScoreNum[b-u3f053tc9c] {
    font-size: 1.8rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    color: #f0f4f8;
}

.seriesScoreSep[b-u3f053tc9c] {
    font-size: 1rem;
    color: var(--muted);
    opacity: 0.4;
}

.seriesMeta[b-u3f053tc9c] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 24px 20px;
    font-size: 0.78rem;
    color: var(--muted);
    font-weight: 600;
}

/* Game Tabs */
.gameTabs[b-u3f053tc9c] {
    display: flex;
    gap: 4px;
    padding: 0 24px 16px;
    justify-content: center;
}

.gameTab[b-u3f053tc9c] {
    padding: 8px 20px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.gameTab:hover[b-u3f053tc9c] {
    border-color: var(--blue);
    color: var(--text);
}

.gameTabActive[b-u3f053tc9c] {
    background: rgba(59, 130, 246, 0.12);
    border-color: var(--blue);
    color: var(--blueLight);
}

.gameTabT1Win.gameTabActive[b-u3f053tc9c] {
    border-bottom: 2px solid #22c55e;
}

.gameTabT2Win.gameTabActive[b-u3f053tc9c] {
    border-bottom: 2px solid #ef4444;
}

/* Game Scoreboard */
.gameScoreboard[b-u3f053tc9c] {
    background: var(--panelSoft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin: 0 0 12px;
    overflow: hidden;
}

.gsTeamRow[b-u3f053tc9c] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 16px 20px 24px;
}

.gsTeam[b-u3f053tc9c] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 150px;
}

.gsTeamLeft[b-u3f053tc9c] { justify-content: flex-end; }
.gsTeamRight[b-u3f053tc9c] { justify-content: flex-start; }

.gsTeamName[b-u3f053tc9c] {
    font-size: 0.95rem;
    font-weight: 800;
    color: #f0f4f8;
}

.gsTeamClickable[b-u3f053tc9c] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: opacity 0.15s;
}

.gsTeamClickable:hover[b-u3f053tc9c] {
    opacity: 0.8;
}

.gsTeamNameLink[b-u3f053tc9c] {
    transition: color 0.15s;
}

.gsTeamClickable:hover .gsTeamNameLink[b-u3f053tc9c] {
    color: #63b3ed;
}

.gsTeamLogo[b-u3f053tc9c] {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 6px;
    flex-shrink: 0;
}

/* Winner side — highlighted background panel */
.gsTeamWinSide[b-u3f053tc9c] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.04));
    border-radius: 10px;
    padding: 8px 12px;
}

/* Victory badge next to winner */
.gsVictoryBadge[b-u3f053tc9c] {
    font-size: 0.55rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    padding: 3px 10px;
    border-radius: 4px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #ffffff;
    text-transform: uppercase;
    flex-shrink: 0;
}

.gsLogoWinner[b-u3f053tc9c] {
}

.gsSideTag[b-u3f053tc9c] {
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 2px 6px;
    border-radius: 4px;
}

.gsSideBlue[b-u3f053tc9c] {
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
}

.gsSideRed[b-u3f053tc9c] {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
}

.gsScoreBlock[b-u3f053tc9c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    position: relative;
}

.gsScoreBlock .gsGameTime[b-u3f053tc9c] {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.gsGameTime[b-u3f053tc9c] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #f0f4f8;
    letter-spacing: 0.02em;
}

.gsKills[b-u3f053tc9c] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gsKillNum[b-u3f053tc9c] {
    font-size: 1.4rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    color: #f0f4f8;
}

.gsKillSep[b-u3f053tc9c] {
    font-size: 1rem;
    color: var(--muted);
    opacity: 0.5;
    font-weight: 600;
}

.gsMetaRow[b-u3f053tc9c] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 20px 12px;
    flex-wrap: wrap;
}

.gsMeta[b-u3f053tc9c] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--muted);
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(255,255,255,0.04);
}

.gsMetaSideBlue[b-u3f053tc9c] {
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.15);
}

.gsMetaSideRed[b-u3f053tc9c] {
    color: #f87171;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.15);
}

/* Objectives Bar */
.objectivesBar[b-u3f053tc9c] {
    display: flex;
    gap: 2px;
    margin: 0 0 12px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.objItem[b-u3f053tc9c] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    padding: 10px 8px;
    justify-content: center;
    background: var(--panelSoft);
    position: relative;
    flex-wrap: wrap;
}

.objLabel[b-u3f053tc9c] {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    min-width: 50px;
    text-align: center;
}

.objValue[b-u3f053tc9c] {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    min-width: 16px;
    text-align: center;
}

.objGold[b-u3f053tc9c] {
    font-size: 0.78rem;
    color: #fbbf24;
}

.objItemDragons[b-u3f053tc9c] {
    min-width: 80px;
}

.dragonIcons[b-u3f053tc9c] {
    display: flex;
    gap: 2px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.dragonTypeIcon[b-u3f053tc9c] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    vertical-align: middle;
    filter: brightness(1.1);
}

.objFirstTag[b-u3f053tc9c] {
    position: absolute;
    bottom: 2px;
    font-size: 0.5rem;
    font-weight: 800;
    color: #4ade80;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.7;
}

.objFirstLeft[b-u3f053tc9c] { left: 8px; }
.objFirstRight[b-u3f053tc9c] { right: 8px; }

/* Draft Section */
.draftSection[b-u3f053tc9c] {
    margin: 0 0 12px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
}

.draftTitle[b-u3f053tc9c] {
    margin: 0 0 10px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.draftRow[b-u3f053tc9c] {
    display: flex;
    gap: 20px;
}

.draftTeamCol[b-u3f053tc9c] {
    flex: 1;
}

.draftTeamLabel[b-u3f053tc9c] {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}

.draftChamps[b-u3f053tc9c] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.draftBans[b-u3f053tc9c] { margin-bottom: 8px; }

.draftChampSlot[b-u3f053tc9c] {
    position: relative;
    width: 36px;
    height: 36px;
}

.draftChampIcon[b-u3f053tc9c] {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid var(--borderSoft);
    background: rgba(255,255,255,0.05);
}

.draftBanSlot .draftChampIcon[b-u3f053tc9c] {
    opacity: 0.4;
    filter: grayscale(0.6);
}

.draftBanX[b-u3f053tc9c] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ef4444;
    font-size: 1.1rem;
    font-weight: 900;
    text-shadow: 0 0 4px rgba(0,0,0,0.8);
    pointer-events: none;
}

/* Player Stats Section */
.playerStatsSection[b-u3f053tc9c] {
    margin: 0 0 12px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.playerStatsWinner .playerStatsTitle[b-u3f053tc9c] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.04));
}

.playerStatsTitle[b-u3f053tc9c] {
    margin: 0;
    padding: 12px 16px 8px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #f0f4f8;
    display: flex;
    align-items: center;
    gap: 8px;
}

.psTeamLogo[b-u3f053tc9c] {
    width: 22px;
    height: 22px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}

.psLogoWinner[b-u3f053tc9c] {
}

.winBadge[b-u3f053tc9c] {
    font-size: 0.55rem;
    font-weight: 900;
    padding: 3px 10px;
    border-radius: 4px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #ffffff;
    letter-spacing: 0.1em;
}

.playerStatsTable[b-u3f053tc9c] {
    table-layout: auto;
    min-width: 900px;
}

.playerStatsTable thead th[b-u3f053tc9c] {
    white-space: nowrap;
}

.csIcon[b-u3f053tc9c] {
    vertical-align: middle;
    margin-right: 2px;
    opacity: 0.8;
}

.mvpRow[b-u3f053tc9c] {
    background: rgba(251, 191, 36, 0.04) !important;
}

.mvpBadge[b-u3f053tc9c] {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.55rem;
    font-weight: 800;
    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.25);
    vertical-align: middle;
}

.champCell[b-u3f053tc9c] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.champIconSmall[b-u3f053tc9c] {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255,255,255,0.05);
}

.champCellKda[b-u3f053tc9c] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--muted);
    margin-left: 2px;
    white-space: nowrap;
}

.champCellCs[b-u3f053tc9c] {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--muted);
    opacity: 0.7;
    margin-left: 4px;
    white-space: nowrap;
}

/* ── Fearless Draft ───────────────────────────────────────── */

.fearlessSection[b-u3f053tc9c] {
    border-color: rgba(168, 85, 247, 0.25);
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.04), var(--panel));
}

.fearlessTitle[b-u3f053tc9c] {
    color: #c084fc !important;
}

.fearlessDesc[b-u3f053tc9c] {
    font-size: 0.65rem;
    color: var(--muted);
    opacity: 0.7;
    margin-bottom: 10px;
}

.fearlessChamps[b-u3f053tc9c] {
    gap: 5px;
}

.fearlessGamesGrid[b-u3f053tc9c] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.fearlessGameGroup[b-u3f053tc9c] {
    padding: 10px;
    border-radius: 6px;
    background: rgba(168, 85, 247, 0.04);
    border: 1px solid rgba(168, 85, 247, 0.1);
}

.fearlessGameTitle[b-u3f053tc9c] {
    font-size: 0.65rem;
    font-weight: 700;
    color: #c084fc;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.fearlessTeamRow[b-u3f053tc9c] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.fearlessTeamRow:last-child[b-u3f053tc9c] {
    margin-bottom: 0;
}

.fearlessTeamLabel[b-u3f053tc9c] {
    font-size: 0.65rem;
    color: var(--muted);
    min-width: 80px;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fearlessTeamChamps[b-u3f053tc9c] {
    display: flex;
    gap: 5px;
}

/* ── Model Predictions Card ──────────────────────────────── */

.predictionCard[b-u3f053tc9c] {
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.04), var(--panel));
    padding: 14px 16px;
    margin-bottom: 12px;
}

.seriesPredictionCard[b-u3f053tc9c] {
    margin-top: 16px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.predictionTitle[b-u3f053tc9c] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #818cf8;
    margin: 0 0 12px;
}

.predTeamHeader[b-u3f053tc9c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 0 4px;
}

.predTeamSide[b-u3f053tc9c] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.predTeamSideRight[b-u3f053tc9c] {
    flex-direction: row-reverse;
    text-align: right;
}

.predTeamSideRight .predTeamName[b-u3f053tc9c] {
    text-align: right;
}

.predTeamLogo[b-u3f053tc9c] {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 4px;
}

.predTeamName[b-u3f053tc9c] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
}

.predictionGrid[b-u3f053tc9c] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.predRow[b-u3f053tc9c] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
    transition: border-color 0.15s;
}

.predRow.predCorrect[b-u3f053tc9c] {
    border-color: rgba(34, 197, 94, 0.15);
    background: rgba(34, 197, 94, 0.03);
}

.predRow.predWrong[b-u3f053tc9c] {
    border-color: rgba(239, 68, 68, 0.15);
    background: rgba(239, 68, 68, 0.03);
}

.predModelInfo[b-u3f053tc9c] {
    min-width: 100px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.predModelName[b-u3f053tc9c] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text);
}

.predDraftTag[b-u3f053tc9c] {
    font-size: 0.55rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
    letter-spacing: 0.5px;
}

.predBarContainer[b-u3f053tc9c] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.predPct[b-u3f053tc9c] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--muted);
    min-width: 36px;
    font-variant-numeric: tabular-nums;
}

.predPctLeft[b-u3f053tc9c] {
    text-align: right;
}

.predPctRight[b-u3f053tc9c] {
    text-align: left;
}

.predPctFavored[b-u3f053tc9c] {
    color: var(--text);
    font-weight: 700;
}

.predBar[b-u3f053tc9c] {
    flex: 1;
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
}

.predBarFillLeft[b-u3f053tc9c] {
    background: linear-gradient(90deg, #3b82f6, #6366f1);
    border-radius: 3px 0 0 3px;
    transition: width 0.3s ease;
}

.predBarFillRight[b-u3f053tc9c] {
    background: linear-gradient(90deg, #dc2626, #ef4444);
    border-radius: 0 3px 3px 0;
    transition: width 0.3s ease;
}

.predResult[b-u3f053tc9c] {
    min-width: 24px;
    text-align: center;
}

.predBadge[b-u3f053tc9c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: 700;
}

.predBadgeCorrect[b-u3f053tc9c] {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.predBadgeWrong[b-u3f053tc9c] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.predBadgeUncertain[b-u3f053tc9c] {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

/* Non-Winner series markets (Series Handicap / Total Maps / Exact Score) shown below the
   Series Predictions panel. Reuses the predRow/predCorrect/predWrong chrome; the centre
   column shows the model's pick chip + confidence instead of a two-sided probability bar. */
.seriesMarketCard[b-u3f053tc9c] {
    margin-top: 12px;
}

.seriesMarketRow .seriesMarketPickWrap[b-u3f053tc9c] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.seriesMarketPickLogo[b-u3f053tc9c] {
    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}

.seriesMarketPickLabel[b-u3f053tc9c] {
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(226, 232, 240, 0.95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.seriesMarketPickConf[b-u3f053tc9c] {
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(148, 163, 184, 0.9);
    flex-shrink: 0;
}

.predUncertain[b-u3f053tc9c] {
    opacity: 0.6;
}

.predictionSummary[b-u3f053tc9c] {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(99, 102, 241, 0.1);
    text-align: center;
}

.predSummaryText[b-u3f053tc9c] {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--muted);
}

/* ── View Mode Tabs ──────────────────────────────────────── */

.viewModeTabs[b-u3f053tc9c] {
    display: flex;
    gap: 4px;
    margin: 0 0 12px;
}

.viewModeTab[b-u3f053tc9c] {
    padding: 8px 18px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.viewModeTab:hover[b-u3f053tc9c] {
    border-color: var(--blue);
    color: var(--text);
}

.viewModeTabActive[b-u3f053tc9c] {
    background: rgba(59, 130, 246, 0.12);
    border-color: var(--blue);
    color: var(--blueLight);
}

/* ── Global leaderboard (Data → Global view) ─────────────── */
.rankViewTabs[b-u3f053tc9c] {
    display: flex;
    gap: 6px;
    margin: 0 0 16px;
}
.rankViewTab[b-u3f053tc9c] {
    padding: 9px 22px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}
.rankViewTab:hover[b-u3f053tc9c] { border-color: var(--blue); color: var(--text); }
.rankViewTabActive[b-u3f053tc9c] {
    background: rgba(59, 130, 246, 0.14);
    border-color: var(--blue);
    color: var(--blueLight);
}

.globalRankings[b-u3f053tc9c] { display: flex; flex-direction: column; gap: 12px; }

.globalTabs[b-u3f053tc9c], .globalRoleFilter[b-u3f053tc9c] {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.globalTab[b-u3f053tc9c] {
    padding: 7px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}
.globalRoleBtn[b-u3f053tc9c] {
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}
.globalTab:hover[b-u3f053tc9c], .globalRoleBtn:hover[b-u3f053tc9c] { border-color: var(--blue); color: var(--text); }
.globalTabActive[b-u3f053tc9c], .globalRoleBtnActive[b-u3f053tc9c] {
    background: rgba(59, 130, 246, 0.12);
    border-color: var(--blue);
    color: var(--blueLight);
}

.globalRowLink[b-u3f053tc9c] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}
.globalRowLink:hover[b-u3f053tc9c] { color: var(--blueLight); text-decoration: underline; }
.globalRowLogo[b-u3f053tc9c] {
    width: 22px;
    height: 22px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}

/* Global search box: capped on desktop, full-width on mobile. */
.globalSearchBox[b-u3f053tc9c] { width: 100%; max-width: 360px; }
.globalSearchBox .searchInput[b-u3f053tc9c] { width: 100%; min-width: 0; box-sizing: border-box; }

/* Mobile: tabs/filters/search stack and fill width; tables scroll horizontally. */
@media (max-width: 768px) {
    .rankViewTabs[b-u3f053tc9c], .globalTabs[b-u3f053tc9c] { width: 100%; }
    .rankViewTab[b-u3f053tc9c], .globalTab[b-u3f053tc9c] { flex: 1 1 0; text-align: center; padding: 9px 8px; }
    .globalSearchBox[b-u3f053tc9c] { max-width: none; }
    .globalRoleFilter[b-u3f053tc9c] { gap: 6px; }
    .globalRoleBtn[b-u3f053tc9c] { flex: 1 1 auto; text-align: center; }
}

/* ── Head-to-Head ────────────────────────────────────────── */

.h2hRoleTabs[b-u3f053tc9c] {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.h2hRoleTab[b-u3f053tc9c] {
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.h2hRoleTab:hover[b-u3f053tc9c] {
    border-color: var(--blue);
    color: var(--text);
}

.h2hRoleTabActive[b-u3f053tc9c] {
    background: rgba(59, 130, 246, 0.12);
    border-color: var(--blue);
    color: var(--blueLight);
}

.h2hRoleTab-top.h2hRoleTabActive[b-u3f053tc9c] { border-color: #f87171; color: #f87171; background: rgba(239,68,68,0.08); }
.h2hRoleTab-jungle.h2hRoleTabActive[b-u3f053tc9c] { border-color: #4ade80; color: #4ade80; background: rgba(34,197,94,0.08); }
.h2hRoleTab-mid.h2hRoleTabActive[b-u3f053tc9c] { border-color: #818cf8; color: #818cf8; background: rgba(99,102,241,0.08); }
.h2hRoleTab-adc.h2hRoleTabActive[b-u3f053tc9c] { border-color: #fbbf24; color: #fbbf24; background: rgba(251,191,36,0.08); }
.h2hRoleTab-support.h2hRoleTabActive[b-u3f053tc9c] { border-color: #38bdf8; color: #38bdf8; background: rgba(56,189,248,0.08); }

/* H2H Panel */
.h2hPanel[b-u3f053tc9c] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.h2hPanelHeader[b-u3f053tc9c] {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    gap: 12px;
    border-bottom: 1px solid var(--borderSoft);
    background: linear-gradient(135deg, rgba(59,130,246,0.04), rgba(139,92,246,0.03), transparent);
}

.h2hSide[b-u3f053tc9c] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.h2hSideLeft[b-u3f053tc9c] { }
.h2hSideRight[b-u3f053tc9c] { justify-content: flex-end; }

.h2hSideMeta[b-u3f053tc9c] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.h2hSideMetaRight[b-u3f053tc9c] {
    align-items: flex-end;
}

.h2hSideName[b-u3f053tc9c] {
    font-size: 0.88rem;
    font-weight: 800;
    color: #f0f4f8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h2hSideSub[b-u3f053tc9c] {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--muted);
    opacity: 0.7;
}

/* H2H winner header highlight */
.h2hHeaderT1Win[b-u3f053tc9c] {
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.08), transparent 40%, transparent);
}

.h2hHeaderT2Win[b-u3f053tc9c] {
    background: linear-gradient(270deg, rgba(34, 197, 94, 0.08), transparent 40%, transparent);
}

.h2hTeamLogo[b-u3f053tc9c] {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 6px;
    flex-shrink: 0;
}

.h2hLogoWinner[b-u3f053tc9c] {
    border: 1.5px solid rgba(34, 197, 94, 0.35);
}

.h2hWinTag[b-u3f053tc9c] {
    font-size: 0.55rem;
    font-weight: 900;
    padding: 3px 8px;
    border-radius: 4px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #ffffff;
    letter-spacing: 0.08em;
    flex-shrink: 0;
}

.h2hPanelChamp[b-u3f053tc9c] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--borderSoft);
    background: rgba(255,255,255,0.05);
}

.h2hVsLabel[b-u3f053tc9c] {
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--muted);
    opacity: 0.35;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}

.h2hMvpBadge[b-u3f053tc9c] {
    display: inline-block;
    margin-left: 3px;
    padding: 0 4px;
    border-radius: 3px;
    font-size: 0.5rem;
    font-weight: 800;
    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.25);
    vertical-align: middle;
}

/* H2H Bar Rows */
.h2hBarSection[b-u3f053tc9c] {
    padding: 4px 0;
}

.h2hBarRow[b-u3f053tc9c] {
    display: flex;
    align-items: center;
    padding: 6px 16px;
    gap: 10px;
}

.h2hBarVal[b-u3f053tc9c] {
    min-width: 60px;
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.h2hBarValRight[b-u3f053tc9c] {
    text-align: right;
}

.h2hBarCenter[b-u3f053tc9c] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 0;
}

.h2hBarLabel[b-u3f053tc9c] {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.h2hBar[b-u3f053tc9c] {
    display: flex;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    gap: 2px;
}

.h2hBarFillLeft[b-u3f053tc9c] {
    height: 100%;
    background: rgba(59,130,246,0.25);
    border-radius: 3px 0 0 3px;
    transition: width 0.3s ease;
}

.h2hBarFillRight[b-u3f053tc9c] {
    height: 100%;
    background: rgba(239,68,68,0.25);
    border-radius: 0 3px 3px 0;
    transition: width 0.3s ease;
}

.h2hBarFillLeft.h2hBarWin[b-u3f053tc9c] { background: rgba(59,130,246,0.55); }
.h2hBarFillRight.h2hBarWin[b-u3f053tc9c] { background: rgba(239,68,68,0.55); }

.h2hBetter[b-u3f053tc9c] { color: #22c55e !important; }
.h2hEqual[b-u3f053tc9c] { color: #fbbf24 !important; }
.h2hWorse[b-u3f053tc9c] { color: #ef4444 !important; }

/* ── Team Summary Row ───────────────────────────────────── */

.teamSummaryRow[b-u3f053tc9c] {
    background: rgba(37, 99, 235, 0.06);
    border-top: 2px solid var(--borderSoft);
}

.teamSummaryRow td[b-u3f053tc9c] {
    font-weight: 800 !important;
    font-size: 0.78rem;
}

.teamSummaryLabel[b-u3f053tc9c] {
    font-weight: 800;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
}

/* ── Mobile Series Section Tabs ──────────────────────────── */

.mobileSeriesTabs[b-u3f053tc9c] {
    display: none; /* hidden on desktop */
}

.seriesTabContent[b-u3f053tc9c] {
    /* On desktop, always visible */
}

/* ── Responsive additions ─────────────────────────────────── */

@media (max-width: 768px) {
    .seriesHeader[b-u3f053tc9c] {
        gap: 12px;
        padding: 20px 16px 12px;
    }

    .seriesTeamName[b-u3f053tc9c] {
        font-size: 0.95rem;
    }

    .seriesScoreNum[b-u3f053tc9c] {
        font-size: 1.4rem;
    }

    .seriesTournamentBadge[b-u3f053tc9c] {
        position: static;
        justify-content: center;
        margin: 8px 16px 0;
    }

    .mhTeamName[b-u3f053tc9c] {
        min-width: 70px;
        font-size: 0.75rem;
    }

    .objectivesBar[b-u3f053tc9c] {
        flex-wrap: wrap;
    }

    .objItem[b-u3f053tc9c] {
        min-width: calc(33% - 2px);
    }

    .draftRow[b-u3f053tc9c] {
        flex-direction: column;
        gap: 12px;
    }

    .h2hRoleTabs[b-u3f053tc9c] {
        gap: 3px;
    }

    .h2hRoleTab[b-u3f053tc9c] {
        padding: 5px 10px;
        font-size: 0.65rem;
    }

    .h2hBarVal[b-u3f053tc9c] {
        min-width: 45px;
        font-size: 0.72rem;
    }

    .h2hPanelHeader[b-u3f053tc9c] {
        padding: 12px 14px;
        gap: 8px;
    }

    /* ── Game Scoreboard (Compact mobile) ──────────────────── */

    .gsTeamRow[b-u3f053tc9c] {
        gap: 8px;
        padding: 10px 10px 18px;
    }

    .gsTeam[b-u3f053tc9c] {
        min-width: 0;
        gap: 4px;
        flex: 1;
    }

    .gsTeamLeft[b-u3f053tc9c] { justify-content: flex-end; }
    .gsTeamRight[b-u3f053tc9c] { justify-content: flex-start; }

    .gsTeamClickable[b-u3f053tc9c] {
        gap: 4px;
    }

    .gsTeamName[b-u3f053tc9c] {
        font-size: 0.75rem;
    }

    .gsTeamLogo[b-u3f053tc9c] {
        width: 22px;
        height: 22px;
    }

    .gsVictoryBadge[b-u3f053tc9c] {
        font-size: 0.45rem;
        padding: 2px 6px;
    }

    .gsSideTag[b-u3f053tc9c] {
        font-size: 0.48rem;
        padding: 1px 4px;
    }

    .gsTeamWinSide[b-u3f053tc9c] {
        padding: 6px 8px;
    }

    .gsKillNum[b-u3f053tc9c] {
        font-size: 1.3rem;
    }

    .gsGameTime[b-u3f053tc9c] {
        font-size: 0.62rem;
    }

    .gsMetaRow[b-u3f053tc9c] {
        gap: 6px;
        padding: 0 10px 10px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .gsMeta[b-u3f053tc9c] {
        font-size: 0.58rem;
        padding: 2px 6px;
    }

    /* ── Player Stats Table (Compact mobile) ───────────────── */

    .playerStatsTitle[b-u3f053tc9c] {
        padding: 10px 12px 6px;
        font-size: 0.7rem;
    }

    .playerStatsTable[b-u3f053tc9c] {
        min-width: 600px;
    }

    .playerStatsTable thead th[b-u3f053tc9c] {
        font-size: 0.55rem;
        padding: 4px 6px;
    }

    .playerStatsTable tbody td[b-u3f053tc9c] {
        font-size: 0.68rem;
        padding: 5px 6px;
    }

    .champCell[b-u3f053tc9c] {
        gap: 4px;
    }

    .champIconSmall[b-u3f053tc9c] {
        width: 18px;
        height: 18px;
    }

    /* ── View Mode Tabs ──────────────────────────────────────── */

    .viewModeTabs[b-u3f053tc9c] {
        gap: 0;
    }

    .viewModeTab[b-u3f053tc9c] {
        font-size: 0.72rem;
        padding: 8px 12px;
    }

    /* ── Draft Section (Compact mobile) ─────────────────────── */

    .draftSection[b-u3f053tc9c] {
        padding: 10px 12px;
    }

    .draftChamps[b-u3f053tc9c] {
        gap: 4px;
    }

    .champImg[b-u3f053tc9c], .champImgBan[b-u3f053tc9c] {
        width: 26px;
        height: 26px;
    }

    .champImgBan[b-u3f053tc9c] {
        width: 20px;
        height: 20px;
    }

    /* ── Series Header (Compact mobile) ────────────────────── */

    .seriesTeamBlock[b-u3f053tc9c] {
        min-width: 0;
        gap: 6px;
    }

    .seriesTeamLogo[b-u3f053tc9c] {
        width: 28px;
        height: 28px;
    }

    /* ── Mobile Section Tabs ─────────────────────────────────── */

    .mobileSeriesTabs[b-u3f053tc9c] {
        display: flex;
        gap: 0;
        background: rgba(26, 35, 50, 0.95);
        border-radius: 10px;
        padding: 3px;
        margin-bottom: 8px;
    }

    .mobileSeriesTab[b-u3f053tc9c] {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 8px 4px;
        border-radius: 8px;
        border: none;
        background: transparent;
        color: #7a8a9e;
        font-size: 0.58rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .mobileSeriesTab svg[b-u3f053tc9c] {
        opacity: 0.6;
    }

    .mobileSeriesTabActive[b-u3f053tc9c] {
        background: rgba(59, 130, 246, 0.15);
        color: #93c5fd;
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.12);
    }

    .mobileSeriesTabActive svg[b-u3f053tc9c] {
        opacity: 1;
    }

    .seriesTabContent[b-u3f053tc9c] {
        display: none;
    }

    .seriesTabActive[b-u3f053tc9c] {
        display: block;
    }

    /* Hide desktop view mode tabs on mobile — the mobile section tabs replace them */
    .viewModeTabs[b-u3f053tc9c] {
        display: none;
    }
}

/* ── Series detail prelive odds row ──
   Sits under the match meta (date) below the team-score block. Layout mirrors
   the team-vs-team frame above: team name + odds chip on the left, separator,
   odds chip + team name on the right. Winner chip tints green / loser red. */
.seriesOddsRow[b-u3f053tc9c] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 12px 0 4px;
    padding: 10px 14px;
    background: color-mix(in srgb, var(--text) 3%, transparent);
    border: 1px solid var(--borderSoft);
    border-radius: 10px;
    flex-wrap: wrap;
}
.seriesOddsLabel[b-u3f053tc9c] {
    font-size: 0.64rem;
    font-weight: 700;
    color: var(--mutedFaint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-right: 6px;
}
.seriesOddsBlock[b-u3f053tc9c] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.seriesOddsTeamName[b-u3f053tc9c] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--textSoft);
}
.seriesOddsChip[b-u3f053tc9c] {
    font-size: 0.95rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 7px;
    letter-spacing: -0.005em;
}
.seriesOddsWin[b-u3f053tc9c] {
    background: rgba(34, 197, 94, 0.16);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.35);
}
.seriesOddsLose[b-u3f053tc9c] {
    background: rgba(248, 113, 113, 0.14);
    color: #f87171;
    border: 1px solid rgba(248, 113, 113, 0.3);
}
.seriesOddsSep[b-u3f053tc9c] {
    color: var(--mutedFaint);
    font-weight: 700;
    font-size: 0.95rem;
}
@media (max-width: 540px) {
    .seriesOddsRow[b-u3f053tc9c] { gap: 8px; padding: 8px 10px; }
    .seriesOddsTeamName[b-u3f053tc9c] { font-size: 0.72rem; }
    .seriesOddsChip[b-u3f053tc9c] { font-size: 0.85rem; padding: 3px 9px; }
}
/* /Components/Pages/ReportDetail.razor.rz.scp.css */
/* /reports/{date} detail page */

.reportDetail[b-qew9hiblov] {
    max-width: 1200px;
    margin: 0 auto 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ── Header banner ──────────────────────────────── */

.reportDetailHeader[b-qew9hiblov] {
    background: var(--panelSoft, var(--panel));
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.1rem 1.4rem;
}

.reportDetailHeaderInner[b-qew9hiblov] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.reportDetailBrand[b-qew9hiblov] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.reportDetailBrandStripe[b-qew9hiblov] {
    width: 6px;
    height: 36px;
    background: #22d3ee;
    border-radius: 2px;
}

.reportDetailBrandText[b-qew9hiblov] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.reportDetailBrandName[b-qew9hiblov] {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--text);
}

.reportDetailBrandSub[b-qew9hiblov] {
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.reportDetailMeta[b-qew9hiblov] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
}

.reportDetailRange[b-qew9hiblov] {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
}

.reportDetailMetaLine[b-qew9hiblov] {
    font-size: 0.78rem;
    color: var(--muted);
}

/* ── Section heads ──────────────────────────────── */

.reportDetailSectionTitle[b-qew9hiblov] {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 0.25rem;
}

.reportDetailSectionSubtitle[b-qew9hiblov] {
    font-size: 0.85rem;
    color: var(--muted);
    margin: 0 0 1rem;
}

/* ── Overview cards ─────────────────────────────── */

.reportDetailOverview[b-qew9hiblov] {
    display: flex;
    flex-direction: column;
}

.reportDetailOverviewGrid[b-qew9hiblov] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
}

.reportDetailModelCard[b-qew9hiblov] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.reportDetailModelStripe[b-qew9hiblov] {
    height: 3px;
}

.reportDetailModelBody[b-qew9hiblov] {
    padding: 0.95rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.reportDetailModelHead[b-qew9hiblov] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.reportDetailModelName[b-qew9hiblov] {
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.reportDetailAccuracyBlock[b-qew9hiblov] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: 0.15rem 0.5rem;
    align-items: baseline;
}

.reportDetailAccuracyLabel[b-qew9hiblov] {
    grid-column: 1;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.reportDetailAccuracyValue[b-qew9hiblov] {
    grid-column: 2;
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--text);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.reportDetailAccuracyDenom[b-qew9hiblov] {
    grid-column: 3;
    font-size: 0.7rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.reportDetailAccuracyBar[b-qew9hiblov] {
    grid-column: 1 / span 3;
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    overflow: hidden;
}

.reportDetailAccuracyBarFill[b-qew9hiblov] {
    height: 100%;
    border-radius: 2px;
}

/* ── Match results ──────────────────────────────── */

.reportDetailDay[b-qew9hiblov] {
    margin-bottom: 1.5rem;
}

/* Day banner: 3-column grid keeps the centered heading optically centered
   regardless of stripe + chip widths. The stripe is purely decorative on
   the left; the chip sits flush right. */
.reportDetailDayHeader[b-qew9hiblov] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.85rem;
    padding-bottom: 0.95rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
}

.reportDetailDayStripe[b-qew9hiblov] {
    justify-self: start;
    width: 4px;
    height: 30px;
    background: #22d3ee;
    border-radius: 2px;
}

.reportDetailDayHeading[b-qew9hiblov] {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    text-align: center;
}

.reportDetailDayName[b-qew9hiblov] {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    color: var(--text);
    line-height: 1.1;
}

.reportDetailDayDate[b-qew9hiblov] {
    font-size: 0.85rem;
    color: var(--muted);
    letter-spacing: 0.02em;
}

.reportDetailDayChip[b-qew9hiblov] {
    justify-self: end;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--muted);
    border: 1px solid var(--border);
    background: var(--panelSoft, rgba(0,0,0,0.18));
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
}

.reportDetailEmpty[b-qew9hiblov] {
    background: var(--panel);
    border: 1px dashed var(--border);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    color: var(--muted);
}

/* ── Footer / actions ───────────────────────────── */

.reportDetailFooter[b-qew9hiblov] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.reportDetailFooterRow[b-qew9hiblov] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
}

.reportDetailPdfBtn[b-qew9hiblov],
.reportDetailShareBtn[b-qew9hiblov] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.1rem;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
}

.reportDetailPdfBtn:hover[b-qew9hiblov] {
    border-color: #fbbf24;
    color: #fbbf24;
}

.reportDetailShareBtn:hover[b-qew9hiblov] {
    border-color: #60a5fa;
    color: #60a5fa;
}

.reportDetailNav[b-qew9hiblov] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.reportDetailNavLink[b-qew9hiblov] {
    display: inline-flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.65rem 1rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    background: var(--panel);
    transition: border-color 0.15s, color 0.15s, transform 0.15s;
}

.reportDetailNavLink:hover[b-qew9hiblov] {
    border-color: #22d3ee;
    color: #22d3ee;
}

.reportDetailNavBack[b-qew9hiblov] {
    flex-direction: row;
    justify-self: center;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.reportDetailNavPrev[b-qew9hiblov] { justify-self: start; }
.reportDetailNavNext[b-qew9hiblov] { justify-self: end; align-items: flex-end; text-align: right; }

.reportDetailNavLabel[b-qew9hiblov] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.reportDetailNavDate[b-qew9hiblov] {
    font-size: 0.92rem;
    font-weight: 700;
}

/* ── Admin tweet workflow ───────────────────────── */

.reportDetailAdminPanel[b-qew9hiblov] {
    margin: 1.25rem 0 0.5rem;
    padding: 0.85rem 1rem;
    background: rgba(34, 211, 238, 0.05);
    border: 1px dashed rgba(34, 211, 238, 0.35);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.reportDetailAdminLabel[b-qew9hiblov] {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #22d3ee;
}

.reportDetailAdminRow[b-qew9hiblov] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

.reportDetailAdminBtn[b-qew9hiblov] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.95rem;
    background: var(--panel);
    color: var(--text);
    border: 1px solid #22d3ee;
    border-radius: 8px;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.reportDetailAdminBtn:hover[b-qew9hiblov] {
    background: rgba(34, 211, 238, 0.12);
    color: #67e8f9;
}

.reportDetailAdminMissing[b-qew9hiblov] {
    font-size: 0.78rem;
    color: var(--muted);
    font-style: italic;
}

/* ── PDF-only / pending / 404 ───────────────────── */

.reportDetailPdfOnlyNotice[b-qew9hiblov] {
    background: rgba(251, 191, 36, 0.06);
    border: 1px solid rgba(251, 191, 36, 0.4);
    border-radius: 12px;
    padding: 1.2rem 1.4rem;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.reportDetailPdfOnlyNotice p[b-qew9hiblov] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--muted);
}

.reportDetailMissing[b-qew9hiblov] {
    max-width: 720px;
    margin: 4rem auto;
    text-align: center;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 3rem 2rem;
}

.reportDetailMissingTitle[b-qew9hiblov] {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 0.5rem;
}

.reportDetailMissingDesc[b-qew9hiblov] {
    font-size: 0.95rem;
    color: var(--muted);
    margin: 0 0 1.5rem;
}

.reportDetailMissingLink[b-qew9hiblov] {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    background: var(--panel);
    border: 1px solid #60a5fa;
    color: #60a5fa;
    border-radius: 10px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 700;
}

/* ── Mobile ─────────────────────────────────────── */

@media (max-width: 768px) {
    .reportDetailOverviewGrid[b-qew9hiblov] {
        grid-template-columns: repeat(2, 1fr);
    }

    .reportDetailHeaderInner[b-qew9hiblov] {
        flex-direction: column;
        align-items: flex-start;
    }

    .reportDetailMeta[b-qew9hiblov] {
        align-items: flex-start;
    }

    .reportDetailNav[b-qew9hiblov] {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }

    .reportDetailNavPrev[b-qew9hiblov],
    .reportDetailNavNext[b-qew9hiblov],
    .reportDetailNavBack[b-qew9hiblov] {
        justify-self: stretch;
        align-items: flex-start;
        text-align: left;
    }

    .reportDetailDayName[b-qew9hiblov] {
        font-size: 1.15rem;
    }

    .reportDetailDayHeader[b-qew9hiblov] {
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .reportDetailOverviewGrid[b-qew9hiblov] {
        grid-template-columns: 1fr;
    }
}

/* ── Per-market breakdown ───────────────────────────── */

.reportDetailMarkets[b-qew9hiblov] {
    margin-top: 1.6rem;
}

.reportMarketGrid[b-qew9hiblov] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
}

.reportMarketCard[b-qew9hiblov] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}

.reportMarketBody[b-qew9hiblov] {
    padding: 0.85rem 1rem 0.95rem;
}

.reportMarketHead[b-qew9hiblov] {
    margin-bottom: 0.55rem;
}

.reportMarketTable[b-qew9hiblov] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.reportMarketTable thead th[b-qew9hiblov] {
    text-align: left;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(148, 163, 184, 0.7);
    padding: 0 0 0.4rem;
    border-bottom: 1px solid var(--border);
}

.reportMarketTable thead th.rmColAcc[b-qew9hiblov],
.reportMarketTable thead th.rmColRoi[b-qew9hiblov] {
    text-align: right;
}

.reportMarketTable tbody td[b-qew9hiblov] {
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
    vertical-align: middle;
}

.reportMarketTable tbody tr:last-child td[b-qew9hiblov] {
    border-bottom: none;
}

.rmMarket[b-qew9hiblov] {
    font-weight: 600;
    color: rgba(226, 232, 240, 0.92);
    white-space: nowrap;
}

.rmAcc[b-qew9hiblov],
.rmRoi[b-qew9hiblov] {
    text-align: right;
    white-space: nowrap;
}

.rmPct[b-qew9hiblov] {
    font-weight: 800;
    color: #e2e8f0;
}

.rmDenom[b-qew9hiblov] {
    margin-left: 0.35rem;
    font-size: 0.68rem;
    color: rgba(148, 163, 184, 0.7);
}

.rmRoiPct[b-qew9hiblov] {
    font-weight: 800;
}

.rmPos[b-qew9hiblov] { color: #34d399; }
.rmNeg[b-qew9hiblov] { color: #f87171; }

.rmEmpty[b-qew9hiblov] {
    color: rgba(148, 163, 184, 0.45);
    font-weight: 700;
}

/* Total row: a touch heavier with a stronger top divider. */
.rmTotalRow td[b-qew9hiblov] {
    border-top: 1px solid var(--border);
    padding-top: 0.5rem;
    font-weight: 800;
}

.rmTotalRow .rmMarket[b-qew9hiblov] {
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.72rem;
    color: #f1f5f9;
}

@media (max-width: 640px) {
    .reportMarketGrid[b-qew9hiblov] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Reports.razor.rz.scp.css */
/* Reports index page (/reports) */

.reportsHero[b-qde38x5u8w] {
    margin: 0 auto 2rem;
    max-width: 1200px;
    padding: 1.5rem 0 1rem;
}

.reportsHeroTitle[b-qde38x5u8w] {
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0 0 0.4rem;
}

.reportsHeroSubtitle[b-qde38x5u8w] {
    font-size: 1rem;
    color: var(--muted);
    margin: 0 0 1.5rem;
    max-width: 720px;
}

.reportsAllTimeGrid[b-qde38x5u8w] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
}

.reportsModelBox[b-qde38x5u8w] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.reportsModelBoxStripe[b-qde38x5u8w] {
    height: 3px;
    width: 100%;
}

.reportsModelBoxBody[b-qde38x5u8w] {
    padding: 0.85rem 0.95rem 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.reportsModelBoxHead[b-qde38x5u8w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.reportsModelBoxName[b-qde38x5u8w] {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.reportsAccuracyRow[b-qde38x5u8w] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: 0.5rem;
}

.reportsAccuracyLabel[b-qde38x5u8w] {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.reportsAccuracyValue[b-qde38x5u8w] {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--text);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.reportsAccuracyDenom[b-qde38x5u8w] {
    font-size: 0.7rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.reportsHeroFootnote[b-qde38x5u8w] {
    font-size: 0.78rem;
    color: var(--muted);
    margin: 0.85rem 0 0;
}

/* ── Filters ────────────────────────────────────── */

.reportsFilters[b-qde38x5u8w] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
    max-width: 1200px;
    margin: 0 auto 1.25rem;
    padding: 0.85rem 1rem;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.reportsFilterField[b-qde38x5u8w] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.reportsFilterLabel[b-qde38x5u8w] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.reportsFilterInput[b-qde38x5u8w] {
    background: var(--panelSoft, var(--panel));
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.45rem 0.65rem;
    font-size: 0.9rem;
    min-width: 165px;
    font: inherit;
    color-scheme: dark;
}

.reportsFilterInput:focus[b-qde38x5u8w] {
    outline: 2px solid #60a5fa;
    outline-offset: 1px;
}

.reportsFilterReset[b-qde38x5u8w] {
    margin-left: auto;
    padding: 0.45rem 0.85rem;
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.reportsFilterReset:hover[b-qde38x5u8w] {
    color: var(--text);
    border-color: #60a5fa;
}

/* ── List ───────────────────────────────────────── */

.reportsListSection[b-qde38x5u8w] {
    max-width: 1200px;
    margin: 0 auto 3rem;
}

.reportsList[b-qde38x5u8w] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 0.9rem;
}

.reportsListCard[b-qde38x5u8w] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.reportsListCard:hover[b-qde38x5u8w] {
    border-color: #22d3ee;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(34, 211, 238, 0.12);
}

.reportsListCardHead[b-qde38x5u8w] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.reportsListCardRange[b-qde38x5u8w] {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
}

.reportsListCardCount[b-qde38x5u8w] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.02em;
}

.reportsListCardModels[b-qde38x5u8w] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem 0.7rem;
}

.reportsListCardModel[b-qde38x5u8w] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid color-mix(in srgb, var(--model-color, var(--border)) 28%, transparent);
    border-left: 3px solid var(--model-color, var(--border));
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--model-color, transparent) 10%, transparent) 0%,
            color-mix(in srgb, var(--model-color, transparent) 3%, transparent) 100%
        ),
        var(--panelSoft, rgba(0, 0, 0, 0.18));
    border-radius: 4px;
}

.reportsListCardModelName[b-qde38x5u8w] {
    font-size: 0.66rem;
    font-weight: 800;
    color: var(--model-color, var(--muted));
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.reportsListCardModelStats[b-qde38x5u8w] {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.reportsListCardModelStat[b-qde38x5u8w] {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.reportsListCardModelStatLabel[b-qde38x5u8w] {
    font-size: 0.55rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.reportsListCardModelStatValue[b-qde38x5u8w] {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.reportsListCardPdfBadge[b-qde38x5u8w] {
    align-self: flex-start;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.4);
    background: rgba(251, 191, 36, 0.1);
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
}

.reportsListCardPdfOnly:hover[b-qde38x5u8w] {
    border-color: #fbbf24;
    box-shadow: 0 6px 18px rgba(251, 191, 36, 0.12);
}

/* ── Pagination ─────────────────────────────────── */

.reportsPagination[b-qde38x5u8w] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 2rem 0 0;
}

.reportsPageBtn[b-qde38x5u8w] {
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.reportsPageBtn:hover:not(:disabled)[b-qde38x5u8w] {
    border-color: #60a5fa;
}

.reportsPageBtn:disabled[b-qde38x5u8w] {
    opacity: 0.4;
    cursor: default;
}

.reportsPageOf[b-qde38x5u8w] {
    font-size: 0.85rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* ── Accuracy by league ─────────────────────────── */

.reportsLeagueSection[b-qde38x5u8w] {
    max-width: 1200px;
    margin: 0 auto 3rem;
}

.reportsLeagueTitle[b-qde38x5u8w] {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0 0 0.35rem;
}

.reportsLeagueDesc[b-qde38x5u8w] {
    font-size: 0.85rem;
    color: var(--muted);
    margin: 0 0 1rem;
    max-width: 720px;
}

.reportsLeagueTableWrap[b-qde38x5u8w] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow-x: auto;
}

.reportsLeagueTable[b-qde38x5u8w] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.reportsLeagueTable th[b-qde38x5u8w] {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.reportsLeagueThLeague[b-qde38x5u8w] {
    text-align: left;
}

.reportsLeagueThNum[b-qde38x5u8w] {
    text-align: right;
}

.reportsLeagueTable td[b-qde38x5u8w] {
    padding: 0.55rem 0.9rem;
    border-bottom: 1px solid var(--border);
}

.reportsLeagueTable tbody tr:last-child td[b-qde38x5u8w] {
    border-bottom: none;
}

.reportsLeagueTdLeague[b-qde38x5u8w] {
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
}

.reportsLeagueTdNum[b-qde38x5u8w] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.reportsLeaguePct[b-qde38x5u8w] {
    font-weight: 800;
    color: var(--text);
}

.reportsLeagueDenom[b-qde38x5u8w] {
    font-size: 0.68rem;
    color: var(--muted);
    margin-left: 0.35rem;
}

.reportsLeagueToggle[b-qde38x5u8w] {
    display: block;
    margin: 0.85rem auto 0;
    padding: 0.45rem 1rem;
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.reportsLeagueToggle:hover[b-qde38x5u8w] {
    color: var(--text);
    border-color: #60a5fa;
}

/* ── Empty ──────────────────────────────────────── */

.reportsEmpty[b-qde38x5u8w] {
    background: var(--panel);
    border: 1px dashed var(--border);
    border-radius: 14px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--muted);
    max-width: 720px;
    margin: 0 auto;
}

.reportsEmpty p[b-qde38x5u8w] {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* ── Mobile ─────────────────────────────────────── */

@media (max-width: 768px) {
    .reportsHeroTitle[b-qde38x5u8w] {
        font-size: 1.5rem;
    }

    .reportsAllTimeGrid[b-qde38x5u8w] {
        grid-template-columns: repeat(2, 1fr);
    }

    .reportsAccuracyValue[b-qde38x5u8w] {
        font-size: 1.2rem;
    }

    .reportsList[b-qde38x5u8w] {
        grid-template-columns: 1fr;
    }

    .reportsFilterInput[b-qde38x5u8w] {
        min-width: 0;
        width: 100%;
    }

    .reportsFilterField[b-qde38x5u8w] {
        flex: 1 1 calc(50% - 0.5rem);
        min-width: 0;
    }

    .reportsFilterReset[b-qde38x5u8w] {
        margin-left: 0;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .reportsAllTimeGrid[b-qde38x5u8w] {
        grid-template-columns: 1fr;
    }
}

/* ── Closing-line value panel ────────────────────────────────────────── */
.reportsClvHero[b-qde38x5u8w] { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 14px; }
.reportsClvStat[b-qde38x5u8w] { display: flex; flex-direction: column; gap: 2px; }
.reportsClvVal[b-qde38x5u8w] { font-size: 1.5rem; font-weight: 900; color: var(--text); }
.reportsClvVal.pos[b-qde38x5u8w] { color: #34d399; }
.reportsClvVal.neg[b-qde38x5u8w] { color: #ef4444; }
.reportsClvLbl[b-qde38x5u8w] { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.reportsClvModels[b-qde38x5u8w] { display: flex; flex-direction: column; gap: 6px; max-width: 460px; }
.reportsClvModelRow[b-qde38x5u8w] { display: grid; grid-template-columns: 1fr auto auto auto; gap: 14px; align-items: baseline;
    padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px;
    background: color-mix(in srgb, var(--muted) 5%, transparent); }
.reportsClvModelName[b-qde38x5u8w] { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.reportsClvModelStat[b-qde38x5u8w] { font-size: 0.78rem; font-weight: 800; min-width: 48px; text-align: right; }
.reportsClvModelStat.pos[b-qde38x5u8w] { color: #34d399; }
.reportsClvModelStat.neg[b-qde38x5u8w] { color: #ef4444; }
.reportsClvModelDenom[b-qde38x5u8w] { font-size: 0.66rem; color: var(--muted); min-width: 34px; text-align: right; }
/* /Components/Pages/Standings.razor.rz.scp.css */
.standingsPage[b-l7d8ffn4uj] { max-width: 760px; margin: 0 auto; padding: 28px 16px 48px; }

.standingsTitle[b-l7d8ffn4uj] { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text); margin: 0; }
.standingsLede[b-l7d8ffn4uj] { color: var(--muted); margin: 10px 0 22px; line-height: 1.5; }
.standingsSubtitle[b-l7d8ffn4uj] { color: var(--muted); font-size: 0.85rem; margin: 3px 0 0; }

.standingsHeader[b-l7d8ffn4uj] { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.standingsLeagueLogo[b-l7d8ffn4uj] { border-radius: 8px; object-fit: contain; }

/* hub */
.standingsHubGrid[b-l7d8ffn4uj] { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.standingsHubCard[b-l7d8ffn4uj] { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px;
    background: var(--panel); border: 1px solid var(--border); color: var(--text); font-weight: 700;
    text-decoration: none; transition: border-color 0.12s; }
.standingsHubCard:hover[b-l7d8ffn4uj] { border-color: color-mix(in srgb, var(--text) 25%, transparent); }
.standingsHubCard img[b-l7d8ffn4uj] { border-radius: 6px; object-fit: contain; }

/* table */
.standingsTableWrap[b-l7d8ffn4uj] { overflow-x: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; }
.standingsTable[b-l7d8ffn4uj] { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.standingsTable th[b-l7d8ffn4uj] { text-align: left; padding: 11px 14px; font-size: 0.62rem; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--mutedFaint); border-bottom: 1px solid var(--border); }
.standingsTable td[b-l7d8ffn4uj] { padding: 10px 14px; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
.standingsTable tbody tr:last-child td[b-l7d8ffn4uj] { border-bottom: none; }
.standingsTable tbody tr:hover[b-l7d8ffn4uj] { background: color-mix(in srgb, var(--text) 3%, transparent); }
.stColRank[b-l7d8ffn4uj] { width: 40px; color: var(--mutedFaint); font-weight: 700; }
.stTeamLink[b-l7d8ffn4uj] { display: inline-flex; align-items: center; gap: 9px; color: var(--text); font-weight: 700; text-decoration: none; }
.stTeamLink:hover span[b-l7d8ffn4uj] { text-decoration: underline; }
.stTeamLink img[b-l7d8ffn4uj] { border-radius: 5px; object-fit: contain; }
.stRecord b[b-l7d8ffn4uj] { color: var(--text); }
.stRecord i[b-l7d8ffn4uj] { font-style: normal; color: var(--mutedFaint); padding: 0 2px; }
.stWinRate[b-l7d8ffn4uj] { font-weight: 800; }
.stWinRate.pos[b-l7d8ffn4uj] { color: #4ade80; }
.stWinRate.neg[b-l7d8ffn4uj] { color: #f87171; }

.standingsUpdated[b-l7d8ffn4uj] { color: var(--mutedFaint); font-size: 0.78rem; margin: 12px 2px 0; }
.standingsBlurb[b-l7d8ffn4uj] { color: var(--muted); font-size: 0.85rem; line-height: 1.55; margin: 14px 2px 0; }
.standingsLinks[b-l7d8ffn4uj] { display: flex; gap: 18px; margin-top: 16px; flex-wrap: wrap; }
.standingsLinks a[b-l7d8ffn4uj] { color: #60a5fa; font-size: 0.85rem; font-weight: 600; text-decoration: none; }
.standingsLinks a:hover[b-l7d8ffn4uj] { text-decoration: underline; }
.standingsBackLink[b-l7d8ffn4uj] { color: #60a5fa; font-weight: 600; text-decoration: none; }

@media (max-width: 560px) {
    .standingsTable th[b-l7d8ffn4uj], .standingsTable td[b-l7d8ffn4uj] { padding: 9px 10px; }
}

/* Week-preview entry pill (right side of the league header). */
.standingsPreviewPill[b-l7d8ffn4uj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.4);
    background: rgba(96, 165, 250, 0.1);
    color: #60a5fa;
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    white-space: nowrap;
}
.standingsPreviewPill:hover[b-l7d8ffn4uj] { background: rgba(96, 165, 250, 0.18); }
/* /Components/Pages/TeamPage.razor.rz.scp.css */
/* /team/{id}-{slug} — server-rendered team hub (SEO). Reuses global app.css
   classes (leagueDetailHeader, champRoleGrid, rankTable, etc.) for the shared
   bits; this file only styles the new layout chrome. */

.teamPage[b-e7h3hn164o] {
    max-width: 1200px;
    margin: 0 auto 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.teamPageSection[b-e7h3hn164o] {
    background: var(--panelSoft, var(--panel));
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.1rem 1.4rem 1.3rem;
}

.teamPageSectionTitle[b-e7h3hn164o] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 1rem;
    letter-spacing: 0.01em;
}

/* ── Upcoming matches ─────────────────────────────── */

.teamUpcomingList[b-e7h3hn164o] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.teamUpcomingRow[b-e7h3hn164o] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel);
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.teamUpcomingRow:hover[b-e7h3hn164o] {
    border-color: var(--accent, #60a5fa);
    background: var(--panelSoft, var(--panel));
}

.teamUpcomingLeague[b-e7h3hn164o] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    min-width: 4rem;
}

.teamUpcomingTeams[b-e7h3hn164o] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 16rem;
    font-weight: 600;
}

.teamUpcomingVs[b-e7h3hn164o] {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 500;
}

.teamUpcomingMeta[b-e7h3hn164o] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    font-size: 0.8rem;
    color: var(--muted);
}

.teamUpcomingFormat[b-e7h3hn164o] {
    font-weight: 700;
    color: var(--text);
}

.teamUpcomingPick[b-e7h3hn164o] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.6rem;
    border-radius: 8px;
    background: rgba(96, 165, 250, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.3);
}

.teamUpcomingPickLabel[b-e7h3hn164o] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.teamUpcomingPickName[b-e7h3hn164o] {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text);
}

.teamUpcomingPickConf[b-e7h3hn164o] {
    font-weight: 700;
    font-size: 0.8rem;
    color: #60a5fa;
}

/* ── Recent form ──────────────────────────────────── */

.teamFormStrip[b-e7h3hn164o] {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.teamFormPip[b-e7h3hn164o] {
    width: 1.6rem;
    height: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 800;
    color: #fff;
}

.teamFormWin[b-e7h3hn164o] {
    background: #16a34a;
}

.teamFormLoss[b-e7h3hn164o] {
    background: #dc2626;
}

.teamHistoryList[b-e7h3hn164o] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.teamHistoryRow[b-e7h3hn164o] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    font-size: 0.85rem;
}

.teamHistoryRow:nth-child(odd)[b-e7h3hn164o] {
    background: var(--panel);
}

.teamHistoryDate[b-e7h3hn164o] {
    color: var(--muted);
    min-width: 3.5rem;
}

.teamHistoryResult[b-e7h3hn164o] {
    font-weight: 800;
    min-width: 2.5rem;
}

.teamHistoryWin[b-e7h3hn164o] {
    color: #16a34a;
}

.teamHistoryLoss[b-e7h3hn164o] {
    color: #dc2626;
}

.teamHistoryOpp[b-e7h3hn164o] {
    flex: 1 1 8rem;
    color: var(--text);
    font-weight: 600;
}

.teamHistoryScore[b-e7h3hn164o] {
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}

.teamHistoryDuration[b-e7h3hn164o] {
    color: var(--muted);
    font-size: 0.78rem;
}

/* ── Footer ───────────────────────────────────────── */

.teamPageFooter[b-e7h3hn164o] {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0;
}

.teamPageFooterLink[b-e7h3hn164o] {
    color: var(--accent, #60a5fa);
    font-weight: 600;
    text-decoration: none;
}

.teamPageFooterLink:hover[b-e7h3hn164o] {
    text-decoration: underline;
}

/* ── Not found ────────────────────────────────────── */

.teamPageMissing[b-e7h3hn164o] {
    max-width: 600px;
    margin: 4rem auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.teamPageMissingTitle[b-e7h3hn164o] {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text);
    margin: 0;
}

.teamPageMissingDesc[b-e7h3hn164o] {
    color: var(--muted);
    margin: 0;
}

.teamPageMissingLink[b-e7h3hn164o] {
    color: var(--accent, #60a5fa);
    font-weight: 600;
    text-decoration: none;
}

.teamPageMissingLink:hover[b-e7h3hn164o] {
    text-decoration: underline;
}
/* /Components/Pages/Terms.razor.rz.scp.css */
/* Shared legal page styles — used by Terms and Privacy */
.legalPage[b-t63vg583v7] {
    max-width: 680px;
    margin: 0 auto;
    padding: 40px 20px 80px;
}

/* ── Hero ── */
.legalHero[b-t63vg583v7] {
    margin-bottom: 44px;
}

.legalTitle[b-t63vg583v7] {
    font-size: 2rem;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -0.03em;
    margin-bottom: 8px;
}

.legalUpdated[b-t63vg583v7] {
    font-size: 0.82rem;
    color: var(--muted);
    opacity: 0.6;
}

/* ── Sections ── */
.legalSection[b-t63vg583v7] {
    margin-bottom: 32px;
}

.legalHeading[b-t63vg583v7] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}

.legalSection p[b-t63vg583v7] {
    font-size: 0.88rem;
    color: var(--muted);
    line-height: 1.75;
    margin-bottom: 10px;
}

.legalSection p:last-child[b-t63vg583v7] {
    margin-bottom: 0;
}

.legalSection ul[b-t63vg583v7] {
    margin: 8px 0 12px 20px;
    padding: 0;
}

.legalSection li[b-t63vg583v7] {
    font-size: 0.88rem;
    color: var(--muted);
    line-height: 1.75;
    margin-bottom: 4px;
}

.legalSection a[b-t63vg583v7] {
    color: var(--blue);
    text-decoration: none;
}

.legalSection a:hover[b-t63vg583v7] {
    text-decoration: underline;
}

.legalSection strong[b-t63vg583v7] {
    color: var(--text);
    font-weight: 600;
}

/* ── Mobile ── */
@media (max-width: 640px) {
    .legalTitle[b-t63vg583v7] {
        font-size: 1.6rem;
    }

    .legalSection[b-t63vg583v7] {
        margin-bottom: 24px;
    }
}
/* /Components/Pages/WeekPreview.razor.rz.scp.css */
.wpPage[b-i7tkh9olic] { max-width: 1080px; margin: 0 auto; padding: 28px 18px 48px; }

/* ── Header (league title left, ModelPerfCard right) ── */
.wpHeader[b-i7tkh9olic] { margin-bottom: 22px; }
.wpHeaderTop[b-i7tkh9olic] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.wpHeaderMain[b-i7tkh9olic] { display: flex; align-items: center; gap: 14px; min-width: 260px; flex: 1; }
.wpLeagueIcon[b-i7tkh9olic] { object-fit: contain; border-radius: 8px; }
.wpKicker[b-i7tkh9olic] {
    display: block;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mutedFaint);
    margin-bottom: 4px;
}
.wpTitle[b-i7tkh9olic] { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text); margin: 0; }
.wpHighlights[b-i7tkh9olic] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wpHighlight[b-i7tkh9olic] {
    position: relative;
    padding-left: 18px;
    font-size: 0.88rem;
    color: #cbd5e1;
}
.wpHighlight[b-i7tkh9olic]::before {
    content: "";
    position: absolute;
    left: 2px; top: 8px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #60a5fa;
}
.wpHighlight strong[b-i7tkh9olic] { color: var(--text); }

/* ── Market dropdown — same classes/styles as the home page upcoming section
   (Home.razor.css .marketDropdown*), duplicated here because scoped CSS doesn't
   cross components. Keep visually in sync with the home page. ── */
.wpControls[b-i7tkh9olic] { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; flex-wrap: wrap; }
.marketDropdown[b-i7tkh9olic] { position: relative; }
.marketDropdownTrigger[b-i7tkh9olic] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--panelSoft);
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}
.marketDropdownTrigger:hover[b-i7tkh9olic] { border-color: #6366f1; }
.marketDropdownMenu[b-i7tkh9olic] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 50;
    min-width: 220px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 9px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.4);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.marketDropdownOption[b-i7tkh9olic] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 9px 11px;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
    text-align: left;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
}
.marketDropdownOption:hover[b-i7tkh9olic] { background: var(--panelSoft); }
.marketDropdownOptionSel[b-i7tkh9olic] { background: rgba(99,102,241,0.14); }
.marketDropdownOptionDisabled[b-i7tkh9olic] { opacity: 0.55; cursor: default; }
.marketDropdownOptionDisabled:hover[b-i7tkh9olic] { background: transparent; }
.marketPremiumTag[b-i7tkh9olic] {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    border-radius: 999px;
    padding: 2px 8px;
}
.wpMarketPremiumNote[b-i7tkh9olic] { font-size: 0.72rem; color: #a78bfa; }
.wpMarketPremiumNote a[b-i7tkh9olic] { color: #a78bfa; font-weight: 700; }

/* ── Day-grouped match cards (the shared UpcomingMatchCard renders itself) ── */
.wpDayHeading[b-i7tkh9olic] {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mutedFaint);
    margin: 22px 0 10px;
}
/* Same grid the home page / premium page put the shared UpcomingMatchCard in
   (defined per-page because scoped CSS doesn't cross components). */
.upcomingGrid[b-i7tkh9olic] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(427px, 1fr));
    gap: 12px;
}
@media (max-width: 480px) {
    .upcomingGrid[b-i7tkh9olic] { grid-template-columns: 1fr; }
}

/* ── Standings + bracket section ── */
.wpRecordSection[b-i7tkh9olic] { margin-top: 30px; }
.wpSectionTitle[b-i7tkh9olic] { font-size: 1.05rem; font-weight: 800; color: var(--text); margin: 0 0 12px; }
.wpStandingsHead[b-i7tkh9olic] { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.wpStandingsStale[b-i7tkh9olic] { font-size: 0.78rem; color: var(--muted); margin: -6px 0 10px; }
.wpStandingsStale strong[b-i7tkh9olic] { color: var(--text); font-weight: 700; }
.wpStandingsHead .wpSectionTitle[b-i7tkh9olic] { margin: 0; }
.wpStandingsLinks[b-i7tkh9olic] { display: flex; align-items: center; gap: 10px; }
.wpBracketPill[b-i7tkh9olic] {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px; border-radius: 999px;
    border: 1px solid rgba(251, 191, 36, 0.4);
    background: rgba(251, 191, 36, 0.10);
    color: #fbbf24;
    font-size: 0.7rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.04em;
    text-decoration: none;
}
.wpBracketPill:hover[b-i7tkh9olic] { background: rgba(251, 191, 36, 0.18); }
.wpStandingsLink[b-i7tkh9olic] { font-size: 0.78rem; font-weight: 700; color: #60a5fa; text-decoration: none; }
.wpStandingsLink:hover[b-i7tkh9olic] { text-decoration: underline; }
/* No overflow clipping on desktop — it would cut off the Elo-chip hover tooltip.
   The table (min-width 440px) only needs to scroll on narrow viewports. */
.wpStandingsWrap[b-i7tkh9olic] { border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
@media (max-width: 640px) {
    .wpStandingsWrap[b-i7tkh9olic] { overflow-x: auto; }
}
.wpStandingsTable[b-i7tkh9olic] { width: 100%; border-collapse: collapse; min-width: 440px; }
.wpStandingsTable th[b-i7tkh9olic] {
    padding: 9px 13px;
    font-size: 0.6rem; font-weight: 800;
    letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--mutedFaint); text-align: left;
    border-bottom: 1px solid var(--border);
}
.wpStandingsTable td[b-i7tkh9olic] { padding: 9px 13px; font-size: 0.82rem; color: var(--text); border-bottom: 1px solid var(--border); }
.wpStandingsTable tbody tr:last-child td[b-i7tkh9olic] { border-bottom: none; }
.wpStRank[b-i7tkh9olic] { color: var(--mutedFaint); font-weight: 800; width: 34px; }
.wpStTeam[b-i7tkh9olic] { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.wpStTeam a[b-i7tkh9olic] { color: var(--text); text-decoration: none; }
.wpStTeam a:hover[b-i7tkh9olic] { color: #60a5fa; }
.wpTeamLogo[b-i7tkh9olic] { object-fit: contain; }
.wpStPos[b-i7tkh9olic] { color: #4ade80; font-weight: 700; }
.wpStNeg[b-i7tkh9olic] { color: #f87171; font-weight: 700; }
.wpStElo[b-i7tkh9olic] { font-weight: 700; white-space: nowrap; }
.wpStEloNa[b-i7tkh9olic] { color: var(--mutedFaint); }
.wpEloChip[b-i7tkh9olic] {
    position: relative;
    display: inline-block;
    margin-left: 6px;
    font-size: 0.6rem; font-weight: 800;
    padding: 1px 5px; border-radius: 5px;
    background: rgba(96, 165, 250, 0.12);
    color: #60a5fa;
    text-decoration: none;
    cursor: pointer;
}
.wpEloChip:hover[b-i7tkh9olic] { background: rgba(96, 165, 250, 0.22); }
/* Styled hover tooltip (same window styling as the site's other tooltips). */
.wpEloTip[b-i7tkh9olic] {
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    z-index: 30;
    width: 210px;
    padding: 9px 11px;
    border-radius: 9px;
    background: #1b2233;
    border: 1px solid var(--border);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.14s ease, transform 0.14s ease;
    pointer-events: none;
}
.wpEloChip:hover .wpEloTip[b-i7tkh9olic], .wpEloChip:focus .wpEloTip[b-i7tkh9olic] {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Premium CTA — thematic purple like all premium surfaces (see CLAUDE.md). */
.wpCtaStrip[b-i7tkh9olic] {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin-top: 30px;
    padding: 18px 22px;
    border: 1px solid rgba(139, 92, 246, 0.35);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(168, 85, 247, 0.05));
    flex-wrap: wrap;
}
.wpCtaText[b-i7tkh9olic] { display: flex; flex-direction: column; gap: 3px; }
.wpCtaTitle[b-i7tkh9olic] { font-size: 0.95rem; font-weight: 800; color: var(--text); }
.wpCtaSub[b-i7tkh9olic] { font-size: 0.78rem; color: #cbd5e1; }
.wpCtaBtn[b-i7tkh9olic] {
    padding: 11px 26px;
    border-radius: 999px;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff;
    font-weight: 800;
    font-size: 0.88rem;
    text-decoration: none;
    white-space: nowrap;
}
.wpCtaBtn:hover[b-i7tkh9olic] { filter: brightness(1.1); }

/* ── Empty state ── */
.wpEmpty[b-i7tkh9olic] { text-align: center; padding: 70px 16px; }
.wpEmptyDesc[b-i7tkh9olic] { color: var(--mutedFaint); margin: 10px 0 18px; }
.wpEmptyLink[b-i7tkh9olic] { color: #60a5fa; text-decoration: none; font-weight: 600; }

@media (max-width: 640px) {
    .wpTitle[b-i7tkh9olic] { font-size: 1.15rem; }
    .wpPage[b-i7tkh9olic] { padding: 20px 10px 36px; }
}
/* /Components/Shared/AdBanner.razor.rz.scp.css */
/* ── Ad Banner — minimal, non-intrusive ──────────────────── */

.adBanner[b-70v1a9qeb8] {
    width: 100%;
    max-width: 728px;
    margin: 24px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.adContainer[b-70v1a9qeb8] {
    width: 100%;
    min-height: 90px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.adLabel[b-70v1a9qeb8] {
    font-size: 0.55rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(148, 163, 184, 0.3);
    user-select: none;
}

/* Slot variant: full-width leaderboard (728×90) */
.adBanner.slot-leaderboard[b-70v1a9qeb8] {
    max-width: 728px;
}

.adBanner.slot-leaderboard .adContainer[b-70v1a9qeb8] {
    min-height: 90px;
}

/* Slot variant: compact rectangle (300×250 or responsive) */
.adBanner.slot-rectangle[b-70v1a9qeb8] {
    max-width: 336px;
}

.adBanner.slot-rectangle .adContainer[b-70v1a9qeb8] {
    min-height: 250px;
}

/* Slot variant: in-feed (fluid, auto-height) */
.adBanner.slot-infeed[b-70v1a9qeb8] {
    max-width: 100%;
}

.adBanner.slot-infeed .adContainer[b-70v1a9qeb8] {
    min-height: 100px;
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 768px) {
    .adBanner[b-70v1a9qeb8] {
        max-width: 100%;
        margin: 16px auto;
    }

    .adBanner.slot-leaderboard .adContainer[b-70v1a9qeb8] {
        min-height: 50px;  /* mobile banner */
    }
}
/* /Components/Shared/ApiDashboard.razor.rz.scp.css */
.apiDash[b-5xw16co5hm] { display: flex; flex-direction: column; gap: 1.25rem; }

.apiDashHead[b-5xw16co5hm] { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.apiDashTitle[b-5xw16co5hm] { font-size: 1.4rem; font-weight: 700; color: #dbe4f2; margin: 0; }
.apiDashSub[b-5xw16co5hm] { color: #8b97a8; margin: .25rem 0 0; font-size: .9rem; }

.apiDocsLink[b-5xw16co5hm] { color: #a78bfa; text-decoration: none; font-weight: 600; font-size: .9rem; white-space: nowrap; }
.apiDocsLink:hover[b-5xw16co5hm] { text-decoration: underline; }

.apiMuted[b-5xw16co5hm] { color: #8b97a8; font-size: .9rem; }
.apiSectionLabel[b-5xw16co5hm] { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #8b97a8; margin-bottom: .55rem; font-weight: 700; }

.apiBalanceCard[b-5xw16co5hm] { background: linear-gradient(135deg, #1a2030, #161b26); border: 1px solid rgba(167,139,250,.25); border-radius: 14px; padding: 1.25rem 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem; }
.apiBalanceMain[b-5xw16co5hm] { display: flex; align-items: baseline; gap: .5rem; }
.apiBalanceNum[b-5xw16co5hm] { font-size: 2.4rem; font-weight: 800; color: #10b981; line-height: 1; }
.apiBalanceLabel[b-5xw16co5hm] { color: #8b97a8; font-weight: 600; }
.apiBalanceMeta[b-5xw16co5hm] { color: #8b97a8; font-size: .9rem; display: flex; gap: .5rem; align-items: center; }
.apiDot[b-5xw16co5hm] { opacity: .5; }

.apiPacks[b-5xw16co5hm] { display: flex; gap: .6rem; flex-wrap: wrap; }
.apiPack[b-5xw16co5hm] { background: #1a2030; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: .6rem 1rem; color: #dbe4f2; cursor: pointer; display: flex; flex-direction: column; align-items: center; min-width: 84px; transition: border-color .15s, transform .15s; }
.apiPack:hover[b-5xw16co5hm] { border-color: #a78bfa; transform: translateY(-1px); }
.apiPack strong[b-5xw16co5hm] { font-size: 1.1rem; color: #dbe4f2; }
.apiPack span[b-5xw16co5hm] { font-size: .8rem; color: #8b97a8; }

.apiNewKey[b-5xw16co5hm] { background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.35); border-radius: 12px; padding: 1rem; }
.apiNewKeyWarn[b-5xw16co5hm] { color: #10b981; font-weight: 600; font-size: .85rem; margin-bottom: .5rem; }
.apiNewKeyRow[b-5xw16co5hm] { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.apiNewKeyVal[b-5xw16co5hm] { background: #0f131c; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: .5rem .75rem; color: #dbe4f2; font-family: ui-monospace, monospace; font-size: .85rem; word-break: break-all; flex: 1; min-width: 220px; }
.apiTrialNote[b-5xw16co5hm] { color: #8b97a8; font-size: .8rem; margin-top: .5rem; }

.apiCreateRow[b-5xw16co5hm] { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .9rem; }
.apiInput[b-5xw16co5hm] { flex: 1; min-width: 160px; background: #0f131c; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: .55rem .75rem; color: #dbe4f2; }
.apiInput[b-5xw16co5hm]::placeholder { color: #5e6b7d; }

.apiCopyBtn[b-5xw16co5hm], .apiCreateBtn[b-5xw16co5hm], .apiRevokeBtn[b-5xw16co5hm] { cursor: pointer; border-radius: 8px; font-weight: 600; border: 1px solid transparent; }
.apiCopyBtn[b-5xw16co5hm] { background: #10b981; color: #06281f; padding: .5rem .9rem; }
.apiCopyBtn:hover[b-5xw16co5hm] { background: #14c98c; }
.apiCreateBtn[b-5xw16co5hm] { background: #a78bfa; color: #1a1230; padding: .55rem 1.1rem; }
.apiCreateBtn:hover[b-5xw16co5hm] { background: #b79dff; }
.apiCreateBtn:disabled[b-5xw16co5hm] { opacity: .6; cursor: default; }

.apiKeyTable[b-5xw16co5hm] { width: 100%; border-collapse: collapse; }
.apiKeyTable td[b-5xw16co5hm] { padding: .6rem .4rem; border-bottom: 1px solid rgba(255,255,255,.06); font-size: .9rem; color: #dbe4f2; vertical-align: middle; }
.apiKeyTable code[b-5xw16co5hm] { font-family: ui-monospace, monospace; color: #a78bfa; }
.apiKeyLabel[b-5xw16co5hm] { color: #8b97a8; margin-left: .4rem; font-size: .82rem; }
.apiKeyMeta[b-5xw16co5hm] { color: #8b97a8; font-size: .82rem; white-space: nowrap; }
.apiKeyAction[b-5xw16co5hm] { text-align: right; }
.apiKeyRevoked[b-5xw16co5hm] { opacity: .5; }
.apiKeyRevokedTag[b-5xw16co5hm] { color: #8b97a8; font-size: .8rem; }
.apiRevokeBtn[b-5xw16co5hm] { background: transparent; border: 1px solid rgba(239,68,68,.4); color: #f87171; padding: .35rem .7rem; font-size: .82rem; }
.apiRevokeBtn:hover[b-5xw16co5hm] { background: rgba(239,68,68,.12); }

.apiCode[b-5xw16co5hm] { background: #0f131c; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 1rem; color: #cdd6e4; font-family: ui-monospace, monospace; font-size: .82rem; overflow-x: auto; white-space: pre; margin: .25rem 0 .7rem; }

.apiFreeNote[b-5xw16co5hm] { color: #8b97a8; font-size: .82rem; margin: -.4rem 0 0; }
.apiIpWarning[b-5xw16co5hm] { background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.3); color: #fbbf24; border-radius: 8px; padding: .55rem .75rem; font-size: .82rem; margin-bottom: .7rem; }

.apiClaimBtn[b-5xw16co5hm] { align-self: flex-start; background: #10b981; color: #06281f; font-weight: 700; border: none; border-radius: 10px; padding: .6rem 1.2rem; cursor: pointer; transition: background .15s; }
.apiClaimBtn:hover[b-5xw16co5hm] { background: #14c98c; }
.apiClaimBtn:disabled[b-5xw16co5hm] { opacity: .6; cursor: default; }
.apiClaimDone[b-5xw16co5hm] { color: #8b97a8; font-size: .85rem; }

.apiPlans[b-5xw16co5hm] { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .6rem; }
.apiPlan[b-5xw16co5hm] { position: relative; background: #1a2030; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 1.1rem .75rem .85rem; color: #dbe4f2; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .3rem; transition: border-color .15s, transform .15s; }
.apiPlan:hover[b-5xw16co5hm] { border-color: #a78bfa; transform: translateY(-2px); }
.apiPlanFeatured[b-5xw16co5hm] { border-color: rgba(167,139,250,.5); }
.apiPlanRibbon[b-5xw16co5hm] { position: absolute; top: -9px; background: #a78bfa; color: #1a1230; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: .12rem .5rem; border-radius: 999px; }
.apiPlanName[b-5xw16co5hm] { font-weight: 700; font-size: 1rem; }
.apiPlanCredits[b-5xw16co5hm] { color: #10b981; font-size: .82rem; font-weight: 600; }
.apiPlanPrice[b-5xw16co5hm] { color: #dbe4f2; font-weight: 700; margin-top: .15rem; }
.apiPlanPrice small[b-5xw16co5hm] { color: #8b97a8; font-weight: 500; }

.apiPlanActive[b-5xw16co5hm] { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; background: linear-gradient(135deg, #1a2030, #161b26); border: 1px solid rgba(167,139,250,.3); border-radius: 12px; padding: .9rem 1.1rem; }
.apiPlanActiveName[b-5xw16co5hm] { font-weight: 700; color: #dbe4f2; text-transform: capitalize; }
.apiPlanActiveMeta[b-5xw16co5hm] { color: #8b97a8; font-size: .85rem; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin-top: .15rem; }
.apiManageBtn[b-5xw16co5hm] { background: transparent; border: 1px solid rgba(255,255,255,.2); color: #dbe4f2; border-radius: 8px; padding: .5rem 1rem; cursor: pointer; font-weight: 600; }
.apiManageBtn:hover[b-5xw16co5hm] { border-color: #a78bfa; }

/* plan cards now carry an explicit Subscribe button (the card itself isn't clickable) */
.apiPlan[b-5xw16co5hm] { cursor: default; }
.apiPlan:hover[b-5xw16co5hm] { transform: none; }
.apiSubscribeBtn[b-5xw16co5hm] { margin-top: .55rem; width: 100%; background: #a78bfa; color: #1a1230; border: none; border-radius: 8px; padding: .5rem .75rem; font-weight: 700; cursor: pointer; transition: background .15s; }
.apiSubscribeBtn:hover[b-5xw16co5hm] { background: #b79dff; }

.apiTopups[b-5xw16co5hm] { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; }
.apiTopup[b-5xw16co5hm] { background: #1a2030; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 1.1rem .85rem .85rem; display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.apiTopupHead[b-5xw16co5hm] { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.apiTopupCredits[b-5xw16co5hm] { font-size: 1.6rem; font-weight: 800; color: #10b981; line-height: 1; }
.apiTopupUnit[b-5xw16co5hm] { font-size: .68rem; color: #8b97a8; text-transform: uppercase; letter-spacing: .06em; }
.apiTopupPrice[b-5xw16co5hm] { font-weight: 700; color: #dbe4f2; font-size: 1.05rem; }
.apiPurchaseBtn[b-5xw16co5hm] { margin-top: .3rem; width: 100%; background: #10b981; color: #06281f; border: none; border-radius: 8px; padding: .5rem .75rem; font-weight: 700; cursor: pointer; transition: background .15s; }
.apiPurchaseBtn:hover[b-5xw16co5hm] { background: #14c98c; }

.apiKeyRow[b-5xw16co5hm] { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; background: #161b26; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: .75rem 1rem; }
.apiKeyInfo[b-5xw16co5hm] { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.apiKeyInfo code[b-5xw16co5hm] { font-family: ui-monospace, monospace; color: #a78bfa; }
.apiKeyActions[b-5xw16co5hm] { display: flex; gap: .5rem; flex-shrink: 0; }
.apiRegenBtn[b-5xw16co5hm] { background: transparent; border: 1px solid rgba(167,139,250,.4); color: #a78bfa; border-radius: 8px; padding: .4rem .8rem; font-weight: 600; font-size: .85rem; cursor: pointer; }
.apiRegenBtn:hover[b-5xw16co5hm] { background: rgba(167,139,250,.12); }
.apiRegenBtn:disabled[b-5xw16co5hm] { opacity: .6; cursor: default; }
/* /Components/Shared/BugReportLink.razor.rz.scp.css */
.bugReportTrigger[b-g4jti4zbdi] {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-size: 0.78rem;
    color: var(--muted);
    text-decoration: none;
    opacity: 0.7;
    cursor: pointer;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.bugReportTrigger:hover[b-g4jti4zbdi] {
    opacity: 1;
    color: var(--blue);
}

.bugReportBackdrop[b-g4jti4zbdi] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: bugReportFadeIn-b-g4jti4zbdi 0.15s ease-out;
}

@keyframes bugReportFadeIn-b-g4jti4zbdi {
    from { opacity: 0; }
    to { opacity: 1; }
}

.bugReportModal[b-g4jti4zbdi] {
    position: relative;
    background: var(--cardBg, #111827);
    border: 1px solid var(--border, rgba(148, 163, 184, 0.18));
    border-radius: 14px;
    padding: 28px 24px 22px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    color: var(--text, #e2e8f0);
    animation: bugReportSlideUp-b-g4jti4zbdi 0.2s ease-out;
}

@keyframes bugReportSlideUp-b-g4jti4zbdi {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.bugReportClose[b-g4jti4zbdi] {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: var(--muted, #94a3b8);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    line-height: 0;
    transition: color 0.15s, background 0.15s;
}

.bugReportClose:hover[b-g4jti4zbdi] {
    color: var(--text, #e2e8f0);
    background: rgba(255, 255, 255, 0.06);
}

.bugReportTitle[b-g4jti4zbdi] {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 6px;
    color: var(--text, #e2e8f0);
}

.bugReportLead[b-g4jti4zbdi] {
    font-size: 0.85rem;
    color: var(--muted, #94a3b8);
    margin: 0 0 18px;
    line-height: 1.4;
}

.bugReportLabel[b-g4jti4zbdi] {
    display: block;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--muted, #94a3b8);
    margin: 12px 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.bugReportTextarea[b-g4jti4zbdi],
.bugReportInput[b-g4jti4zbdi] {
    width: 100%;
    box-sizing: border-box;
    background: var(--inputBg, rgba(15, 23, 42, 0.6));
    border: 1px solid var(--border, rgba(148, 163, 184, 0.18));
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--text, #e2e8f0);
    font-size: 0.9rem;
    font-family: inherit;
    line-height: 1.45;
    resize: vertical;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bugReportTextarea[b-g4jti4zbdi] {
    min-height: 120px;
}

.bugReportTextarea:focus[b-g4jti4zbdi],
.bugReportInput:focus[b-g4jti4zbdi] {
    outline: none;
    border-color: var(--blue, #60a5fa);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

.bugReportTextarea:disabled[b-g4jti4zbdi],
.bugReportInput:disabled[b-g4jti4zbdi] {
    opacity: 0.6;
    cursor: not-allowed;
}

.bugReportError[b-g4jti4zbdi] {
    margin: 10px 0 0;
    font-size: 0.82rem;
    color: #f87171;
}

.bugReportActions[b-g4jti4zbdi] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}

.bugReportBtn[b-g4jti4zbdi] {
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bugReportBtnCancel[b-g4jti4zbdi] {
    background: transparent;
    border-color: var(--border, rgba(148, 163, 184, 0.2));
    color: var(--muted, #94a3b8);
}

.bugReportBtnCancel:hover:not(:disabled)[b-g4jti4zbdi] {
    color: var(--text, #e2e8f0);
    background: rgba(255, 255, 255, 0.04);
}

.bugReportBtnSubmit[b-g4jti4zbdi] {
    background: var(--blue, #60a5fa);
    color: #0b1220;
}

.bugReportBtnSubmit:hover:not(:disabled)[b-g4jti4zbdi] {
    background: var(--blueHover, #93c5fd);
}

.bugReportBtn:disabled[b-g4jti4zbdi] {
    opacity: 0.55;
    cursor: not-allowed;
}

.bugReportSuccess[b-g4jti4zbdi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 0 6px;
    text-align: center;
    color: #34d399;
}

.bugReportSuccess p[b-g4jti4zbdi] {
    margin: 0;
    color: var(--text, #e2e8f0);
    font-size: 0.95rem;
}

@media (max-width: 480px) {
    .bugReportModal[b-g4jti4zbdi] {
        padding: 22px 18px 18px;
    }

    .bugReportTitle[b-g4jti4zbdi] {
        font-size: 1.05rem;
    }
}
/* /Components/Shared/CookieConsent.razor.rz.scp.css */
/* ── GDPR Cookie Banner ── */
.cookie-banner[b-05zww0rhdp] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: linear-gradient(135deg, rgba(26, 34, 54, 0.98), rgba(15, 22, 35, 0.98));
    border-top: 1px solid var(--border);
    backdrop-filter: blur(12px);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}

.cookie-inner[b-05zww0rhdp] {
    max-width: 900px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.cookie-text[b-05zww0rhdp] {
    flex: 1;
    font-size: 0.82rem;
    color: var(--muted);
    line-height: 1.5;
    margin: 0;
}

.cookie-link[b-05zww0rhdp] {
    color: var(--blue);
    text-decoration: none;
    font-weight: 600;
}

.cookie-link:hover[b-05zww0rhdp] {
    text-decoration: underline;
}

.cookie-actions[b-05zww0rhdp] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.cookie-btn[b-05zww0rhdp] {
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.cookie-btn-accept[b-05zww0rhdp] {
    background: var(--blue);
    color: #fff;
}

.cookie-btn-accept:hover[b-05zww0rhdp] {
    background: #2563eb;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.cookie-btn-essential[b-05zww0rhdp] {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--border);
}

.cookie-btn-essential:hover[b-05zww0rhdp] {
    border-color: var(--muted);
    color: var(--text);
}

@media (max-width: 640px) {
    .cookie-inner[b-05zww0rhdp] {
        flex-direction: column;
        padding: 14px 16px;
        gap: 12px;
        text-align: center;
    }

    .cookie-actions[b-05zww0rhdp] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Shared/EvAlertPrefsCard.razor.rz.scp.css */
.evAlertCard[b-vicnyue1xh] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 24px;
    box-shadow: var(--shadowSoft);
    margin-top: 16px;
}

/* ── Header ─────────────────────────────────────────────── */
.evAlertHeader[b-vicnyue1xh] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.evAlertHeaderText[b-vicnyue1xh] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.evAlertTitleRow[b-vicnyue1xh] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.evAlertIcon[b-vicnyue1xh] {
    color: #22d3ee;
    flex-shrink: 0;
}

.evAlertTitle[b-vicnyue1xh] {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text);
}

.evAlertBadge[b-vicnyue1xh] {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #22d3ee;
    background: rgba(34, 211, 238, 0.12);
    border: 1px solid rgba(34, 211, 238, 0.35);
    border-radius: 999px;
    padding: 2px 8px;
}

.evPremiumBadge[b-vicnyue1xh] {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    border: 1px solid rgba(139, 92, 246, 0.4);
    border-radius: 999px;
    padding: 3px 9px;
    flex-shrink: 0;
}

.evAlertDesc[b-vicnyue1xh] {
    font-size: 0.84rem;
    color: var(--muted);
    line-height: 1.45;
    max-width: 52ch;
}

/* ── Toggle switch ──────────────────────────────────────── */
.evToggle[b-vicnyue1xh] {
    flex-shrink: 0;
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: var(--panelSoft);
    border: 1px solid var(--border);
    position: relative;
    cursor: pointer;
    padding: 0;
    transition: background 0.18s, border-color 0.18s;
}

.evToggleSm[b-vicnyue1xh] {
    width: 42px;
    height: 24px;
}

.evToggleThumb[b-vicnyue1xh] {
    position: absolute;
    top: 50%;
    left: 3px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #94a3b8;
    transition: left 0.18s, background 0.18s;
}

.evToggleSm .evToggleThumb[b-vicnyue1xh] {
    width: 18px;
    height: 18px;
}

.evToggleOn[b-vicnyue1xh] {
    background: rgba(34, 197, 94, 0.9);
    border-color: rgba(34, 197, 94, 0.9);
}

.evToggleOn .evToggleThumb[b-vicnyue1xh] {
    left: calc(100% - 23px);
    background: #fff;
}

.evToggleSm.evToggleOn .evToggleThumb[b-vicnyue1xh] {
    left: calc(100% - 21px);
}

/* ── Body ───────────────────────────────────────────────── */
.evAlertBody[b-vicnyue1xh] {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    transition: opacity 0.18s;
}

.evAlertBodyOff[b-vicnyue1xh] {
    opacity: 0.4;
    pointer-events: none;
    filter: grayscale(0.4);
}

.evGroup[b-vicnyue1xh] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.evGroupHead[b-vicnyue1xh] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.evGroupTitle[b-vicnyue1xh] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
}

.evGroupHint[b-vicnyue1xh] {
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.4;
}

/* ── Segmented control ──────────────────────────────────── */
.evSegmented[b-vicnyue1xh] {
    display: inline-flex;
    background: var(--panelSoft);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 3px;
    gap: 3px;
    width: fit-content;
}

.evSeg[b-vicnyue1xh] {
    padding: 6px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--muted);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.evSeg:hover[b-vicnyue1xh] {
    color: var(--text);
}

.evSegOn[b-vicnyue1xh] {
    background: var(--panel);
    color: var(--text);
    box-shadow: var(--shadowSoft);
}

/* ── League chip grid ───────────────────────────────────── */
.evLeagueGrid[b-vicnyue1xh] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.evChip[b-vicnyue1xh] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--panelSoft);
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.evChip:hover[b-vicnyue1xh] {
    border-color: #6366f1;
}

.evChipOn[b-vicnyue1xh] {
    background: rgba(99, 102, 241, 0.14);
    border-color: #6366f1;
}

.evChipName[b-vicnyue1xh] {
    line-height: 1;
}

.evChipMeta[b-vicnyue1xh] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--muted);
    background: var(--panel);
    border-radius: 5px;
    padding: 2px 6px;
}

.evChipRiskDot[b-vicnyue1xh] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f59e0b;
    flex-shrink: 0;
    display: inline-block;
}

.evChipRisky .evChipName[b-vicnyue1xh] {
    color: #fbbf24;
}

.evLeagueLegend[b-vicnyue1xh] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.74rem;
    color: var(--muted);
}

/* ── Odds stepper ───────────────────────────────────────── */
.evStepper[b-vicnyue1xh] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.evStepBtn[b-vicnyue1xh] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--panelSoft);
    color: var(--text);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.evStepBtn:hover:not(:disabled)[b-vicnyue1xh] {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.1);
}

.evStepBtn:disabled[b-vicnyue1xh] {
    opacity: 0.4;
    cursor: not-allowed;
}

.evStepValue[b-vicnyue1xh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 64px;
}

.evStepNum[b-vicnyue1xh] {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.evStepLabel[b-vicnyue1xh] {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.evStepPresets[b-vicnyue1xh] {
    display: flex;
    gap: 6px;
    margin-left: 4px;
}

/* Slider row for the league draft-accuracy threshold (60-90%). */
.evAccSlider[b-vicnyue1xh] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.evAccRange[b-vicnyue1xh] {
    flex: 1;
    min-width: 0;
    height: 4px;
    accent-color: #6366f1;
    cursor: pointer;
}

.evAccBound[b-vicnyue1xh] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    flex-shrink: 0;
}

.evAccValue[b-vicnyue1xh] {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--text);
    min-width: 44px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.evPreset[b-vicnyue1xh] {
    padding: 5px 11px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.evPreset:hover[b-vicnyue1xh] {
    color: var(--text);
    border-color: #6366f1;
}

.evPresetOn[b-vicnyue1xh] {
    background: rgba(99, 102, 241, 0.14);
    border-color: #6366f1;
    color: var(--text);
}

/* ── Risky row ──────────────────────────────────────────── */
.evRiskRow[b-vicnyue1xh] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

/* ── Model chips ────────────────────────────────────────── */
.evModelGrid[b-vicnyue1xh] {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.evModelChip[b-vicnyue1xh] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--panelSoft);
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.evModelChip:hover[b-vicnyue1xh] {
    background: var(--panel);
}

.evModelChipOn[b-vicnyue1xh] {
    background: var(--panel);
}

.evModelDot[b-vicnyue1xh] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.evModelCheck[b-vicnyue1xh] {
    margin-left: 1px;
}

/* ── Footer ─────────────────────────────────────────────── */
.evFooter[b-vicnyue1xh] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 4px;
}

.evSaveBtn[b-vicnyue1xh] {
    padding: 9px 22px;
    border-radius: 8px;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid #6366f1;
    background: #6366f1;
    color: #fff;
    min-width: 150px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
}

.evSaveBtn:hover:not(:disabled)[b-vicnyue1xh] {
    background: #4f46e5;
    border-color: #4f46e5;
}

.evSaveBtn:disabled[b-vicnyue1xh] {
    opacity: 0.7;
    cursor: not-allowed;
}

.evLockedFooter[b-vicnyue1xh] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.evSaveBtnLocked[b-vicnyue1xh] {
    background: var(--panelSoft);
    border-color: var(--border);
    color: var(--muted);
    gap: 8px;
    cursor: not-allowed;
}

.evSaveBtnLocked:hover[b-vicnyue1xh] {
    background: var(--panelSoft);
    border-color: var(--border);
}

.evLockedNote[b-vicnyue1xh] {
    font-size: 0.82rem;
    color: var(--muted);
}

.evUpgradeLink[b-vicnyue1xh] {
    color: #a855f7;
    font-weight: 600;
    text-decoration: none;
}

.evUpgradeLink:hover[b-vicnyue1xh] {
    text-decoration: underline;
}

.evSaveMsg[b-vicnyue1xh] {
    font-size: 0.82rem;
    color: #22c55e;
}

.evSaveMsgError[b-vicnyue1xh] {
    color: #ef4444;
}

.btnSpinner[b-vicnyue1xh] {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    display: inline-block;
    animation: evspin-b-vicnyue1xh 0.7s linear infinite;
}

@keyframes evspin-b-vicnyue1xh {
    to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
    .evAlertCard[b-vicnyue1xh] {
        padding: 16px;
    }

    .evRiskRow[b-vicnyue1xh] {
        flex-direction: column;
        align-items: stretch;
    }

    .evStepPresets[b-vicnyue1xh] {
        margin-left: 0;
    }

    .evFooter[b-vicnyue1xh] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Components/Shared/LiveEvAlertPrompt.razor.rz.scp.css */
.evPromptToast[b-ucwl23cysq] {
    position: fixed;
    top: 76px;
    right: 20px;
    z-index: 1200;
    width: 320px;
    max-width: calc(100vw - 40px);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 18px 18px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    animation: evPromptIn-b-ucwl23cysq 0.28s ease-out;
}

@keyframes evPromptIn-b-ucwl23cysq {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.evPromptClose[b-ucwl23cysq] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.evPromptClose:hover[b-ucwl23cysq] {
    background: var(--panelSoft);
    color: var(--text);
}

.evPromptHead[b-ucwl23cysq] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-right: 22px;
}

.evPromptIcon[b-ucwl23cysq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(34, 211, 238, 0.12);
    color: #22d3ee;
    flex-shrink: 0;
}

.evPromptTitle[b-ucwl23cysq] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
}

.evPromptText[b-ucwl23cysq] {
    font-size: 0.83rem;
    line-height: 1.45;
    color: var(--muted);
    margin: 0 0 14px;
}

.evPromptActions[b-ucwl23cysq] {
    display: flex;
    gap: 8px;
}

.evPromptPrimary[b-ucwl23cysq] {
    flex: 1;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #6366f1;
    background: #6366f1;
    color: #fff;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.evPromptPrimary:hover[b-ucwl23cysq] {
    background: #4f46e5;
    border-color: #4f46e5;
}

.evPromptSecondary[b-ucwl23cysq] {
    flex: 1;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.evPromptSecondary:hover[b-ucwl23cysq] {
    background: var(--panelSoft);
    color: var(--text);
}

@media (max-width: 480px) {
    .evPromptToast[b-ucwl23cysq] {
        top: auto;
        bottom: 16px;
        right: 16px;
        left: 16px;
        width: auto;
    }
}
/* /Components/Shared/LiveSeriesMarkets.razor.rz.scp.css */
/* LIVE series markets panel — dot-track strip layout (ModelSplitStrip visual language)
   with the meta-marker-style pre-match tick + shift pill. Dark-first, app palette vars. */

.lsmCard[b-x8kmequcv0] {
    background: var(--panel, #1a2236);
    border: 1px solid var(--border, #2a3550);
    border-radius: 14px;
    padding: 14px 16px 10px;
}

.lsmCard.lsmLiveState[b-x8kmequcv0] {
    border-color: rgba(74, 222, 128, 0.35);
    box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.08), 0 6px 24px rgba(0, 0, 0, 0.25);
}

/* ── header ─────────────────────────────────────────── */
.lsmHead[b-x8kmequcv0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.lsmTitleWrap[b-x8kmequcv0] { display: flex; align-items: center; gap: 10px; }

.lsmTitle[b-x8kmequcv0] {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted, #94a3b8);
}

.lsmLiveTag[b-x8kmequcv0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #4ade80;
    background: rgba(74, 222, 128, 0.10);
    border: 1px solid rgba(74, 222, 128, 0.35);
    border-radius: 999px;
    padding: 3px 10px;
    animation: lsmPulse-b-x8kmequcv0 2s ease-in-out infinite;
}

.lsmLiveDot[b-x8kmequcv0] {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 6px 1px rgba(74, 222, 128, 0.7);
}

.lsmPreTag[b-x8kmequcv0] {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--mutedFaint, #64748b);
    border: 1px solid var(--border, #2a3550);
    border-radius: 999px;
    padding: 3px 10px;
}

@keyframes lsmPulse-b-x8kmequcv0 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; }
}

.lsmScore[b-x8kmequcv0] { display: flex; align-items: center; gap: 7px; font-weight: 800; }

.lsmTeam[b-x8kmequcv0] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
}

.lsmTeamLogo[b-x8kmequcv0] {
    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: 5px;
    background: color-mix(in srgb, var(--muted) 10%, transparent);
}

.lsmScoreNum[b-x8kmequcv0] {
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    background: var(--panelSoft, #1e2840);
    border: 1px solid var(--border, #2a3550);
    border-radius: 8px;
    padding: 1px 9px;
}

.lsmScoreDash[b-x8kmequcv0] { color: var(--mutedFaint, #64748b); }

.lsmBo[b-x8kmequcv0] { font-size: 0.66rem; font-weight: 700; color: var(--mutedFaint, #64748b); margin-left: 2px; }

/* ── market rows ────────────────────────────────────── */
.lsmBody[b-x8kmequcv0] { display: flex; flex-direction: column; gap: 6px; }

.lsmMarket[b-x8kmequcv0] {
    border-top: 1px solid var(--borderSoft, rgba(148, 163, 184, 0.10));
    padding-top: 8px;
}

.lsmMarketHead[b-x8kmequcv0] { display: flex; align-items: baseline; gap: 8px; }

.lsmMarketName[b-x8kmequcv0] { font-size: 0.8rem; font-weight: 700; flex: 1; }

.lsmNow[b-x8kmequcv0] { font-size: 0.9rem; font-weight: 800; font-variant-numeric: tabular-nums; }

.lsmLocked[b-x8kmequcv0] {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #4ade80;
    background: rgba(74, 222, 128, 0.12);
    border-radius: 6px;
    padding: 2px 8px;
}

.lsmDead[b-x8kmequcv0] {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mutedFaint, #64748b);
    background: var(--panelDeep, rgba(15, 23, 42, 0.5));
    border-radius: 6px;
    padding: 2px 8px;
    text-decoration: line-through;
}

/* ── side labels above the bars (who/what each side of the bar means) ── */
.lsmSides[b-x8kmequcv0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 2px 0 7px;
}

.lsmSide[b-x8kmequcv0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.lsmSideLogo[b-x8kmequcv0] {
    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: 5px;
    background: color-mix(in srgb, var(--muted) 10%, transparent);
    flex-shrink: 0;
}

.lsmSideName[b-x8kmequcv0] {
    font-size: 0.82rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lsmSideLine[b-x8kmequcv0] {
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--muted, #94a3b8);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* ── dot track (mss visual language) ────────────────── */
.lsmTrack[b-x8kmequcv0] {
    position: relative;
    height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* The positioned area between the rails — line, marker and dots live here, so
   they can never overlap the rail logos or line labels. */
.lsmTrackField[b-x8kmequcv0] {
    position: relative;
    flex: 1;
    height: 100%;
    min-width: 0;
}

.lsmTrackLine[b-x8kmequcv0] {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, rgba(74, 222, 128, 0.55), rgba(100, 116, 139, 0.45) 46%, rgba(100, 116, 139, 0.45) 54%, rgba(248, 113, 113, 0.55));
    border-radius: 2px;
}

.lsmTrackMid[b-x8kmequcv0] {
    position: absolute;
    left: 50%;
    top: 6px;
    bottom: 12px;
    width: 2px;
    transform: translateX(-50%);
    border-radius: 1px;
    background: rgba(148, 163, 184, 0.5);
}

/* Numeric, language-neutral midpoint label (same convention as ModelSplitStrip):
   a dot parked here is a genuine coin flip, dots lean toward the side they favor. */
.lsmTrackFifty[b-x8kmequcv0] {
    position: absolute;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%);
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--mutedFaint, #64748b);
    pointer-events: none;
}

.lsmRail[b-x8kmequcv0] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    z-index: 1;
}

.lsmRailLogo[b-x8kmequcv0] {
    width: 22px;
    height: 22px;
    object-fit: contain;
    border-radius: 5px;
    background: color-mix(in srgb, var(--muted) 10%, transparent);
}

.lsmRailCode[b-x8kmequcv0] {
    font-size: 0.58rem;
    font-weight: 800;
    color: var(--muted, #94a3b8);
    letter-spacing: 0.03em;
    max-width: 54px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lsmRailLine[b-x8kmequcv0] {
    font-size: 0.58rem;
    font-weight: 800;
    color: var(--mutedFaint, #64748b);
    font-variant-numeric: tabular-nums;
}

/* Model dots — focusable with a pure-CSS tooltip (mss pattern). */
.lsmDot[b-x8kmequcv0] {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.46rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #0a0e16;
    border: 2px solid var(--panel, #1a2236);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.45);
    cursor: default;
    z-index: 3;
    outline: none;
}

.lsmDot:hover[b-x8kmequcv0], .lsmDot:focus[b-x8kmequcv0] { z-index: 6; box-shadow: 0 0 10px rgba(255, 255, 255, 0.25); }

.lsmTip[b-x8kmequcv0] {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column;
    gap: 3px;
    width: max-content;
    max-width: 220px;
    padding: 7px 10px;
    border-radius: 8px;
    background: #0d1320;
    border: 1px solid rgba(148, 163, 184, 0.25);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
    z-index: 20;
    text-align: left;
    white-space: normal;
}

.lsmDot:hover .lsmTip[b-x8kmequcv0], .lsmDot:focus .lsmTip[b-x8kmequcv0] { display: flex; }

.lsmTipTitle[b-x8kmequcv0] {
    font-size: 0.62rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lsmTipLine[b-x8kmequcv0] { font-size: 0.66rem; font-weight: 500; color: var(--text, #e2e8f0); line-height: 1.35; }

/* ── in-panel score scrubber (pre-match -> after each game) ── */
.lsmScrub[b-x8kmequcv0] {
    display: inline-flex;
    gap: 2px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding: 3px;
    background: var(--panelDeep, rgba(15, 23, 42, 0.5));
    border: 1px solid var(--border, #2a3550);
    border-radius: 11px;
}

.lsmScrubBtn[b-x8kmequcv0] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--mutedFaint, #64748b);
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 10px;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    transition: color 0.15s, background 0.15s, box-shadow 0.15s;
}

.lsmScrubBtn:hover[b-x8kmequcv0] { color: var(--muted, #94a3b8); }

.lsmScrubBtn b[b-x8kmequcv0] { font-size: 0.78rem; font-weight: 800; color: inherit; }

.lsmScrubBtn.lsmScrubOn[b-x8kmequcv0] {
    color: #4ade80;
    background: linear-gradient(180deg, rgba(74, 222, 128, 0.16), rgba(74, 222, 128, 0.05));
    border-color: rgba(74, 222, 128, 0.45);
    box-shadow: 0 2px 10px rgba(74, 222, 128, 0.12), inset 0 1px 0 rgba(74, 222, 128, 0.15);
}

.lsmScrubLogo[b-x8kmequcv0] {
    width: 15px;
    height: 15px;
    object-fit: contain;
    border-radius: 4px;
}

.lsmScrubDash[b-x8kmequcv0] { color: var(--mutedFaint, #64748b); }

/* Pulsing live dot on the right-most (most current) scrubber step. */
.lsmScrubLiveDot[b-x8kmequcv0] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 6px 1px rgba(74, 222, 128, 0.7);
    animation: lsmPulse-b-x8kmequcv0 2s ease-in-out infinite;
    margin-left: 2px;
}

/* Side-labels row aligned with the bars: the empty .upPredModel spacer replicates the
   model-label column, so Yes/No, Over/Under and team sides line up with the bar edges. */
.lsmSidesRow[b-x8kmequcv0] { padding-top: 2px; }
.lsmSidesRow .lsmSides[b-x8kmequcv0] { flex: 1; margin: 0; }

/* Uniform model-label column INSIDE the panel: the global rule is min-width only, so
   labels wider than 68px ("CONSENSUS") would shift their bar — and the sides spacer —
   out of alignment. A fixed width keeps every bar row and the sides row at the same x. */
.upPredModel[b-x8kmequcv0] { width: 86px; min-width: 86px; }

/* ── exact score (clickable scoreline chips) ────────── */
.lsmExactRow[b-x8kmequcv0] { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }

.lsmExactChip[b-x8kmequcv0] {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: 0.72rem;
    font-family: inherit;
    color: var(--muted, #94a3b8);
    background: var(--panelSoft, #1e2840);
    border: 1px solid var(--border, #2a3550);
    border-radius: 8px;
    padding: 3px 9px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}

.lsmExactChip:hover[b-x8kmequcv0] { border-color: rgba(74, 222, 128, 0.4); }

.lsmExactChip b[b-x8kmequcv0] { color: var(--text, #fff); margin-right: 1px; }

.lsmExactChip.lsmExactChipSel[b-x8kmequcv0] {
    border-color: rgba(74, 222, 128, 0.6);
    background: rgba(74, 222, 128, 0.10);
    color: var(--text, #e2e8f0);
}

.lsmExactTop[b-x8kmequcv0] {
    font-size: 0.5rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mutedFaint, #64748b);
    align-self: center;
    border: 1px solid var(--borderSoft, rgba(148, 163, 184, 0.10));
    border-radius: 4px;
    padding: 0 4px;
}

.lsmExactChipSel .lsmExactTop[b-x8kmequcv0] { color: #4ade80; border-color: rgba(74, 222, 128, 0.4); }

/* ── footer ─────────────────────────────────────────── */
.lsmFoot[b-x8kmequcv0] {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--borderSoft, rgba(148, 163, 184, 0.10));
    font-size: 0.68rem;
    line-height: 1.45;
    color: var(--mutedFaint, #64748b);
}

@media (max-width: 560px) {
    .lsmCard[b-x8kmequcv0] { padding: 12px 10px 8px; }
    .lsmHead[b-x8kmequcv0] { flex-direction: column; align-items: flex-start; gap: 6px; }
    .lsmRailCode[b-x8kmequcv0] { max-width: 44px; }
}
/* /Components/Shared/ModelPerfCard.razor.rz.scp.css */
/* Moved verbatim from Bracket.razor.css when the scorecard was extracted into this
   shared component (scoped CSS does not cascade into child components). */
.brkDot[b-snffrl24ck] { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }

.brkPerf[b-snffrl24ck] {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: var(--radiusSm); padding: 10px 12px; width: 360px; max-width: 100%;
}
.brkPerfHead[b-snffrl24ck] {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--mutedFaint); font-weight: 700; margin-bottom: 8px;
}
/* All / +EV scope toggle (right-aligned in the head row). */
.brkPerfScope[b-snffrl24ck] { margin-left: auto; display: inline-flex; gap: 2px; }
.brkPerfScopeBtn[b-snffrl24ck] {
    font-size: 0.6rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
    padding: 2px 8px; border-radius: 6px;
    border: 1px solid var(--border); background: transparent; color: var(--muted);
    cursor: pointer; transition: all 0.12s ease;
}
.brkPerfScopeBtn:hover[b-snffrl24ck] { color: var(--text); border-color: var(--muted); }
.brkPerfScopeOn[b-snffrl24ck] { color: var(--text); border-color: #6366f1; background: rgba(99, 102, 241, 0.14); }
.brkPerfValNa[b-snffrl24ck] { color: var(--mutedFaint); font-weight: 600; }
.brkPerfHelp[b-snffrl24ck] {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 13px; height: 13px; border-radius: 50%; font-size: 0.6rem; font-weight: 700;
    color: var(--muted); border: 1px solid var(--border); cursor: help; text-transform: none;
}
.brkPerfHelp:hover[b-snffrl24ck] { color: var(--text); border-color: var(--muted); }
.brkTip[b-snffrl24ck] {
    position: absolute; top: calc(100% + 7px); left: -4px; z-index: 30;
    width: 234px; max-width: 74vw; padding: 10px 12px; border-radius: 9px;
    background: #1b2233; border: 1px solid var(--border);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    text-transform: none; letter-spacing: 0; text-align: left;
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity 0.14s ease, transform 0.14s ease; pointer-events: none;
}
.brkPerfHelp:hover .brkTip[b-snffrl24ck], .brkPerfHelp:focus .brkTip[b-snffrl24ck] { opacity: 1; visibility: visible; transform: translateY(0); }
.brkTipTitle[b-snffrl24ck] { display: block; font-weight: 700; font-size: 0.74rem; color: var(--text); margin-bottom: 4px; }
.brkTipBody[b-snffrl24ck] { display: block; font-weight: 400; font-size: 0.7rem; color: var(--muted); line-height: 1.45; }
.brkPerfTabs[b-snffrl24ck] { display: flex; gap: 4px; margin-bottom: 10px; }
.brkPerfTab[b-snffrl24ck] {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
    font-size: 0.72rem; padding: 5px 4px; border-radius: 7px; min-width: 0;
    border: 1px solid var(--border); background: transparent; color: var(--muted);
    cursor: pointer; transition: all 0.15s ease;
}
.brkPerfTab:hover[b-snffrl24ck] { color: var(--text); border-color: var(--muted); }
.brkPerfTab .brkDot[b-snffrl24ck] { width: 7px; height: 7px; }
.brkPerfTabName[b-snffrl24ck] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brkPerfTabOn[b-snffrl24ck] {
    color: var(--text); font-weight: 600;
    border-color: var(--brkPerfClr); background: color-mix(in srgb, var(--brkPerfClr) 12%, transparent);
}
.brkPerfBody[b-snffrl24ck] { display: flex; flex-direction: column; gap: 6px; }
.brkPerfStat[b-snffrl24ck] { display: flex; align-items: center; gap: 8px; }
.brkPerfMkt[b-snffrl24ck] { width: 66px; flex-shrink: 0; font-size: 0.72rem; color: var(--muted); }
.brkPerfBar[b-snffrl24ck] {
    flex: 1; height: 6px; border-radius: 999px; overflow: hidden;
    background: color-mix(in srgb, var(--border) 60%, transparent); min-width: 36px;
}
.brkPerfFill[b-snffrl24ck] { display: block; height: 100%; border-radius: 999px; }
.brkPerfVal[b-snffrl24ck] { flex-shrink: 0; font-size: 0.72rem; color: var(--textSoft); min-width: 122px; text-align: right; display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; }
.brkPerfVal b[b-snffrl24ck] { color: var(--text); font-weight: 700; }
.brkPerfRoi[b-snffrl24ck] { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 72px; text-align: right; white-space: nowrap; }
/* Priced-pick sample chip "(n)" — dotted underline signals it's hoverable; carries the
   same styled tooltip window as the "?" help (shown on hover AND keyboard focus). */
.brkPerfRoiN[b-snffrl24ck] {
    position: relative;
    font-style: normal; font-weight: 700; font-size: 0.62rem;
    color: var(--muted);
    margin-left: 3px;
    cursor: help;
    border-bottom: 1px dotted var(--muted);
}
.brkPerfRoiN:hover[b-snffrl24ck], .brkPerfRoiN:focus[b-snffrl24ck] { color: var(--text); border-bottom-color: var(--text); }
.brkPerfRoiN:hover .brkTip[b-snffrl24ck], .brkPerfRoiN:focus .brkTip[b-snffrl24ck] { opacity: 1; visibility: visible; transform: translateY(0); }
/* Right-anchored tooltip variant: the chip sits at the card's right edge, so the
   default left-anchored 234px window would overflow the card. */
.brkTipEnd[b-snffrl24ck] { left: auto; right: -4px; font-weight: 400; white-space: normal; }
.brkPerfRoiPos[b-snffrl24ck] { color: #4ade80; }
.brkPerfRoiNeg[b-snffrl24ck] { color: #f87171; }
.brkPerfRoiNa[b-snffrl24ck] { color: var(--mutedFaint); min-width: 72px; text-align: right; }
.brkPerfTagCell[b-snffrl24ck] { width: 38px; flex-shrink: 0; display: flex; justify-content: flex-end; }
.brkPerfBestTag[b-snffrl24ck] {
    font-size: 0.55rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
    color: #4ade80; padding: 1px 5px; border-radius: 4px; line-height: 1.4;
    border: 1px solid rgba(74, 222, 128, 0.4); background: rgba(74, 222, 128, 0.12);
}
@media (max-width: 720px) {
    .brkPerf[b-snffrl24ck] { width: 100%; }
}
/* /Components/Shared/ModelSplitStrip.razor.rz.scp.css */
/* ── Verdict track ("Variant A"). Always rendered; the badge + tint flip
      between amber (2–1 split) and green (unanimous). ──────────────────── */
.mssStrip[b-x6h0yi3ox0] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(251, 191, 36, 0.18);
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.06), rgba(251, 191, 36, 0.02) 40%, transparent);
}
.mssStripAgree[b-x6h0yi3ox0] {
    border-color: rgba(52, 211, 153, 0.18);
    background: linear-gradient(90deg, rgba(52, 211, 153, 0.06), rgba(52, 211, 153, 0.02) 40%, transparent);
}
.mssStripAgree .mssBadge b[b-x6h0yi3ox0] { color: #34d399; }
/* One or more models are coin flips — slate tone, badge shows decided votes only */
.mssStripUncertain[b-x6h0yi3ox0] {
    border-color: rgba(148, 163, 184, 0.18);
    background: linear-gradient(90deg, rgba(148, 163, 184, 0.06), rgba(148, 163, 184, 0.02) 40%, transparent);
}
.mssStripUncertain .mssBadge b[b-x6h0yi3ox0] { color: #94a3b8; }

.mssBadge[b-x6h0yi3ox0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    line-height: 1.1;
}
.mssBadge b[b-x6h0yi3ox0] {
    font-size: 1rem;
    font-weight: 900;
    color: #fbbf24;
    letter-spacing: 0.02em;
}
.mssBadge i[b-x6h0yi3ox0] {
    font-style: normal;
    font-size: 0.54rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}
/* Premium-locked badge: purple lock + "Premium", clickable to the upgrade page. */
.mssBadgeLock[b-x6h0yi3ox0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    color: #a78bfa;
    text-decoration: none;
}
.mssBadgeLock:hover[b-x6h0yi3ox0] { color: #c4b5fd; }
.mssBadgeLockLabel[b-x6h0yi3ox0] {
    font-size: 0.5rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Premium-locked strip = purple tone; "Premium" label in purple. */
.mssStripLocked[b-x6h0yi3ox0] {
    border-color: rgba(167, 139, 250, 0.30);
    background: linear-gradient(90deg, rgba(167, 139, 250, 0.12), rgba(167, 139, 250, 0.03) 40%, transparent);
}
.mssStripLocked .mssBadge i[b-x6h0yi3ox0] { color: #a78bfa; }

/* The three locked premium models, shown as dimmed colour circles right under the lock
   (in the badge column) with their short codes — compact, no separate row. */
.mssBadgeModels[b-x6h0yi3ox0] {
    display: flex;
    gap: 3px;
    margin-top: 4px;
}
.mssBadgeModelDot[b-x6h0yi3ox0] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.38rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    color: #0a0e16;
    opacity: 0.72;
    flex-shrink: 0;
}

/* The track: rails with team logo+code at each end, model dots between them. */
.mssTrack[b-x6h0yi3ox0] {
    flex: 1;
    position: relative;
    height: 40px;
    display: flex;
    align-items: center;
    /* Rails sit in-flow at the ends; dots are absolutely positioned over the line. */
    justify-content: space-between;
    min-width: 0;
}
.mssTrackLine[b-x6h0yi3ox0] {
    position: absolute;
    left: 34px;
    right: 34px;
    top: 50%;
    height: 2px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, #3b82f6, rgba(100, 116, 139, 0.45) 46%, rgba(100, 116, 139, 0.45) 54%, #ef4444);
    border-radius: 2px;
}
/* Midpoint marker: bright enough to read, tall enough to peek above a dot parked
   dead-center (dot is 24px, vertically centered), with a numeric 50/50 label under
   the line so the center needs no explanation. */
.mssTrackMid[b-x6h0yi3ox0] {
    position: absolute;
    left: 50%;
    top: 4px;
    bottom: 12px;
    width: 2px;
    transform: translateX(-50%);
    border-radius: 1px;
    background: rgba(148, 163, 184, 0.6);
}
.mssTrackFifty[b-x6h0yi3ox0] {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--mutedFaint);
    pointer-events: none;
}

.mssRail[b-x6h0yi3ox0] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    z-index: 1;
}
.mssRailLogo[b-x6h0yi3ox0] {
    width: 22px;
    height: 22px;
    object-fit: contain;
    border-radius: 5px;
    background: color-mix(in srgb, var(--muted) 10%, transparent);
}
.mssRailCode[b-x6h0yi3ox0] {
    font-size: 0.6rem;
    font-weight: 800;
    color: var(--muted);
    letter-spacing: 0.03em;
    max-width: 56px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Model dots — focusable (tap on mobile) with a pure-CSS tooltip. */
.mssDot[b-x6h0yi3ox0] {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.48rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #0a0e16;
    border: 2px solid var(--panel, #101725);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.45);
    cursor: default;
    z-index: 2;
    outline: none;
}
.mssDot:hover[b-x6h0yi3ox0], .mssDot:focus[b-x6h0yi3ox0] {
    z-index: 5;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.25);
}
/* Cluster rows: dots whose true positions nearly coincide alternate above/below
   the line so every dot stays visible at its real position */
.mssDotUp[b-x6h0yi3ox0] { transform: translate(-50%, calc(-50% - 9px)); }
.mssDotDown[b-x6h0yi3ox0] { transform: translate(-50%, calc(-50% + 9px)); }
/* Consensus dot: same treatment as the model dots, at its TRUE blend position (skips the
   anti-overlap spreading — overlap accepted, so its percentage placement is exact). Sits
   above the model dots so it can never be buried; hover/focus disambiguates. Non-voting. */
.mssDotConsensus[b-x6h0yi3ox0] { z-index: 3; }

/* Unreliable-model badge on a dot (same semantics as the accuracy cards' "!" icon) */
.mssDotWarn[b-x6h0yi3ox0] {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #f59e0b;
    color: #0a0e16;
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--panel, #101725);
}
.mssTipWarn[b-x6h0yi3ox0] { color: #fbbf24; }

.mssTip[b-x6h0yi3ox0] {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column;
    gap: 3px;
    width: max-content;
    max-width: 240px;
    padding: 8px 11px;
    border-radius: 8px;
    background: #0d1320;
    border: 1px solid rgba(148, 163, 184, 0.25);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
    z-index: 20;
    text-align: left;
    white-space: normal;
}
.mssDot:hover .mssTip[b-x6h0yi3ox0], .mssDot:focus .mssTip[b-x6h0yi3ox0] { display: flex; }
.mssTipTitle[b-x6h0yi3ox0] {
    font-size: 0.64rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.mssTipLine[b-x6h0yi3ox0] {
    font-size: 0.66rem;
    font-weight: 500;
    color: var(--text);
    line-height: 1.35;
}

@media (max-width: 640px) {
    /* Wide enough for the text-only market poles ("Over 3.5", "T1 -1.5") —
       team-name rails normally render a logo instead, so this rarely bites. */
    .mssRailCode[b-x6h0yi3ox0] { max-width: 52px; }
}
/* /Components/Shared/NavigationSpinner.razor.rz.scp.css */
/* Top-center loading bar style — non-blocking, clearly visible during longer
   transitions, invisible (and unreachable for screen readers) at rest.

   Positioned high enough on the viewport that the spinner is the first thing
   users notice after a click — directly addressing the "I clicked but the
   page just scrolled" UX gap. Below the nav bar so it doesn't compete with
   nav controls. */

.navSpinner[b-bpvewjkfhn] {
    position: fixed;
    top: 76px;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    z-index: 9000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 160ms ease, transform 160ms ease;
}

.navSpinnerVisible[b-bpvewjkfhn] {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.navSpinnerRing[b-bpvewjkfhn] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2.5px solid rgba(96, 165, 250, 0.18);
    border-top-color: #60a5fa;
    border-right-color: #60a5fa;
    animation: navSpinnerSpin-b-bpvewjkfhn 720ms linear infinite;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32),
                0 0 0 1px rgba(15, 23, 42, 0.4);
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(4px);
}

@keyframes navSpinnerSpin-b-bpvewjkfhn {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .navSpinnerRing[b-bpvewjkfhn] { animation-duration: 1500ms; }
    .navSpinner[b-bpvewjkfhn] { transition: opacity 60ms linear; }
}

/* On narrow viewports the nav bar collapses, so sit a bit higher. */
@media (max-width: 640px) {
    .navSpinner[b-bpvewjkfhn] { top: 60px; }
}
/* /Components/Shared/OddsMovementStrip.razor.rz.scp.css */
/* ── Line movement (series moneyline price history) ──
   Numbers-only chronological list. Green = price shortened (market backing that
   side), red = drifted. Shared by the match page / live page / series view (full
   mode) and the upcoming card odds block (compact mode + hover popover). */

.omvLabel[b-4w37fqw129] {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mutedFaint);
    white-space: nowrap;
}

/* ── Full mode ── */
.omvFull[b-4w37fqw129] {
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--text) 3%, transparent);
    border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}
.omvFullHdr[b-4w37fqw129] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}
.omvHdrTeams[b-4w37fqw129] {
    display: grid;
    grid-template-columns: 72px 72px;
    gap: 8px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mutedFaint);
    text-align: right;
}
.omvHdrTeams span[b-4w37fqw129] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.omvRow[b-4w37fqw129] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 0;
    font-variant-numeric: tabular-nums;
}
.omvTime[b-4w37fqw129] {
    font-size: 0.68rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.omvRow .omvCell[b-4w37fqw129] {
    flex: 0 0 72px;
    text-align: right;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
}
.omvCell i[b-4w37fqw129] { font-style: normal; font-size: 0.6rem; }
.omvDown[b-4w37fqw129] { color: #4ade80; }
.omvUp[b-4w37fqw129] { color: #f87171; }

/* ── Compact mode (cards) ──
   Rendered as a self-contained interactive PILL so the hover affordance is
   obvious: a bordered chip with a trend-line glyph on the left, the opening→current
   summary, a count badge, and a chevron that rotates when the full-history popover
   opens. The whole pill lifts + accent-borders on hover/focus. */
.omvCompact[b-4w37fqw129] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    max-width: 100%;
    padding: 4px 9px 4px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--text) 11%, transparent);
    cursor: pointer;
    outline: none;
    transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease;
}
.omvCompact:hover[b-4w37fqw129],
.omvCompact:focus-visible[b-4w37fqw129] {
    background: color-mix(in srgb, #38bdf8 12%, transparent);
    border-color: color-mix(in srgb, #38bdf8 55%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(56, 189, 248, 0.16);
}
/* trend-line glyph — the primary "this is a chart you can open" cue */
.omvTrendIcon[b-4w37fqw129] {
    flex: 0 0 auto;
    color: #38bdf8;
    opacity: 0.9;
}
/* the label doubles as part of the chip; hide it on very narrow cards so the
   numbers always fit (the icon + chevron still signal interactivity). */
.omvCompact .omvLabel[b-4w37fqw129] { font-size: 0.58rem; letter-spacing: 0.06em; }

.omvSummary[b-4w37fqw129] {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.omvTeam[b-4w37fqw129] { color: var(--mutedFaint); font-size: 0.62rem; font-weight: 700; text-transform: uppercase; max-width: 64px; overflow: hidden; text-overflow: ellipsis; }
.omvArrowSep[b-4w37fqw129] { color: var(--mutedFaint); font-size: 0.62rem; }
.omvDot[b-4w37fqw129] { color: var(--mutedFaint); }
.omvVal.omvDown[b-4w37fqw129] { color: #4ade80; }
.omvVal.omvUp[b-4w37fqw129] { color: #f87171; }

/* count badge — how many recorded price points sit behind the chip */
.omvCount[b-4w37fqw129] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    border-radius: 999px;
    background: color-mix(in srgb, #38bdf8 22%, transparent);
    color: #7dd3fc;
    font-size: 0.56rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.omvChevron[b-4w37fqw129] {
    flex: 0 0 auto;
    color: var(--mutedFaint);
    transition: transform 0.16s ease, color 0.14s ease;
}
.omvCompact:hover .omvChevron[b-4w37fqw129],
.omvCompact:focus-visible .omvChevron[b-4w37fqw129] { transform: rotate(180deg); color: #7dd3fc; }

/* popover with the full row list — same hover/focus reveal as the score tip */
.omvPopover[b-4w37fqw129] {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 40;
    min-width: 250px;
    padding: 9px 11px;
    border-radius: 10px;
    background: var(--cardBg, #10141f);
    border: 1px solid color-mix(in srgb, var(--text) 15%, transparent);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
/* little downward pointer connecting the popover to the chip */
.omvPopArrow[b-4w37fqw129] {
    position: absolute;
    top: 100%;
    left: 20px;
    width: 10px;
    height: 10px;
    background: var(--cardBg, #10141f);
    border-right: 1px solid color-mix(in srgb, var(--text) 15%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--text) 15%, transparent);
    transform: translateY(-50%) rotate(45deg);
}
.omvCompact:hover .omvPopover[b-4w37fqw129],
.omvCompact:focus-within .omvPopover[b-4w37fqw129],
.omvCompact:focus .omvPopover[b-4w37fqw129] { display: block; }
.omvPopHdr[b-4w37fqw129] {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mutedFaint);
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.omvPopover .omvRow[b-4w37fqw129] { gap: 8px; }
.omvPopover .omvCell[b-4w37fqw129] { flex: 0 0 58px; font-size: 0.72rem; }
.omvPopover .omvTime[b-4w37fqw129] { font-size: 0.64rem; }

@media (max-width: 640px) {
    .omvHdrTeams[b-4w37fqw129] { grid-template-columns: 60px 60px; }
    .omvRow .omvCell[b-4w37fqw129] { flex-basis: 60px; }
}
/* On narrow cards drop the text label — the trend glyph + chevron + count badge
   still make the chip's interactivity obvious while the numbers keep their room. */
@media (max-width: 460px) {
    .omvCompact .omvLabel[b-4w37fqw129] { display: none; }
}
/* /Components/Shared/PickCard.razor.rz.scp.css */
/* Pick card styles — the single source of truth for the card on both the Picks page
   and the premium marketing replica. (Page-level pieces — the model track strip and
   the <ol class="pkList"> wrapper — live on the respective pages, not here.) */

.pkCard[b-hvqh2klh9v] { position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; overflow: visible; box-shadow: inset 3px 0 0 0 var(--border); }
.pkCardHi[b-hvqh2klh9v] { box-shadow: inset 3px 0 0 0 #4ade80; }
.pkCardMid[b-hvqh2klh9v] { box-shadow: inset 3px 0 0 0 #fbbf24; }
.pkCardLowScore[b-hvqh2klh9v] { box-shadow: inset 3px 0 0 0 #f87171; }
.pkCardLow[b-hvqh2klh9v] { opacity: 0.82; }
.pkCard:hover[b-hvqh2klh9v] { z-index: 30; }
.pkCardLink[b-hvqh2klh9v] { display: flex; align-items: center; gap: 16px; padding: 16px 18px; text-decoration: none; color: inherit; border-radius: 14px; }
.pkCardLink:hover[b-hvqh2klh9v] { background: color-mix(in srgb, var(--text) 3%, transparent); }
.pkMain[b-hvqh2klh9v] { flex: 1 1 auto; min-width: 0; }

/* header tags */
.pkHead[b-hvqh2klh9v] { display: flex; align-items: center; gap: 8px; margin-bottom: 13px; flex-wrap: wrap; }
.pkTag[b-hvqh2klh9v] { font-size: 0.68rem; font-weight: 700; padding: 3px 9px; border-radius: 6px; }
.pkTagTime[b-hvqh2klh9v] { background: color-mix(in srgb, #7dd3fc 14%, transparent); color: #7dd3fc; }
.pkTagLive[b-hvqh2klh9v] { background: color-mix(in srgb, #f87171 18%, transparent); color: #fca5a5; display: inline-flex; align-items: center; gap: 5px; }
.pkLiveDot[b-hvqh2klh9v] { width: 7px; height: 7px; border-radius: 50%; background: #f87171; animation: pkPulse-b-hvqh2klh9v 1.4s infinite; }
@keyframes pkPulse-b-hvqh2klh9v { 50% { opacity: 0.35; } }
.pkTagLeague[b-hvqh2klh9v] { background: transparent; color: var(--text); padding-left: 2px; }
.pkTagBo[b-hvqh2klh9v] { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--muted); }
.pkTagMkt--winner[b-hvqh2klh9v] { background: color-mix(in srgb, #22d3ee 16%, transparent); color: #67e8f9; }
.pkTagMkt--handicap[b-hvqh2klh9v] { background: color-mix(in srgb, #fb923c 16%, transparent); color: #fdba74; }
.pkTagMkt--totalmaps[b-hvqh2klh9v] { background: color-mix(in srgb, #2dd4bf 16%, transparent); color: #5eead4; }
.pkTagMkt--exactscore[b-hvqh2klh9v] { background: color-mix(in srgb, #818cf8 16%, transparent); color: #a5b4fc; }
.pkLowFlag[b-hvqh2klh9v] { font-size: 0.6rem; font-weight: 800; color: #fbbf24; background: color-mix(in srgb, #fbbf24 14%, transparent); padding: 3px 8px; border-radius: 6px; letter-spacing: 0.02em; text-transform: capitalize; }
/* Market-disagrees tag: bright so the warning reads at a glance; hover/focus opens a
   house-style tooltip (same family as the score-gauge and value-graph tooltips). */
.pkTagContrarian[b-hvqh2klh9v] {
    position: relative;
    background: linear-gradient(90deg, #ef4444, #f97316);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.62rem;
    font-weight: 800;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.35);
    cursor: help;
    outline: none;
}
.pkCtTip[b-hvqh2klh9v] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: max-content;
    max-width: min(280px, calc(100vw - 60px));
    padding: 9px 12px;
    background: rgba(11, 18, 32, 0.97);
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
    color: var(--text);
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.45;
    text-transform: none;
    letter-spacing: normal;
    text-align: left;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
    pointer-events: none;
    z-index: 40;
}
.pkTagContrarian:hover .pkCtTip[b-hvqh2klh9v], .pkTagContrarian:focus .pkCtTip[b-hvqh2klh9v] { opacity: 1; visibility: visible; transform: translateY(0); }

/* body / matchup / pick column */
.pkBody[b-hvqh2klh9v] { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; min-width: 0; }
.pkMatchup[b-hvqh2klh9v] { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pkSide[b-hvqh2klh9v] { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: 9px; flex: 1; min-width: 0; }
.pkSideChosen[b-hvqh2klh9v] { background: color-mix(in srgb, #4ade80 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #4ade80 35%, transparent); }
/* Split picks: the base models aren't unanimous on this side — amber, not green */
.pkSideChosenSplit[b-hvqh2klh9v] { background: color-mix(in srgb, #fbbf24 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #fbbf24 35%, transparent); }
.pkSideChosenSplit .pkChk[b-hvqh2klh9v] { color: #fbbf24; }
.pkLogo[b-hvqh2klh9v] { width: 26px; height: 26px; border-radius: 6px; object-fit: contain; flex: 0 0 auto; }
.pkLogoPh[b-hvqh2klh9v] { background: color-mix(in srgb, var(--text) 8%, transparent); }
.pkSideName[b-hvqh2klh9v] { font-weight: 700; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pkSideChosen .pkSideName[b-hvqh2klh9v] { color: var(--text); }
.pkChk[b-hvqh2klh9v] { color: #4ade80; flex: 0 0 auto; display: inline-flex; }
.pkVs[b-hvqh2klh9v] { color: var(--mutedFaint); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; }
.pkSelBox[b-hvqh2klh9v] { display: flex; flex-direction: column; gap: 2px; padding: 4px; }
.pkSelBig[b-hvqh2klh9v] { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.pkSelSub[b-hvqh2klh9v] { color: var(--muted); font-size: 0.78rem; }
.pkPickCol[b-hvqh2klh9v] { text-align: right; display: flex; flex-direction: column; gap: 3px; white-space: nowrap; }
.pkPickSel[b-hvqh2klh9v] { font-weight: 800; font-size: 0.92rem; }
.pkPickOdds[b-hvqh2klh9v] { color: #fbbf24; font-weight: 800; font-size: 1.18rem; line-height: 1; }
.pkPickEdge[b-hvqh2klh9v] { font-size: 0.74rem; font-weight: 700; color: #4ade80; }
.pkCalib[b-hvqh2klh9v] { font-size: 0.68rem; color: var(--mutedFaint); }
.pkCalib b[b-hvqh2klh9v] { color: var(--muted); }

/* breakdown strip */
.pkStrip[b-hvqh2klh9v] { display: flex; flex-direction: column; align-items: stretch; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.pkStripTop[b-hvqh2klh9v] { display: flex; align-items: center; flex-wrap: wrap; }
.pkStripTop .pkSeg:first-child[b-hvqh2klh9v] { padding-left: 0; }
.pkSeg[b-hvqh2klh9v] { display: flex; flex-direction: column; gap: 2px; padding: 0 16px; border-right: 1px solid var(--border); }
.pkSeg:first-child[b-hvqh2klh9v] { padding-left: 0; }
.pkSeg:last-child[b-hvqh2klh9v] { border-right: none; }
.pkSegLbl[b-hvqh2klh9v] { font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mutedFaint); font-weight: 700; }
.pkSegVal[b-hvqh2klh9v] { font-size: 0.8rem; font-weight: 700; color: var(--text); display: inline-flex; align-items: center; gap: 6px; }
.pkSegVal.pkSegBad[b-hvqh2klh9v] { color: #fbbf24; }
.pkMBadge .pkDot[b-hvqh2klh9v], .pkDot[b-hvqh2klh9v] { width: 8px; height: 8px; border-radius: 50%; }
.pkAgree[b-hvqh2klh9v] { display: inline-flex; gap: 4px; align-items: center; }
.pkMc[b-hvqh2klh9v] { font-size: 0.6rem; font-weight: 800; padding: 2px 6px; border-radius: 5px; background: color-mix(in srgb, var(--c, var(--text)) 18%, transparent); color: var(--c, var(--text)); }
.pkMc.pkMcMuted[b-hvqh2klh9v] { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--mutedFaint); }
/* Coin-flip band: neither backing nor opposing — dashed outline, no side claim */
.pkMc.pkMcUncertain[b-hvqh2klh9v] { background: transparent; color: var(--mutedFaint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mutedFaint) 55%, transparent); }
.pkAgreeTag[b-hvqh2klh9v] { font-size: 0.6rem; font-weight: 800; color: #4ade80; text-transform: uppercase; letter-spacing: 0.04em; }
.pkSplitTag[b-hvqh2klh9v] { font-size: 0.6rem; font-weight: 800; color: #fbbf24; text-transform: uppercase; letter-spacing: 0.04em; }
.pkSplitTag.pkSplitTagRed[b-hvqh2klh9v] { color: #f87171; }
.pkSplitTag.pkSplitTagGray[b-hvqh2klh9v] { color: #94a3b8; }
.pkSegGrid[b-hvqh2klh9v] { margin-top: 11px; }
.pkModelGrid[b-hvqh2klh9v] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 7px; }
.pkMG[b-hvqh2klh9v] { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--text) 3%, transparent); border-left: 2px solid var(--c); }
.pkMGName[b-hvqh2klh9v] { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 800; color: var(--text); }
.pkMGDot[b-hvqh2klh9v] { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.pkMGStat[b-hvqh2klh9v] { display: flex; align-items: baseline; gap: 5px; }
.pkMGStat b[b-hvqh2klh9v] { font-size: 0.85rem; font-weight: 800; color: var(--text); }
.pkMGStat b.pkConfPos[b-hvqh2klh9v] { color: #4ade80; }
.pkMGStat b.pkConfNeg[b-hvqh2klh9v] { color: #f87171; }
.pkMGStat b.pkConfUncertain[b-hvqh2klh9v] { color: var(--mutedFaint); }
.pkMGStat b.pkAccBest[b-hvqh2klh9v] { color: #4ade80; }
.pkMGStat b.pkSegBad[b-hvqh2klh9v] { color: #fbbf24; }
.pkMGStat b.pkRoiPos[b-hvqh2klh9v] { color: #4ade80; }
.pkMGStat b.pkRoiNeg[b-hvqh2klh9v] { color: #f87171; }
.pkMGStat b.pkRoiNone[b-hvqh2klh9v] { color: var(--mutedFaint); font-weight: 700; cursor: help; }
.pkMGStat i[b-hvqh2klh9v] { font-size: 0.56rem; font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mutedFaint); font-weight: 700; }
/* wins/total record behind the acc and roi values ("8/11") */
.pkMGRec[b-hvqh2klh9v] { font-size: 0.6rem; font-style: normal; font-weight: 700; color: var(--mutedFaint); white-space: nowrap; }

/* Wrapper for the shared TooltipPopover "?" on the ROI cell — swallows clicks so
   opening the tooltip doesn't trigger the card's link navigation. */
.pkRoiHelpWrap[b-hvqh2klh9v] { display: inline-flex; flex: 0 0 auto; }

/* line-movement strip inside the right-aligned pick column: keep the summary hugging
   the right edge and flip its popover so it opens leftward instead of off-card */
.pkPickCol[b-hvqh2klh9v]  .omvCompact { margin-left: auto; }
.pkPickCol[b-hvqh2klh9v]  .omvPopover { left: auto; right: 0; }

/* best-performer star — league-scoped: top settled ROI in this pick's league+market
   (enough graded bets), falling back to the top league accuracy otherwise */
.pkMGBestCell[b-hvqh2klh9v] { background: color-mix(in srgb, #facc15 5%, transparent); }
.pkMGName[b-hvqh2klh9v] { flex-wrap: wrap; }
.pkMGBest[b-hvqh2klh9v] { display: inline-flex; align-items: center; gap: 3px; padding: 1.5px 6px; border-radius: 999px;
    border: 1px solid color-mix(in srgb, #facc15 45%, transparent); background: color-mix(in srgb, #facc15 12%, transparent);
    color: #facc15; font-size: 0.5rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    white-space: nowrap; cursor: help; }
.pkMGBest svg[b-hvqh2klh9v] { flex: 0 0 auto; }

/* model split strip (shared ModelSplitStrip) pinned under the model grid */
.pkSplitWrap[b-hvqh2klh9v] { margin-top: 10px; }

/* score gauge */
.pkScoreBadge[b-hvqh2klh9v] { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pkGauge[b-hvqh2klh9v] { position: relative; width: 56px; height: 56px; }
.pkGauge svg[b-hvqh2klh9v] { transform: rotate(-90deg); width: 100%; height: 100%; display: block; }
.pkGaugeTrack[b-hvqh2klh9v] { fill: none; stroke: color-mix(in srgb, var(--text) 10%, transparent); stroke-width: 5; }
.pkGaugeVal[b-hvqh2klh9v] { fill: none; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 138.23; }
.pkGauge.hi .pkGaugeVal[b-hvqh2klh9v] { stroke: #4ade80; }
.pkGauge.mid .pkGaugeVal[b-hvqh2klh9v] { stroke: #fbbf24; }
.pkGauge.low .pkGaugeVal[b-hvqh2klh9v] { stroke: #f87171; }
.pkGaugeNum[b-hvqh2klh9v] { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.03em; }
.pkGauge.hi .pkGaugeNum[b-hvqh2klh9v] { color: #4ade80; }
.pkGauge.mid .pkGaugeNum[b-hvqh2klh9v] { color: #fbbf24; }
.pkGauge.low .pkGaugeNum[b-hvqh2klh9v] { color: #f87171; }
.pkScoreLbl[b-hvqh2klh9v] { font-size: 0.52rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mutedFaint); font-weight: 700; }

/* score hover breakdown */
.pkScoreTip[b-hvqh2klh9v] {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 50; width: 240px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px;
    box-shadow: 0 14px 34px rgba(0,0,0,0.5);
    opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.12s, transform 0.12s;
    pointer-events: none; text-align: left; cursor: default;
}
.pkScoreBadge:hover .pkScoreTip[b-hvqh2klh9v] { opacity: 1; visibility: visible; transform: translateY(0); }
.pkScoreTipHdr[b-hvqh2klh9v] { font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mutedFaint); font-weight: 700; margin-bottom: 9px; }
.pkScoreTipRow[b-hvqh2klh9v] { display: grid; grid-template-columns: 1fr 50px 42px; align-items: center; gap: 8px; margin-bottom: 6px; }
.pkScoreTipLbl[b-hvqh2klh9v] { font-size: 0.72rem; color: var(--text); font-weight: 600; }
.pkScoreTipBar[b-hvqh2klh9v] { height: 5px; background: color-mix(in srgb, var(--text) 12%, transparent); border-radius: 3px; overflow: hidden; }
.pkScoreTipBar span[b-hvqh2klh9v] { display: block; height: 100%; background: linear-gradient(90deg, #22c55e, #4ade80); border-radius: 3px; }
.pkScoreTipPts[b-hvqh2klh9v] { font-size: 0.72rem; font-weight: 800; color: var(--text); text-align: right; white-space: nowrap; }
.pkScoreTipPts i[b-hvqh2klh9v] { color: var(--mutedFaint); font-weight: 600; font-style: normal; }
.pkScoreTipTotal[b-hvqh2klh9v] { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; padding-top: 8px;
    border-top: 1px solid var(--border); font-size: 0.7rem; color: var(--muted); }
.pkScoreTipTotal b[b-hvqh2klh9v] { color: var(--text); font-weight: 800; font-size: 0.85rem; }

@media (max-width: 700px) {
    .pkCardLink[b-hvqh2klh9v] { flex-direction: row; align-items: flex-start; gap: 10px; }
    .pkScoreBadge[b-hvqh2klh9v] { order: 2; }
    .pkModelGrid[b-hvqh2klh9v] { grid-template-columns: repeat(2, 1fr); }
    .pkStripTop[b-hvqh2klh9v] { gap: 4px 0; }
    .pkStripTop .pkSeg[b-hvqh2klh9v] { padding: 0 12px 0 0; border-right: none; }
}
@media (max-width: 640px) {
    .pkBody[b-hvqh2klh9v] { grid-template-columns: 1fr; gap: 12px; }
    .pkPickCol[b-hvqh2klh9v] { text-align: left; }
    .pkStrip[b-hvqh2klh9v] { gap: 6px 0; }
    .pkSeg[b-hvqh2klh9v] { padding: 0 10px; }
    .pkCardLink[b-hvqh2klh9v] { gap: 12px; }
}
@media (max-width: 600px) {
    .pkCardLink[b-hvqh2klh9v] { flex-direction: column; align-items: stretch; gap: 8px; }
    .pkScoreBadge[b-hvqh2klh9v] { order: -1; flex-direction: row; align-items: center; justify-content: flex-end; gap: 8px; }
    .pkGauge[b-hvqh2klh9v] { width: 46px; height: 46px; }
    .pkBody[b-hvqh2klh9v] { grid-template-columns: 1fr; }
    .pkModelGrid[b-hvqh2klh9v] { grid-template-columns: repeat(2, 1fr); }
    .pkMatchup[b-hvqh2klh9v] { flex-direction: column; align-items: stretch; gap: 6px; }
    .pkSide[b-hvqh2klh9v] { flex: none; }
    .pkVs[b-hvqh2klh9v] { align-self: center; }
    .pkScoreTip[b-hvqh2klh9v] { right: auto; left: 0; width: min(240px, calc(100vw - 60px)); }
}
@media (max-width: 420px) {
    .pkGauge[b-hvqh2klh9v] { width: 48px; height: 48px; }
    .pkGauge svg[b-hvqh2klh9v] { width: 48px; height: 48px; }
}
/* /Components/Shared/PicksTeaserBanner.razor.rz.scp.css */
/* PicksTeaserBanner — Style 2 "Premium CTA banner"
   Hero card with green-tinted gradient, surfaces top 3 positive-EV picks
   above the Home page section content. Free users see the same shell with
   team names + EV blurred and a locked CTA. */

.teaserBanner[b-ctco97hm21] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(22, 163, 74, 0.04) 100%);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 14px;
    padding: 14px 18px 16px;
    margin: 0;
    position: relative;
    overflow: hidden;
}

/* Soft radial glow in the top-right corner. Purely decorative — sits behind
   content (z-index: 0 implicit) and the head/list elements lift to z-index: 1. */
.teaserBanner[b-ctco97hm21]::after {
    content: "";
    position: absolute;
    top: -40%;
    right: -10%;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.18) 0%, transparent 70%);
    pointer-events: none;
}

.teaserBannerHead[b-ctco97hm21] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

.teaserBannerTitle[b-ctco97hm21] {
    font-size: 1rem;
    font-weight: 800;
    color: #f9fafb;
    margin-bottom: 2px;
    letter-spacing: -0.01em;
}

.teaserBannerSubtitle[b-ctco97hm21] {
    font-size: 0.78rem;
    color: #9ca3af;
}

.teaserBannerCta[b-ctco97hm21] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    background: #22c55e;
    color: #052e16;
    font-weight: 700;
    font-size: 0.82rem;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.15s ease, transform 0.15s ease;
    white-space: nowrap;
}
.teaserBannerCta:hover[b-ctco97hm21] {
    background: #16a34a;
    transform: translateY(-1px);
}

/* Locked variant of the header CTA — premium purple, matching the hero
   Go Premium button (the premium "See all picks" variant stays green:
   that's navigation, not an upsell). */
.teaserBannerCtaLocked[b-ctco97hm21] {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.4);
}
.teaserBannerCtaLocked:hover[b-ctco97hm21] {
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: #fff;
}

/* Picks list — 3-column grid so the banner stays short. Each pick row
   keeps the same left/right structure (teams + league-Bo on left, edge
   + model badge on right) but at a smaller width that prevents the
   banner from ballooning vertically. Mobile collapses to 1 column
   below 720px. */
.teaserBannerList[b-ctco97hm21] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    position: relative;
    z-index: 1;
}

.teaserBannerRow[b-ctco97hm21] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 9px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease, border-color 0.15s ease;
    min-width: 0;
}
.teaserBannerRow:hover[b-ctco97hm21] {
    background: rgba(0, 0, 0, 0.38);
    border-color: rgba(34, 197, 94, 0.3);
}

.teaserBannerLeft[b-ctco97hm21] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.teaserBannerTeams[b-ctco97hm21] {
    font-size: 0.84rem;
    font-weight: 700;
    color: #e5e7eb;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teaserBannerVs[b-ctco97hm21] {
    color: #9ca3af;
    font-weight: 500;
    font-size: 0.74rem;
    margin: 0 3px;
}

/* Small team crests inline with the names. object-fit keeps non-square logos
   from distorting; they sit on the baseline of the team-name text. */
.teaserTeamLogo[b-ctco97hm21] {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 4px;
    flex-shrink: 0;
}
.teaserTeamNm[b-ctco97hm21] {
    vertical-align: middle;
}

/* Market-type chip under the teams (e.g. "Series Winner"). The generic market
   kind is always visible so free users still see what each pick is for, but the
   specific line/selection is stripped server-side for non-premium users. */
.teaserBannerMarket[b-ctco97hm21] {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #22d3ee;
    line-height: 1.4;
}

.teaserBannerLeague[b-ctco97hm21] {
    font-size: 0.7rem;
    color: #9ca3af;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Date prefix on each pick row — same muted tone as the league text it sits
   beside, slightly brighter so the "Today HH:mm" / "MMM d HH:mm" string reads
   first when scanning the row. The separator dot reuses the league-text color. */
.teaserBannerDate[b-ctco97hm21] {
    color: #d1d5db;
    font-weight: 600;
}

.teaserBannerSep[b-ctco97hm21] {
    color: #6b7280;
    margin: 0 1px;
}

/* Live badge — small pill that replaces the date prefix when the picked match
   is already in progress. Mirrors the pickBadgeLive treatment used elsewhere
   on the site so users recognise the state at a glance. */
.teaserBannerLive[b-ctco97hm21] {
    display: inline-block;
    padding: 1px 6px;
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 4px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4;
    vertical-align: middle;
}

.teaserBannerRight[b-ctco97hm21] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    flex-shrink: 0;
}

.teaserBannerEdge[b-ctco97hm21] {
    font-size: 0.95rem;
    font-weight: 800;
    color: #22c55e;
    line-height: 1.1;
}

.teaserBannerModel[b-ctco97hm21] {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: right;
}

/* Model-color accents — match the existing site palette */
.teaserModelConsensus[b-ctco97hm21] { color: #22d3ee; }
.teaserModelLgbm[b-ctco97hm21]      { color: #fbbf24; }
.teaserModelPca[b-ctco97hm21]       { color: #a78bfa; }
.teaserModelFt[b-ctco97hm21]        { color: #60a5fa; }
.teaserModelBlur[b-ctco97hm21]      { color: #9ca3af; }

/* Locked-view treatments. Purely cosmetic: the underlying text is already a
   server-side placeholder (bullet mask, no real names/logos/EV in the DOM),
   the blur just keeps the familiar "locked" look. Team mask blur is 4px;
   EV mask blur is 3px (smaller so the green color hints that a value exists). */
.teaserBannerRowBlurred .teaserEdgeBlur[b-ctco97hm21] {
    filter: blur(3px);
    color: #22c55e;
}
.teaserTeamsBlur[b-ctco97hm21] {
    filter: blur(4px);
    user-select: none;
}

.teaserArrow[b-ctco97hm21] {
    display: inline-block;
    transition: transform 0.15s ease;
}
a:hover .teaserArrow[b-ctco97hm21] { transform: translateX(3px); }

.lockIcon[b-ctco97hm21] {
    display: inline-flex;
    align-items: center;
    margin-right: 4px;
    opacity: 0.85;
}

/* ── Free-user proof + locked block ───────────────────────────────────
   The teaser flips from "blur everything" to "prove it, then upsell":
   one real settled WINNING pick (teaserProof*) shown in full with the
   model's track record, then today's LIVE picks kept masked + locked
   (teaserLocked*) behind the unlock overlay. */
.teaserProofLabel[b-ctco97hm21],
.teaserTodayLabel[b-ctco97hm21] {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7280;
    margin-bottom: 6px;
    position: relative;
    z-index: 1;
}
.teaserTodayLabel[b-ctco97hm21] { margin-top: 12px; }

.teaserProofRow[b-ctco97hm21] {
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-left: 3px solid #22d3ee;
    border-radius: 0 9px 9px 0;
    padding: 11px 13px;
    position: relative;
    z-index: 1;
}

.teaserProofTop[b-ctco97hm21] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.teaserProofMain[b-ctco97hm21] { min-width: 0; }

/* Matchup line: [logo] CHOSEN ✓  vs  [logo] OPPONENT — the picked side carries a
   green highlight chip + check so "which side we called" reads without any text. */
.teaserProofMatch[b-ctco97hm21] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.teaserProofSide[b-ctco97hm21] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border-radius: 7px;
    font-size: 0.88rem;
    font-weight: 800;
    color: #e5e7eb;
}
.teaserProofSideChosen[b-ctco97hm21] {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(74, 222, 128, 0.35);
    color: #d1fae5;
}
.teaserProofSideOpp[b-ctco97hm21] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: #9ca3af;
}
.teaserProofLogo[b-ctco97hm21] {
    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: 4px;
}
.teaserProofTeamNm[b-ctco97hm21] {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.teaserProofCheck[b-ctco97hm21] { color: #4ade80; flex-shrink: 0; }
.teaserProofVs[b-ctco97hm21] {
    font-size: 0.66rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
}
.teaserProofOdds[b-ctco97hm21] {
    padding: 3px 9px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e5e7eb;
    font-size: 0.78rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.teaserProofMeta[b-ctco97hm21] {
    font-size: 0.7rem;
    color: #9ca3af;
    margin-top: 6px;
}

.teaserProofRight[b-ctco97hm21] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    flex-shrink: 0;
}
.teaserProofWon[b-ctco97hm21] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.teaserProofStats[b-ctco97hm21] {
    display: flex;
    gap: 16px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 0.72rem;
    color: #9ca3af;
}
.teaserProofStats strong[b-ctco97hm21] {
    color: #e5e7eb;
    font-weight: 800;
    font-size: 0.82rem;
    margin-right: 2px;
}
.teaserProofRoi[b-ctco97hm21] { color: #4ade80 !important; }

.teaserLockedWrap[b-ctco97hm21] {
    position: relative;
    z-index: 1;
}
.teaserLockedRows[b-ctco97hm21] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    filter: blur(3.5px);
    user-select: none;
    pointer-events: none;
}
.teaserLockedRow[b-ctco97hm21] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 13px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 9px;
}
.teaserLockedTeams[b-ctco97hm21] {
    font-size: 0.84rem;
    font-weight: 700;
    color: #e5e7eb;
}
.teaserLockedEdge[b-ctco97hm21] {
    font-size: 0.95rem;
    font-weight: 800;
    color: #22c55e;
}
/* Premium-unlock affordance — same purple scheme as every other premium
   surface (hero Go Premium, model-row locks, /picks teaser CTA). */
.teaserLockedOverlay[b-ctco97hm21] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    background: rgba(30, 22, 54, 0.88);
    border: 1px solid rgba(139, 92, 246, 0.45);
    border-radius: 9px;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 700;
    color: #c4b5fd;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.teaserLockedOverlay:hover[b-ctco97hm21] {
    color: #fff;
    background: rgba(124, 58, 237, 0.55);
    border-color: rgba(167, 139, 250, 0.8);
}

/* Tablet/mobile: stack CTA below title, collapse list to 1 column. The
   3-col grid is too cramped below ~720px viewport — team names start
   colliding with the edge%. Single-column rows give them room to breathe. */
@media (max-width: 720px) {
    .teaserBanner[b-ctco97hm21] {
        padding: 12px 14px 14px;
    }
    .teaserBannerHead[b-ctco97hm21] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 10px;
    }
    .teaserBannerCta[b-ctco97hm21] {
        width: 100%;
        justify-content: center;
    }
    .teaserBannerList[b-ctco97hm21] {
        grid-template-columns: 1fr;
    }
    .teaserBannerRight[b-ctco97hm21] {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }
    .teaserBannerTeams[b-ctco97hm21] { font-size: 0.9rem; }
    .teaserBannerEdge[b-ctco97hm21] { font-size: 1rem; }

    .teaserProofStats[b-ctco97hm21] { gap: 12px; }
    .teaserLockedOverlay[b-ctco97hm21] {
        white-space: normal;
        text-align: center;
        max-width: 88%;
        line-height: 1.35;
    }
}
/* /Components/Shared/PickTrackerStrip.razor.rz.scp.css */
/* Inline pick-tracking strip rendered below the fair-odds table on upcoming/live cards.
   Reuses the visual idiom of the fair-odds block's collapsible header so the two strips
   stack visually as "row 1: market" → "row 2: tracker" without needing new metaphors.
   Currency-free framing (units suffix `u`, no `$`) and "Track this pick" wording keep
   the strip looking like a research notebook rather than a bet slip — same defense-in-
   depth reasoning as the Value Engine units swap. */

.pickStrip[b-izr8bmxfqb] {
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    transition: background 160ms ease, border-color 160ms ease;
}

.pickStrip:hover[b-izr8bmxfqb] {
    background: rgba(255, 255, 255, 0.05);
    border-color: color-mix(in srgb, var(--border) 60%, var(--text));
}

.pickStripExpanded[b-izr8bmxfqb] {
    background: rgba(96, 165, 250, 0.06);
    border-color: color-mix(in srgb, #60a5fa 35%, var(--border));
}

.pickStripSaved[b-izr8bmxfqb] {
    /* Bumped from 6% to 14% so the green reads as "saved/active" at a glance,
       not a barely-tinted neutral state. Border + label also pick up the
       accent so the whole strip clearly belongs to the "pick is on" group. */
    background: rgba(34, 197, 94, 0.14);
    border-color: color-mix(in srgb, #22c55e 55%, var(--border));
}
.pickStripSaved .pickStripLabel[b-izr8bmxfqb] {
    color: #22c55e;
}

.pickStripReadOnly[b-izr8bmxfqb] {
    background: rgba(148, 163, 184, 0.06);
    opacity: 0.85;
}

.pickStripHeader[b-izr8bmxfqb] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    cursor: pointer;
    user-select: none;
}

.pickStripReadOnly .pickStripHeader[b-izr8bmxfqb] {
    cursor: default;
}

.pickStripIcon[b-izr8bmxfqb] {
    display: inline-flex;
    align-items: center;
    color: var(--muted);
    flex-shrink: 0;
}

.pickStripSaved .pickStripIcon[b-izr8bmxfqb] { color: #22c55e; }
.pickStripExpanded .pickStripIcon[b-izr8bmxfqb] { color: #60a5fa; }

.pickStripLabel[b-izr8bmxfqb] {
    flex: 1;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.005em;
}

.pickStripChev[b-izr8bmxfqb] {
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    transition: transform 200ms ease;
}

.pickStripExpanded .pickStripChev[b-izr8bmxfqb] {
    transform: rotate(180deg);
    color: var(--text);
}

.pickStripBody[b-izr8bmxfqb] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 12px 12px 12px;
    animation: pickStripFadeIn-b-izr8bmxfqb 160ms ease;
}

.pickStripBodyAuth[b-izr8bmxfqb] {
    padding: 0 12px 14px 12px;
    align-items: stretch;
}

@keyframes pickStripFadeIn-b-izr8bmxfqb {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pickStripRow[b-izr8bmxfqb] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pickStripRowLabel[b-izr8bmxfqb] {
    font-size: 0.7rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    min-width: 50px;
}

/* Team toggle */
.pickStripTeams[b-izr8bmxfqb] {
    display: flex;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.pickStripTeamBtn[b-izr8bmxfqb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
    min-width: 0;
}

.pickStripTeamBtn:hover[b-izr8bmxfqb] {
    background: rgba(255, 255, 255, 0.07);
}

.pickStripTeamBtnActive[b-izr8bmxfqb] {
    background: rgba(96, 165, 250, 0.18);
    border-color: #60a5fa;
}

.pickStripTeamLogo[b-izr8bmxfqb] {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}

.pickStripTeamName[b-izr8bmxfqb] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pickStripTeamOdds[b-izr8bmxfqb] {
    color: var(--muted);
    font-weight: 700;
    font-size: 0.82rem;
    flex-shrink: 0;
}

.pickStripTeamBtnActive .pickStripTeamOdds[b-izr8bmxfqb] {
    color: var(--text);
}

/* Stake input */
.pickStripStakeWrap[b-izr8bmxfqb] {
    display: inline-flex;
    align-items: baseline;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 8px;
    transition: border-color 0.15s ease;
}

.pickStripStakeWrap:focus-within[b-izr8bmxfqb] {
    border-color: #60a5fa;
}

.pickStripStakeInput[b-izr8bmxfqb] {
    background: transparent;
    border: 0;
    color: var(--text);
    font-family: inherit;
    font-weight: 800;
    font-size: 0.9rem;
    width: 64px;
    padding: 0;
    text-align: left;
    -moz-appearance: textfield;
}

.pickStripStakeInput[b-izr8bmxfqb]::-webkit-outer-spin-button,
.pickStripStakeInput[b-izr8bmxfqb]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pickStripStakeInput:focus[b-izr8bmxfqb] { outline: none; }

.pickStripStakeUnit[b-izr8bmxfqb] {
    color: var(--mutedFaint);
    font-weight: 800;
    font-size: 0.8rem;
    margin-left: 4px;
}

.pickStripReturn[b-izr8bmxfqb] {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--muted);
}

.pickStripReturn strong[b-izr8bmxfqb] {
    color: #22c55e;
    margin-left: 4px;
    font-weight: 800;
}

/* Action buttons */
.pickStripActions[b-izr8bmxfqb] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}

.pickStripBtn[b-izr8bmxfqb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 0;
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
    transition: background 120ms ease, transform 120ms ease;
}

.pickStripBtn:disabled[b-izr8bmxfqb] {
    opacity: 0.6;
    cursor: not-allowed;
}

.pickStripBtnSave[b-izr8bmxfqb] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #052812;
}

.pickStripBtnSave:hover:not(:disabled)[b-izr8bmxfqb] {
    transform: translateY(-1px);
}

.pickStripBtnDelete[b-izr8bmxfqb] {
    background: rgba(248, 113, 113, 0.1);
    color: #fca5a5;
    border: 1px solid rgba(248, 113, 113, 0.3);
}

.pickStripBtnDelete:hover:not(:disabled)[b-izr8bmxfqb] {
    background: rgba(248, 113, 113, 0.18);
}

.pickStripBtnSignIn[b-izr8bmxfqb] {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    color: white;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 0.85rem;
}

.pickStripBtnSignIn:hover[b-izr8bmxfqb] {
    transform: translateY(-1px);
}

.pickStripSpinner[b-izr8bmxfqb] {
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: pickStripSpin-b-izr8bmxfqb 0.7s linear infinite;
}

@keyframes pickStripSpin-b-izr8bmxfqb {
    to { transform: rotate(360deg); }
}

.pickStripError[b-izr8bmxfqb] {
    font-size: 0.78rem;
    color: #fca5a5;
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.25);
    border-radius: 6px;
    padding: 6px 10px;
}

.pickStripDisclaimer[b-izr8bmxfqb] {
    font-size: 0.7rem;
    color: var(--mutedFaint);
    line-height: 1.4;
    padding-top: 4px;
    border-top: 1px dashed var(--border);
}

/* ── Bet-type toggle (Moneyline / Handicap) ──────────────────────────────
   Visually a slim two-button segmented control on the bet-type row. The
   active style intentionally borrows the same blue accent the team toggle
   uses (rgba(96,165,250,*) + border #60a5fa) so the user reads the two
   pickers as the same control class — left team / right team and then
   moneyline / handicap. */
.pickStripBetTypeToggle[b-izr8bmxfqb],
.pickStripHandicapToggle[b-izr8bmxfqb] {
    display: inline-flex;
    gap: 6px;
    flex: 0 0 auto;
}

.pickStripBetTypeBtn[b-izr8bmxfqb],
.pickStripHandicapBtn[b-izr8bmxfqb] {
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
    line-height: 1;
}

.pickStripBetTypeBtn:hover[b-izr8bmxfqb],
.pickStripHandicapBtn:hover[b-izr8bmxfqb] {
    background: rgba(255, 255, 255, 0.07);
}

.pickStripBetTypeBtnActive[b-izr8bmxfqb] {
    background: rgba(96, 165, 250, 0.18);
    border-color: #60a5fa;
}

/* Handicap line picker — colour-coded by sign for fast scanning:
   negative line (favourite) reads as a "sharper" red-amber tint,
   positive line (underdog) reads as a "safer" green tint. Both lean
   on the saved-state accents already used elsewhere in the strip so
   the palette stays consistent. */
.pickStripHandicapNeg.pickStripHandicapBtnActive[b-izr8bmxfqb] {
    background: rgba(239, 68, 68, 0.16);
    border-color: rgba(239, 68, 68, 0.7);
    color: #fca5a5;
}

.pickStripHandicapPos.pickStripHandicapBtnActive[b-izr8bmxfqb] {
    background: rgba(34, 197, 94, 0.14);
    border-color: rgba(34, 197, 94, 0.65);
    color: #86efac;
}

/* The handicap row sits between team + bet-type and stake; give it a touch
   less vertical breathing room than the others so a Bo3/Bo5 series doesn't
   stretch the strip noticeably taller than the moneyline-only Bo1 case. */
.pickStripRowBetType[b-izr8bmxfqb],
.pickStripRowHandicap[b-izr8bmxfqb] {
    margin-top: -2px;
}

/* ── Market selector dropdown ───────────────────────────────────────── */
.pickStripMarketSelect[b-izr8bmxfqb] {
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    flex: 0 0 auto;
    min-width: 150px;
}
.pickStripMarketSelect:focus[b-izr8bmxfqb] {
    outline: none;
    border-color: #60a5fa;
}
/* Native option list: the select's near-transparent background made non-selected
   options unreadable in the popup. Force a solid dark bg + light text. */
.pickStripMarketSelect option[b-izr8bmxfqb] {
    background: #1e293b;
    color: #e2e8f0;
}

/* Generic active state for the handicap magnitude toggle (1.5 / 2.5) — the
   signed +/- line picker keeps its colour-coded Neg/Pos variants above. */
.pickStripHandicapBtnActive[b-izr8bmxfqb] {
    background: rgba(96, 165, 250, 0.18);
    border-color: #60a5fa;
}
/* Small read-only tag echoing the resolved signed line next to the magnitude toggle. */
.pickStripHandicapLineTag[b-izr8bmxfqb] {
    align-self: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--muted);
    margin-left: 4px;
}

/* ── Total Maps controls (line buttons + Over/Under) ─────────────────── */
.pickStripTmControls[b-izr8bmxfqb] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    flex: 1;
}
.pickStripTmLines[b-izr8bmxfqb],
.pickStripTmSides[b-izr8bmxfqb] {
    display: inline-flex;
    gap: 6px;
}
.pickStripTmLineBtn[b-izr8bmxfqb],
.pickStripTmSideBtn[b-izr8bmxfqb] {
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    transition: background 120ms ease, border-color 120ms ease;
}
.pickStripTmLineBtn:hover[b-izr8bmxfqb],
.pickStripTmSideBtn:hover:not(:disabled)[b-izr8bmxfqb] {
    background: rgba(255, 255, 255, 0.07);
}
.pickStripTmLineBtnActive[b-izr8bmxfqb],
.pickStripTmSideBtnActive[b-izr8bmxfqb] {
    background: rgba(96, 165, 250, 0.18);
    border-color: #60a5fa;
}
.pickStripTmSideBtn:disabled[b-izr8bmxfqb] {
    opacity: 0.4;
    cursor: not-allowed;
}
.pickStripTmOdds[b-izr8bmxfqb] {
    margin-left: 6px;
    color: var(--muted);
    font-weight: 600;
}

/* ── Exact Score cell grid ──────────────────────────────────────────── */
.pickStripEsCells[b-izr8bmxfqb] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
}
.pickStripEsBtn[b-izr8bmxfqb] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.pickStripEsBtn:hover[b-izr8bmxfqb] {
    background: rgba(255, 255, 255, 0.07);
}
.pickStripEsBtnActive[b-izr8bmxfqb] {
    background: rgba(96, 165, 250, 0.18);
    border-color: #60a5fa;
}
.pickStripEsScore[b-izr8bmxfqb] {
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
}
.pickStripEsOdds[b-izr8bmxfqb] {
    font-size: 0.7rem;
    color: var(--muted);
    font-weight: 600;
    line-height: 1;
}

@media (max-width: 640px) {
    .pickStripRow[b-izr8bmxfqb] {
        gap: 8px;
    }
    .pickStripMarketSelect[b-izr8bmxfqb] {
        flex: 1;
        width: 100%;
    }
    .pickStripReturn[b-izr8bmxfqb] {
        margin-left: 0;
        width: 100%;
    }
    .pickStripTeams[b-izr8bmxfqb] {
        width: 100%;
    }
    .pickStripActions[b-izr8bmxfqb] {
        justify-content: stretch;
    }
    .pickStripBtn[b-izr8bmxfqb] {
        flex: 1;
    }
    /* On narrow screens, let each segmented control fill its row so the
       buttons stay finger-tappable instead of collapsing toward the label. */
    .pickStripBetTypeToggle[b-izr8bmxfqb],
    .pickStripHandicapToggle[b-izr8bmxfqb] {
        flex: 1;
    }
    .pickStripBetTypeBtn[b-izr8bmxfqb],
    .pickStripHandicapBtn[b-izr8bmxfqb] {
        flex: 1;
    }
}
/* /Components/Shared/PlayerDetailView.razor.rz.scp.css */
/* Self-contained styles for PlayerDetailView. Copied from Rankings.razor.css so the
   component is fully styled wherever it's hosted. Relies only on global CSS variables
   defined in app.css. */

.playerDetailView[b-evxgaj4i2u] {
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}

/* ── Player header ────────────────────────────────── */

.playerHeader[b-evxgaj4i2u] {
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--borderSoft);
    background: var(--panelSoft);
}

.playerHeaderInfo[b-evxgaj4i2u] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.playerDetailName[b-evxgaj4i2u] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -0.01em;
}

.playerHeaderMeta[b-evxgaj4i2u] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.playerHeaderTeam[b-evxgaj4i2u] {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
}

/* Highlighted Elo badge (header hero stat) — mirrors TeamDetailView */
.eloBadge[b-evxgaj4i2u] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(96,165,250,0.20), rgba(96,165,250,0.05));
    border: 1px solid var(--accent, #60a5fa);
    box-shadow: 0 2px 10px rgba(96,165,250,0.18);
}
.eloBadgeNum[b-evxgaj4i2u] {
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--accent, #60a5fa);
    font-variant-numeric: tabular-nums;
}
.eloBadgeUnit[b-evxgaj4i2u] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--accent, #60a5fa);
    opacity: 0.85;
}
.eloBadgeRank[b-evxgaj4i2u] {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text);
    background: rgba(96,165,250,0.20);
    padding: 0.1rem 0.42rem;
    border-radius: 999px;
    margin-left: 0.1rem;
}

.roleTag[b-evxgaj4i2u] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.roleTag-top[b-evxgaj4i2u] { background: rgba(239, 68, 68, 0.12); color: #f87171; }
.roleTag-jungle[b-evxgaj4i2u] { background: rgba(34, 197, 94, 0.12); color: #4ade80; }
.roleTag-mid[b-evxgaj4i2u] { background: rgba(99, 102, 241, 0.15); color: #818cf8; }
.roleTag-adc[b-evxgaj4i2u] { background: rgba(251, 191, 36, 0.12); color: #fbbf24; }
.roleTag-support[b-evxgaj4i2u] { background: rgba(56, 189, 248, 0.12); color: #38bdf8; }

/* ── Stats grid ───────────────────────────────────── */

.subsectionTitle[b-evxgaj4i2u] {
    margin: 0;
    padding: 14px 20px 8px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.statsGrid[b-evxgaj4i2u] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 2px;
    padding: 4px 16px 16px;
}

.statsGridSmall[b-evxgaj4i2u] {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
}

.statItem[b-evxgaj4i2u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 8px;
    border-left: 2px solid var(--hoverGlow);
}

.statItemLabel[b-evxgaj4i2u] {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    text-align: center;
}

.statItemValue[b-evxgaj4i2u] {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.diffPositive[b-evxgaj4i2u] { color: #16a34a; font-weight: 700; }
.diffNegative[b-evxgaj4i2u] { color: var(--red); font-weight: 700; }

/* ── Champion table ───────────────────────────────── */

.rankTableScroll[b-evxgaj4i2u] {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(37,99,235,0.2) transparent;
}

.rankTableScroll[b-evxgaj4i2u]::-webkit-scrollbar { width: 6px; height: 6px; }
.rankTableScroll[b-evxgaj4i2u]::-webkit-scrollbar-track { background: transparent; }
.rankTableScroll[b-evxgaj4i2u]::-webkit-scrollbar-thumb { background: rgba(37,99,235,0.2); border-radius: 3px; }
.rankTableScroll[b-evxgaj4i2u]::-webkit-scrollbar-thumb:hover { background: rgba(37,99,235,0.35); }

.rankTable[b-evxgaj4i2u] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.rankTable thead th[b-evxgaj4i2u] {
    background: var(--panelSoft);
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.rankTable thead th.thNum[b-evxgaj4i2u] { width: 70px; text-align: right; }

.rankTable tbody tr[b-evxgaj4i2u] {
    border-bottom: 1px solid var(--borderSoft);
    transition: background 0.1s ease;
}

.rankTable tbody tr:last-child[b-evxgaj4i2u] { border-bottom: none; }
.rankTable tbody tr:hover[b-evxgaj4i2u] { background: var(--panelSoft); }

.rankTable td[b-evxgaj4i2u] {
    padding: 10px 12px;
    color: var(--text);
}

.tdTeam[b-evxgaj4i2u] { font-weight: 700; }
.tdStat[b-evxgaj4i2u] { width: 70px; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; font-size: 0.8rem; }

.champTable[b-evxgaj4i2u] { table-layout: auto; min-width: 800px; }

.teamCell[b-evxgaj4i2u] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.champIcon[b-evxgaj4i2u] {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

.wrHigh[b-evxgaj4i2u] { color: #16a34a; font-weight: 700; }
.wrMid[b-evxgaj4i2u] { color: var(--text); font-weight: 600; }
.wrLow[b-evxgaj4i2u] { color: var(--red); font-weight: 600; }

/* ── Empty state ──────────────────────────────────── */

.emptyState[b-evxgaj4i2u] {
    padding: 40px 20px;
    text-align: center;
    color: var(--muted);
    font-size: 0.88rem;
    font-style: italic;
}
/* /Components/Shared/PredictionResultBlock.razor.rz.scp.css */
/* Results */
.result[b-665coccszh] { margin-top: 20px; border-radius: var(--radiusSm); border: 1px solid var(--border); background: var(--panel); padding: 20px; box-shadow: var(--shadowSoft); }
.result.winner-blue[b-665coccszh] { border-color: rgba(37,99,235,.45); box-shadow: 0 0 0 3px rgba(37,99,235,.10), var(--shadowSoft); }
.result.winner-red[b-665coccszh] { border-color: rgba(220,38,38,.45); box-shadow: 0 0 0 3px rgba(220,38,38,.10), var(--shadowSoft); }

.resultHeader[b-665coccszh] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.resultWinnerBadge[b-665coccszh] {
    font-weight: 900;
    font-size: 0.82rem;
    padding: 5px 14px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.resultWinnerBadge.badge-blue[b-665coccszh] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.1));
    color: var(--blueLight);
    border: 1px solid rgba(59, 130, 246, 0.3);
}
.resultWinnerBadge.badge-red[b-665coccszh] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.1));
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.resultConfBadge[b-665coccszh] {
    font-weight: 800;
    font-size: 0.68rem;
    padding: 4px 10px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.resultConfBadge.conf-high[b-665coccszh] {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.25);
}
.resultConfBadge.conf-med[b-665coccszh] {
    background: rgba(234, 179, 8, 0.12);
    color: #fbbf24;
    border: 1px solid rgba(234, 179, 8, 0.25);
}
.resultConfBadge.conf-low[b-665coccszh] {
    background: var(--borderSoft);
    color: var(--muted);
    border: 1px solid var(--borderSoft);
}

.bars[b-665coccszh] { display: grid; gap: 10px; }
.barRow[b-665coccszh] { display: grid; grid-template-columns: 1.5fr 3fr 80px; gap: 10px; align-items: center; }
.teamName[b-665coccszh] { font-weight: 900; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barWrap[b-665coccszh] { height: 12px; background: var(--borderSoft); border-radius: 999px; overflow: hidden; }
.blueRow .bar[b-665coccszh] { height: 100%; background: linear-gradient(90deg, var(--blue), var(--blueLight)); border-radius: 999px; }
.redRow .bar[b-665coccszh] { height: 100%; background: linear-gradient(90deg, var(--red), #f87171); border-radius: 999px; }
.pct[b-665coccszh] { text-align: right; font-weight: 950; color: var(--text); font-variant-numeric: tabular-nums; }

.resultFooter[b-665coccszh] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--borderSoft);
}

.resultOddsChip[b-665coccszh] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: var(--panelSoft);
    border: 1px solid var(--borderSoft);
    border-radius: 8px;
}

.resultStatChip[b-665coccszh] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: var(--panelSoft);
    border: 1px solid var(--borderSoft);
    border-radius: 8px;
}

.rdLabel[b-665coccszh] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    white-space: nowrap;
}

.rdValue[b-665coccszh] {
    font-size: 0.95rem;
    font-weight: 900;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.oddsSep[b-665coccszh] { color: var(--muted); font-weight: 400; margin: 0 1px; }
.rdBlue[b-665coccszh] { color: var(--blue); }
.rdRed[b-665coccszh] { color: var(--red); }

/* Analysis Tabs */
.analysisTabs[b-665coccszh] {
    display: flex;
    gap: 0;
    margin-top: 18px;
    border-bottom: 2px solid var(--borderSoft);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Wrapper context so the mobile fade affordance can pin to the right edge. */
    position: relative;
}
.analysisTabs[b-665coccszh]::-webkit-scrollbar { display: none; }

.analysisTab[b-665coccszh] {
    padding: 10px 18px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.analysisTab:hover[b-665coccszh] { color: var(--text); }
.analysisTab.active[b-665coccszh] {
    color: var(--text);
    border-bottom-color: var(--blue);
}

.analysisTabLive[b-665coccszh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.analysisTabLive.active[b-665coccszh] {
    border-bottom-color: #22c55e;
}

.tabLiveTag[b-665coccszh] {
    font-size: 0.55rem;
    font-weight: 900;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.2;
    animation: tabLiveShimmer-b-665coccszh 2s ease-in-out infinite;
}

@keyframes tabLiveShimmer-b-665coccszh {
    0%, 100% { opacity: 1; background: rgba(34, 197, 94, 0.15); }
    50% { opacity: 0.7; background: rgba(34, 197, 94, 0.3); }
}

.analysisContent[b-665coccszh] {
    margin-top: 6px;
}

@media (max-width: 600px) {
    /* Wrap the tab row instead of horizontal-scrolling — the strip is narrow on phones
       and "MATCH HISTORY" / "RECENT FORM" don't fit one line, so the last tabs were
       hidden behind a sideways scroll. Wrapping + tighter padding keeps all four visible. */
    .analysisTabs[b-665coccszh] { flex-wrap: wrap; overflow-x: visible; column-gap: 2px; row-gap: 0; }
    .analysisTab[b-665coccszh] { padding: 8px 10px; font-size: 0.7rem; letter-spacing: 0.02em; }
}

/* H2H & Streak Section */
.formSection[b-665coccszh] { margin-top: 20px; padding: 16px; background: linear-gradient(135deg, rgba(37,99,235,.04), rgba(220,38,38,.04)); border: 1px solid var(--borderSoft); border-radius: var(--radiusSm); }
.formSectionTitle[b-665coccszh] { font-weight: 900; color: var(--text); font-size: 1.05rem; margin-bottom: 8px; }

.h2hGrid[b-665coccszh] { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; }
@media (max-width: 600px) { .h2hGrid[b-665coccszh] { grid-template-columns: 1fr; } .h2hVs[b-665coccszh] { text-align: center; } }

.h2hCard[b-665coccszh] { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radiusSm); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.h2hCard.blue-accent[b-665coccszh] { border-top: 3px solid var(--blue); }
.h2hCard.red-accent[b-665coccszh] { border-top: 3px solid var(--red); }
.h2hTeamName[b-665coccszh] { font-weight: 900; font-size: 1rem; color: var(--text); text-align: center; }
.h2hVs[b-665coccszh] { display: flex; align-items: center; justify-content: center; font-weight: 950; color: var(--muted); font-size: 1.1rem; letter-spacing: 0.1em; }

.streakRow[b-665coccszh] { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--borderSoft); }
.streakRow:last-child[b-665coccszh] { border-bottom: none; }
.streakLabel[b-665coccszh] { color: var(--muted); font-size: 0.9rem; font-weight: 600; }
.streakValue[b-665coccszh] { font-weight: 800; font-size: 0.95rem; color: var(--text); }
.streak-win[b-665coccszh] { color: #16a34a; }
.streak-lose[b-665coccszh] { color: #dc2626; }
.streak-neutral[b-665coccszh] { color: var(--muted); }
.elo-value[b-665coccszh] { color: #7c3aed; font-variant-numeric: tabular-nums; }
/* Tournament / Overall record W/L coloring */
.recordValue[b-665coccszh] { font-variant-numeric: tabular-nums; }
.record-win[b-665coccszh] { color: #16a34a; }
.record-loss[b-665coccszh] { color: #dc2626; }
.record-sep[b-665coccszh] { color: var(--muted); font-weight: 600; }
.record-pct[b-665coccszh] { color: var(--muted); font-weight: 600; }
/* Smaller, muted "(games)" suffix shown after the series record */
.record-games[b-665coccszh] { color: var(--muted); font-size: 0.8em; font-weight: 600; margin-left: 4px; }

/* Detail blocks */
.detailBlock[b-665coccszh] { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--borderSoft); }
.detailTitle[b-665coccszh] { font-weight: 950; margin-bottom: 10px; color: var(--text); }

/* Enhanced badge (meta-learner impact) */
.enhancedBadge[b-665coccszh] { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; font-size: 0.78rem; font-weight: 700; border: 1px solid var(--borderSoft); background: var(--panelDeep); cursor: help; }
.enhancedBadge .enhancedLabel[b-665coccszh] { color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; font-size: 0.7rem; }
.enhancedBadge .enhancedDelta[b-665coccszh] { font-variant-numeric: tabular-nums; font-size: 0.85rem; }
.enhancedBadge.enhanced-blue[b-665coccszh] { border-color: rgba(37,99,235,.35); background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(37,99,235,.04)); }
.enhancedBadge.enhanced-blue .enhancedDelta[b-665coccszh] { color: rgba(37,99,235,1); }
.enhancedBadge.enhanced-red[b-665coccszh] { border-color: rgba(220,38,38,.35); background: linear-gradient(135deg, rgba(220,38,38,.10), rgba(220,38,38,.04)); }
.enhancedBadge.enhanced-red .enhancedDelta[b-665coccszh] { color: rgba(220,38,38,1); }

/* Prediction Drivers */
.driverBlock[b-665coccszh] { background: var(--panel); border: 1px solid var(--borderSoft); padding: 16px; border-radius: var(--radiusSm); }
.driverList[b-665coccszh] { display: flex; flex-direction: column; gap: 6px; }
.driverRow[b-665coccszh] { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--borderSoft); background: var(--panelDeep); transition: background 0.15s; }
.driverRow.blue[b-665coccszh] { border-left: 3px solid rgba(37,99,235,.6); }
.driverRow.red[b-665coccszh] { border-left: 3px solid rgba(220,38,38,.6); }
.driverRank[b-665coccszh] { font-size: 0.8rem; font-weight: 800; color: var(--muted); min-width: 18px; text-align: center; opacity: 0.6; }
.driverInfo[b-665coccszh] { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.driverName[b-665coccszh] { font-size: 0.9rem; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 6px; min-width: 0; }
.driverName .driverNameText[b-665coccszh] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.driverHelp[b-665coccszh] { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: var(--borderSoft); color: var(--muted); font-size: 0.65rem; font-weight: 800; cursor: help; flex-shrink: 0; line-height: 1; transition: background 0.15s, color 0.15s; }
.driverHelp:hover[b-665coccszh] { background: rgba(124,58,237,.25); color: var(--text); }
.driverAdvantage[b-665coccszh] { font-size: 0.78rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.driverAdvantageDiverges[b-665coccszh] { cursor: help; }
.driverAdvantageLeader[b-665coccszh] { opacity: 0.75; font-weight: 700; }
.driverBar[b-665coccszh] { height: 4px; background: var(--borderSoft); border-radius: 2px; overflow: hidden; margin-top: 2px; }
.driverBarFill[b-665coccszh] { height: 100%; border-radius: 2px; transition: width 0.4s ease; }
.driverBarFill.blue[b-665coccszh] { background: linear-gradient(90deg, rgba(37,99,235,.7), rgba(37,99,235,.4)); }
.driverBarFill.red[b-665coccszh] { background: linear-gradient(90deg, rgba(220,38,38,.7), rgba(220,38,38,.4)); }
/* "Fade" rows: a stat the model is betting AGAINST. Amber, with a striped texture so it
   reads as "discounted" rather than a clean push toward either team. */
.driverBarFill.fade[b-665coccszh] {
    background: repeating-linear-gradient(45deg, rgba(245,158,11,.55), rgba(245,158,11,.55) 4px, rgba(245,158,11,.28) 4px, rgba(245,158,11,.28) 8px);
}
.driverMeta[b-665coccszh] { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 80px; }
.driverImpactLabel[b-665coccszh] { font-size: 0.65rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; }
.driverImpact[b-665coccszh] { font-size: 0.95rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.driverTeam[b-665coccszh] { font-size: 0.75rem; font-weight: 600; padding: 1px 6px; border-radius: 3px; white-space: nowrap; }
.driverTeam.blue[b-665coccszh] { color: rgba(37,99,235,1); background: rgba(37,99,235,.1); }
.driverTeam.red[b-665coccszh] { color: rgba(220,38,38,1); background: rgba(220,38,38,.1); }
.driverTeam.driverTeamFade[b-665coccszh] { color: rgba(245,158,11,1); background: rgba(245,158,11,.12); cursor: help; }

/* Contrarian "fade the favorite" banner — shown when the model's pick is supported mostly
   by fading the opponent's stat edges. Amber, matches the fade rows below it. */
.driverContrarianBanner[b-665coccszh] {
    border: 1px solid rgba(245,158,11,.35);
    background: rgba(245,158,11,.07);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
}
.driverContrarianHeader[b-665coccszh] {
    display: flex; align-items: center; gap: 7px;
    font-size: 0.82rem; font-weight: 700; color: rgba(245,158,11,1);
    margin-bottom: 5px;
}
.driverContrarianText[b-665coccszh] { font-size: 0.78rem; line-height: 1.45; color: var(--muted); }
.driverContrarianText strong[b-665coccszh] { color: var(--text); font-weight: 700; }
.driverHint[b-665coccszh] { font-size: 0.78rem; color: var(--muted); margin-bottom: 8px; font-style: italic; }

/* Click-to-expand affordance for rows that have SubFeatures — features collapsed into
   this row by the (displayName, favorsTeam) dedup. Chevron rotates 180° when expanded. */
.driverExpandToggle[b-665coccszh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, transform 0.2s ease;
    flex-shrink: 0;
}
.driverExpandToggle:hover[b-665coccszh] { background: var(--borderSoft); color: var(--text); }
.driverExpandToggle.expanded[b-665coccszh] { transform: rotate(180deg); color: var(--text); }
.driverExpandToggle svg[b-665coccszh] { display: block; }

/* Sub-feature breakdown shown when the parent row is expanded. Rows are compact,
   muted, and hanging from the parent visually via a left rule. */
.driverSubList[b-665coccszh] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
    padding: 8px 10px;
    border-left: 2px solid var(--borderSoft);
    background: rgba(255,255,255,0.02);
    border-radius: 0 4px 4px 0;
}
.driverSubRow[b-665coccszh] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.driverSubName[b-665coccszh] {
    flex: 1;
    min-width: 0;
    /* Sub-feature labels can contain a team-name suffix (e.g. "Elo Rating (Hanwha
       Life Esports)") that easily exceeds the row's flex width. Allow wrapping
       rather than truncating with ellipsis — a truncated "Vision Score (..."
       leaves the user unable to tell which variant this is, defeating the point
       of the disambiguation. Narrow viewports will show the label on two lines
       which is acceptable for a sub-row. */
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.3;
}
.driverSubAdvantage[b-665coccszh] { color: var(--mutedFaint); font-weight: 500; }
.driverSubImpact[b-665coccszh] { color: var(--text); font-weight: 700; min-width: 42px; text-align: right; }

/* Model tabs inside the driver block */
.driverTabs[b-665coccszh] { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.driverTab[b-665coccszh] { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--borderSoft); background: var(--panelDeep); color: var(--muted); font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: all 0.15s; }
.driverTab:hover[b-665coccszh] { background: var(--panel); color: var(--text); }
.driverTab.active[b-665coccszh] { background: linear-gradient(135deg, rgba(124,58,237,0.18), rgba(124,58,237,0.06)); border-color: rgba(124,58,237,0.45); color: var(--text); }
.driverTab.premiumLocked[b-665coccszh] { opacity: 0.78; }
.driverTab.premiumLocked:hover[b-665coccszh] { opacity: 1; }
.driverTab .premiumLockIcon[b-665coccszh] { color: rgba(245,158,11,0.85); flex-shrink: 0; }
.driverTab .enhancedBadge[b-665coccszh] { margin-left: 0; padding: 2px 6px; }
.driverTab .enhancedBadge .enhancedDelta[b-665coccszh] { font-size: 0.72rem; }

/* Locked state when a free user clicks a Premium model tab */
.driverLockedNotice[b-665coccszh] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 36px 20px; text-align: center; color: var(--muted); border: 1px dashed var(--borderSoft); border-radius: 8px; background: var(--panelDeep); font-size: 0.9rem; font-weight: 600; }

/* Sub-tabs inside a model-drivers panel: "Most impactful" + one per team.
   Visually distinct from the outer model tabs (flatter, slightly smaller, no purple
   gradient accent) so the hierarchy reads model > scope.                              */
.driverSubTabs[b-665coccszh] {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
    padding: 4px;
    background: var(--panelDeep);
    border: 1px solid var(--borderSoft);
    border-radius: 8px;
    flex-wrap: wrap;
}
.driverSubTab[b-665coccszh] {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.driverSubTab:hover[b-665coccszh] { background: var(--panel); color: var(--text); }
.driverSubTab.active[b-665coccszh] { background: var(--panel); color: var(--text); border-color: var(--borderSoft); }
.driverSubTab.driverSubTabBlue.active[b-665coccszh] {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.42);
    color: #93c5fd;
}
.driverSubTab.driverSubTabRed.active[b-665coccszh] {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.42);
    color: #fca5a5;
}

/* "Hide low impact drivers" toggle. Sits below the sub-tabs, before the list. */
.driverHideLowImpact[b-665coccszh] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    margin-bottom: 12px;
    border-radius: 6px;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
}
.driverHideLowImpact:hover[b-665coccszh] { color: var(--text); }
.driverHideLowImpact input[type="checkbox"][b-665coccszh] {
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
    accent-color: rgb(124, 58, 237);
}

/* Spinner shown while the lazy LightGBM/PCA driver fetch is in flight.
   Rendered alone (no caption, no text) so the panel doesn't double-flash
   from "loading text → empty state → drivers" as the fetch completes.
   The ring matches the .pageLoaderRing style at a smaller scale so it
   fits inside the drivers panel without dominating it. */
.driverLoading[b-665coccszh] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 56px;
    padding: 14px 16px 4px;
}
.driverLoadingSpinner[b-665coccszh] {
    position: relative;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 3px solid rgba(99, 102, 241, 0.15);
    border-top-color: #6366f1;
    animation: loaderSpin 0.8s linear infinite;
    flex-shrink: 0;
}
/* Caption sits next to the spinner so the loading state has a clear text label —
   "Loading LightGBM drivers…" reads better than a bare spinner that's easy to miss
   when the user expects new content to appear in-place. */
.driverLoadingLabel[b-665coccszh] {
    font-size: 0.78rem;
    color: var(--muted, #9ca3af);
    letter-spacing: 0.02em;
}
/* Placeholder rows under the spinner so the area visually fills the same vertical
   slot the rendered drivers list will occupy, instead of collapsing to spinner-only
   and snapping back. Three light bars (number circle, feature label, impact bar)
   mirror the .driverImpactRow layout closely enough to look like a real loading
   state instead of an empty panel. */
.driverSkeleton[b-665coccszh] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px 16px 18px;
}
.driverSkeletonRow[b-665coccszh] {
    display: grid;
    grid-template-columns: 28px minmax(120px, 1fr) minmax(90px, 220px);
    gap: 12px;
    align-items: center;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    padding: 0 12px;
}
.driverSkeletonNum[b-665coccszh],
.driverSkeletonLabel[b-665coccszh],
.driverSkeletonBar[b-665coccszh] {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.10) 50%,
        rgba(255, 255, 255, 0.04) 100%);
    background-size: 200% 100%;
    animation: driverSkeletonShimmer-b-665coccszh 1.4s ease-in-out infinite;
}
.driverSkeletonNum[b-665coccszh] { width: 16px; }
.driverSkeletonLabel[b-665coccszh] { width: 70%; }
.driverSkeletonBar[b-665coccszh] { height: 14px; }
@keyframes driverSkeletonShimmer-b-665coccszh {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* Hide-but-keep-accessible for the spinner's screen-reader-only "Loading…" caption.
   Avoids a visual label while keeping the role="status" live region useful. */
.visuallyHidden[b-665coccszh] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap;
}

/* Empty state when a sub-tab / filter combination yields no rows,
   or when the active model's drivers couldn't be computed at all. */
.driverEmptyState[b-665coccszh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 16px;
    color: var(--muted);
    font-size: 0.85rem;
    font-style: italic;
    border: 1px dashed var(--borderSoft);
    border-radius: 8px;
    background: var(--panelDeep);
    text-align: center;
}
/* Secondary line inside the empty state — explains where the underdog's
   non-zero win probability comes from when every probed feature favors
   the opponent. Smaller + more muted to sit visually below the main line. */
.driverEmptyStateSubtle[b-665coccszh] {
    font-size: 0.78rem;
    color: var(--mutedFaint);
    font-style: normal;
    max-width: 540px;
    line-height: 1.4;
}

/* Fallback probability line under "drivers not computed" — shows that the
   model still has a prediction (from the daily pipeline cache) even though
   the live LOO step couldn't produce contributions. */
.driverFallbackPrediction[b-665coccszh] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.92rem;
    font-style: normal;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.driverFallbackSep[b-665coccszh] {
    color: var(--mutedFaint);
    font-weight: 400;
}

/* Meta-learner delta callout. Sits above the sub-tabs to explain a gap between
   the drivers list (base-model attributions) and the headline probability
   (stacked prediction). Styled similarly to the top-level Enhanced badge but
   as a full-width info row so the text has room for explanation. */
.driverMetaCallout[b-665coccszh] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 14px;
    margin-bottom: 12px;
    border-radius: 8px;
    border: 1px solid var(--borderSoft);
    background: var(--panelDeep);
}
.driverMetaCalloutHeader[b-665coccszh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.driverMetaCalloutLabel[b-665coccszh] {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
}
.driverMetaCalloutValue[b-665coccszh] {
    font-size: 0.88rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.driverMetaCalloutNote[b-665coccszh] {
    font-size: 0.78rem;
    color: var(--mutedFaint);
    font-style: italic;
}
.driverMetaCallout-blue[b-665coccszh] {
    border-color: rgba(37,99,235,.35);
    background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(37,99,235,.04));
}
.driverMetaCalloutValue-blue[b-665coccszh] { color: rgba(96,165,250,1); }
.driverMetaCallout-red[b-665coccszh] {
    border-color: rgba(220,38,38,.35);
    background: linear-gradient(135deg, rgba(220,38,38,.10), rgba(220,38,38,.04));
}
.driverMetaCalloutValue-red[b-665coccszh] { color: rgba(248,113,113,1); }

/* Recent Form */
.recentFormSection[b-665coccszh] {
    background: linear-gradient(135deg, rgba(16,185,129,.05) 0%, rgba(124,58,237,.05) 50%, rgba(245,158,11,.05) 100%);
    border: 1px solid rgba(16,185,129,.18);
    padding: 18px;
    border-radius: var(--radiusSm);
    position: relative;
    overflow: hidden;
}
.recentFormSection[b-665coccszh]::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, #10b981, #7c3aed, #f59e0b);
    opacity: 0.6;
}

/* Header row */
.formHeaderRow[b-665coccszh] {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    margin-bottom: 14px;
    padding: 0 10px;
    gap: 10px;
}
.formTeamName[b-665coccszh] {
    font-weight: 900;
    font-size: 0.95rem;
}
.formTeamBlue[b-665coccszh] { color: var(--blue); }
.formTeamRed[b-665coccszh]  { color: var(--red); text-align: right; }
.formHeaderCenter[b-665coccszh] {
    justify-self: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: #10b981;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 10px;
    border: 1px solid rgba(16,185,129,.25);
    border-radius: 4px;
    background: rgba(16,185,129,.08);
}

/* Stat rows */
.formRows[b-665coccszh] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.formRow[b-665coccszh] {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--panel);
    border: 1px solid var(--borderSoft);
    border-radius: 8px;
    transition: background 0.15s;
}
.formRow:hover[b-665coccszh] { background: rgba(255,255,255,.03); }

/* Overall form summary row */
.formOverallRow[b-665coccszh] {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: var(--panel);
    border: none;
    border-left: 3px solid var(--muted);
    border-radius: 0;
}
.formOverallRow.formOverallBlue[b-665coccszh] { border-left-color: var(--blue); background: linear-gradient(90deg, rgba(37,99,235,.08), var(--panel) 60%); }
.formOverallRow.formOverallRed[b-665coccszh]  { border-left-color: var(--red); background: linear-gradient(90deg, rgba(220,38,38,.08), var(--panel) 60%); }
.formOverallRow.formOverallEven[b-665coccszh] { border-left-color: var(--muted); }

/* Highlighted win rate row */
.formRowHighlight[b-665coccszh] {
    background: linear-gradient(135deg, rgba(37,99,235,.06), rgba(220,38,38,.06)) !important;
    border: 1px solid rgba(124,58,237,.2) !important;
    position: relative;
}
.formRowHighlight[b-665coccszh]::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--blue), var(--red));
    border-radius: 8px 8px 0 0;
    opacity: 0.4;
}

.formOverallSide[b-665coccszh] {
    display: flex;
    align-items: center;
}
.formOverallLeft[b-665coccszh]  { justify-content: flex-start; }
.formOverallRight[b-665coccszh] { justify-content: flex-end; }

.formOverallScore[b-665coccszh] {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.formOverallWinner[b-665coccszh] {
    font-weight: 900;
    font-size: 1.2rem;
}
.formOverallLeft .formOverallWinner[b-665coccszh]  { color: var(--blue); }
.formOverallRight .formOverallWinner[b-665coccszh] { color: var(--red); }

.formOverallCenter[b-665coccszh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.formOverallLabel[b-665coccszh] {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.formBarTrackLarge[b-665coccszh] {
    height: 10px;
    border-radius: 5px;
}

/* Values on each side */
.formVal[b-665coccszh] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-variant-numeric: tabular-nums;
}
.formValBlue[b-665coccszh] { justify-content: flex-start; }
.formValRed[b-665coccszh]  { justify-content: flex-end; }

.formValStack[b-665coccszh] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.formValStackRight[b-665coccszh] { align-items: flex-end; }

.formValNum[b-665coccszh] {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text);
    line-height: 1.2;
}
.formValSub[b-665coccszh] {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--muted);
    line-height: 1.1;
}

.formValBold[b-665coccszh] {
    font-weight: 900;
    font-size: 0.98rem;
}
.formValBlue .formValBold[b-665coccszh] { color: var(--blue); }
.formValRed  .formValBold[b-665coccszh] { color: var(--red); }

.formTrend[b-665coccszh] {
    display: flex;
    align-items: center;
}
.trendArrow[b-665coccszh] {
    font-size: 0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
}
.trend-up .trendArrow[b-665coccszh]  { background: rgba(16,185,129,.15); }
.trend-down .trendArrow[b-665coccszh] { background: rgba(239,68,68,.15); }
.trend-up[b-665coccszh]  { color: #10b981; }
.trend-down[b-665coccszh] { color: #ef4444; }
.trend-flat[b-665coccszh] { color: var(--muted); }

/* Center column: label + bar */
.formCenter[b-665coccszh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.formStatName[b-665coccszh] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Comparison bar */
.formBarTrack[b-665coccszh] {
    display: flex;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(255,255,255,.05);
}
.formBarBlue[b-665coccszh] {
    height: 100%;
    background: linear-gradient(90deg, rgba(37,99,235,.7), rgba(37,99,235,.4));
    border-radius: 3px 0 0 3px;
    transition: width 0.4s ease;
}
.formBarRed[b-665coccszh] {
    height: 100%;
    background: linear-gradient(90deg, rgba(220,38,38,.4), rgba(220,38,38,.7));
    border-radius: 0 3px 3px 0;
    transition: width 0.4s ease;
}

/* Legend */
.formLegend[b-665coccszh] {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--borderSoft);
    font-size: 0.72rem;
    font-weight: 600;
}
.formLegend span[b-665coccszh] {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Mobile */
@media (max-width: 600px) {
    .formRow[b-665coccszh] { grid-template-columns: 1fr 1.5fr 1fr; gap: 6px; padding: 6px 8px; }
    .formStatName[b-665coccszh] { font-size: 0.6rem; }
    .formValNum[b-665coccszh] { font-size: 0.82rem; }
    .formTeamName[b-665coccszh] { font-size: 0.82rem; }
}

/* Game Phase — Container */
.gpContainer[b-665coccszh] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.gpTeamHeader[b-665coccszh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 6px;
}
.gpTeamName[b-665coccszh] { font-weight: 900; font-size: 0.95rem; }
.gpTeamBlue[b-665coccszh] { color: var(--blue); }
.gpTeamRed[b-665coccszh]  { color: var(--red); text-align: right; }

/* Game Phase — Card */
.gpCard[b-665coccszh] {
    background: var(--panel);
    border: 1px solid var(--borderSoft);
    border-radius: 12px;
    padding: 16px;
    position: relative;
    overflow: hidden;
}
.gpCard[b-665coccszh]::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    opacity: 0.5;
}
.gpAccentEarly[b-665coccszh]::before { background: linear-gradient(90deg, #f59e0b, #ef4444); }
.gpAccentObj[b-665coccszh]::before   { background: linear-gradient(90deg, #8b5cf6, #ec4899); }
.gpAccentVis[b-665coccszh]::before   { background: linear-gradient(90deg, #06b6d4, #10b981); }
.gpAccentFight[b-665coccszh]::before { background: linear-gradient(90deg, #ef4444, #f97316); }

.gpCardTitle[b-665coccszh] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
}
/* Game Phase — Stat Row */
.gpStatRow[b-665coccszh] {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    border-bottom: 1px solid rgba(255,255,255,.03);
}
.gpStatRow:last-of-type[b-665coccszh] { border-bottom: none; }

.gpVal[b-665coccszh] {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.gpValBlue[b-665coccszh] { text-align: left; }
.gpValRed[b-665coccszh]  { text-align: right; }
.gpValWinner[b-665coccszh] { font-weight: 900; }
.gpValBlue.gpValWinner[b-665coccszh] { color: var(--blue); }
.gpValRed.gpValWinner[b-665coccszh]  { color: var(--red); }

.gpBarCenter[b-665coccszh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.gpBarLabel[b-665coccszh] {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.gpBarTrack[b-665coccszh] {
    display: flex;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(255,255,255,.05);
}
.gpBarFillBlue[b-665coccszh] {
    height: 100%;
    background: linear-gradient(90deg, rgba(37,99,235,.7), rgba(37,99,235,.4));
    border-radius: 3px 0 0 3px;
    transition: width 0.4s ease;
}
.gpBarFillRed[b-665coccszh] {
    height: 100%;
    background: linear-gradient(90deg, rgba(220,38,38,.4), rgba(220,38,38,.7));
    border-radius: 0 3px 3px 0;
    transition: width 0.4s ease;
}

/* Game Phase — Verdict badge */
.gpVerdict[b-665coccszh] {
    margin-top: 10px;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.gpVerdict-blue[b-665coccszh] {
    background: rgba(37,99,235,.1);
    color: var(--blue);
    border: 1px solid rgba(37,99,235,.2);
}
.gpVerdict-red[b-665coccszh] {
    background: rgba(220,38,38,.1);
    color: var(--red);
    border: 1px solid rgba(220,38,38,.2);
}
.gpVerdict-even[b-665coccszh] {
    background: var(--borderSoft);
    color: var(--muted);
    border: 1px solid var(--borderSoft);
}

/* Game Phase — Playstyle Traits */
.gpTraitsSection[b-665coccszh] {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.gpTraitRow[b-665coccszh] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.gpTraitSide[b-665coccszh] {
    font-weight: 800;
    font-size: 0.8rem;
    min-width: 80px;
}
.gpTraitSide.blue-side[b-665coccszh] { color: var(--blue); }
.gpTraitSide.red-side[b-665coccszh]  { color: var(--red); }
.gpTraitBadge[b-665coccszh] {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.gpTraitBadge.blue-trait[b-665coccszh] {
    background: rgba(59,130,246,.1);
    color: var(--blue);
    border: 1px solid rgba(59,130,246,.25);
}
.gpTraitBadge.red-trait[b-665coccszh] {
    background: rgba(239,68,68,.1);
    color: var(--red);
    border: 1px solid rgba(239,68,68,.25);
}

@media (max-width: 600px) {
    .gpStatRow[b-665coccszh] { grid-template-columns: 1fr 1.5fr 1fr; gap: 4px; }
    .gpBarLabel[b-665coccszh] { font-size: 0.6rem; }
    .gpVal[b-665coccszh] { font-size: 0.78rem; }
}

/* H2H Warning */
.h2hWarning[b-665coccszh] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 8px;
    color: #fbbf24;
    font-size: 0.82rem;
    font-weight: 600;
    margin-top: 12px;
}
.h2hWarning svg[b-665coccszh] {
    flex-shrink: 0;
    stroke: #f59e0b;
}

/* Match History Section */
.matchHistorySection[b-665coccszh] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.matchHistoryList[b-665coccszh] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 400px;
    overflow-y: auto;
}

.matchHistoryRow[b-665coccszh] {
    display: grid;
    grid-template-columns: 1.5fr 70px 60px 90px auto;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--panelSoft);
    border: 1px solid var(--borderSoft);
    border-left: 3px solid transparent;
    font-size: 0.85rem;
    color: var(--text);
    transition: background 0.15s ease;
}

.matchHistoryRow.mhBlueWin[b-665coccszh] {
    border-left-color: var(--blue);
    background: linear-gradient(90deg, rgba(59,130,246,0.06) 0%, var(--panelSoft) 40%);
}

.matchHistoryRow.mhRedWin[b-665coccszh] {
    border-left-color: var(--red);
    background: linear-gradient(90deg, rgba(239,68,68,0.05) 0%, var(--panelSoft) 40%);
}

.matchHistoryRow:hover[b-665coccszh] { background: rgba(59, 130, 246, 0.06); }

.mhClickable[b-665coccszh] {
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
}

.mhClickable:hover[b-665coccszh] {
    background: rgba(59, 130, 246, 0.10) !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.12);
    transform: translateX(2px);
}

/* Mobile match history handled in the 768px block below */

.mhTeams[b-665coccszh] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mhVs[b-665coccszh] {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 600;
}

.mhTeamName[b-665coccszh] {
    font-weight: 600;
    color: var(--muted);
}

.mhTeamName.mhWinner[b-665coccszh] {
    font-weight: 800;
    color: var(--text);
}

.mhTeamName.mhLoser[b-665coccszh] {
    opacity: 0.55;
}

.mhScore[b-665coccszh] {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: center;
    font-size: 0.9rem;
}
.mhScore .scoreWin[b-665coccszh] { color: var(--text); font-weight: 900; }
.mhScore .scoreLose[b-665coccszh] { color: var(--muted); font-weight: 600; }
.mhScore .scoreSep[b-665coccszh] { color: var(--muted); margin: 0 2px; }

.mhDuration[b-665coccszh] {
    color: var(--muted);
    font-size: 0.78rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.mhDate[b-665coccszh] {
    color: var(--muted);
    font-size: 0.8rem;
    text-align: center;
}

.mhMvp[b-665coccszh] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mhMvpBadge[b-665coccszh] {
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 5px;
    border-radius: 3px;
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.3);
    flex-shrink: 0;
    line-height: 1;
}
.mhMvpChamp[b-665coccszh] {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--mutedFaint);
}
.mhMvp.blue-mvp[b-665coccszh] {
    background: rgba(59, 130, 246, 0.10);
    border: 1px solid rgba(59, 130, 246, 0.25);
    color: var(--text);
}
.mhMvp.red-mvp[b-665coccszh] {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.20);
    color: var(--text);
}

/* History Tabs */
.historyTabs[b-665coccszh] {
    display: flex;
    gap: 0;
    margin-bottom: 12px;
    border-bottom: 2px solid var(--border);
}

.historyTab[b-665coccszh] {
    flex: 1;
    padding: 10px 16px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    margin-bottom: -2px;
    white-space: nowrap;
}

.historyTab:hover[b-665coccszh] {
    color: var(--text);
    background: var(--hoverGlow);
}

.historyTab.active[b-665coccszh] {
    color: var(--blue);
    border-bottom-color: var(--blue);
}

.tabCount[b-665coccszh] {
    font-size: 0.75rem;
    font-weight: 800;
    background: var(--borderSoft);
    color: var(--muted);
    padding: 2px 8px;
    border-radius: 999px;
    min-width: 24px;
    text-align: center;
}

.historyTab.active .tabCount[b-665coccszh] {
    background: rgba(37, 99, 235, 0.12);
    color: var(--blue);
}

/* H2H Summary */
.h2hSummary[b-665coccszh] {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
    padding: 10px 16px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.06), rgba(220, 38, 38, 0.06));
    border-radius: 10px;
    border: 1px solid var(--borderSoft);
}

.h2hRecord[b-665coccszh] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.05rem;
    font-weight: 800;
}

.h2hBlue[b-665coccszh] { color: var(--blue); }
.h2hRed[b-665coccszh] { color: var(--red); }
.h2hDash[b-665coccszh] { color: var(--muted); font-weight: 400; }

.noH2hData[b-665coccszh] {
    text-align: center;
    padding: 20px 16px;
    color: var(--muted);
    font-size: 0.92rem;
    font-style: italic;
    background: var(--panelSoft);
    border-radius: 8px;
    border: 1px dashed var(--border);
}

/* ── Scouting Report ── */

.scoutingReport[b-665coccszh] {
    margin-top: 12px;
}

.scoutGrid[b-665coccszh] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 8px;
}

.scoutCard[b-665coccszh] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    position: relative;
    overflow: hidden;
}

.scoutCard[b-665coccszh]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.scoutCardBlue[b-665coccszh]::before {
    background: linear-gradient(90deg, #2563eb, #3b82f6, transparent);
}

.scoutCardRed[b-665coccszh]::before {
    background: linear-gradient(90deg, transparent, #ef4444, #dc2626);
}

.scoutTeamHeader[b-665coccszh] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.scoutTeamName[b-665coccszh] {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text);
    letter-spacing: 0.01em;
}

.scoutTeamTag[b-665coccszh] {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 4px;
}

.scoutTagBlue[b-665coccszh] {
    background: rgba(37, 99, 235, 0.15);
    color: #60a5fa;
}

.scoutTagRed[b-665coccszh] {
    background: rgba(220, 38, 38, 0.15);
    color: #f87171;
}

.scoutTrait[b-665coccszh] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.88rem;
    color: var(--text);
    padding: 4px 0;
    line-height: 1.35;
}

.scoutTraitIcon[b-665coccszh] {
    flex-shrink: 0;
    margin-top: 2px;
}

.scoutStrength[b-665coccszh] {
    color: var(--text);
}

.scoutWeakness[b-665coccszh] {
    color: var(--muted);
}

.scoutDraftDivider[b-665coccszh] {
    height: 1px;
    background: var(--border);
    margin: 10px 0 8px;
}

.scoutDraftLabel[b-665coccszh] {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}

.scoutDraftNote[b-665coccszh] {
    color: var(--text);
    font-style: italic;
}

@media (max-width: 640px) {
    .scoutGrid[b-665coccszh] {
        grid-template-columns: 1fr;
    }
}

/* ── Match History Mobile ────────────────────────────────── */

@media (max-width: 768px) {
    .historyTabs[b-665coccszh] {
        gap: 0;
    }

    .historyTab[b-665coccszh] {
        padding: 8px 6px;
        font-size: 0.68rem;
        white-space: normal;
        text-align: center;
        line-height: 1.2;
        gap: 4px;
    }

    .tabCount[b-665coccszh] {
        font-size: 0.65rem;
        padding: 1px 6px;
    }

    .matchHistoryRow[b-665coccszh] {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        gap: 4px 8px;
        padding: 8px 10px;
        font-size: 0.78rem;
    }

    .mhTeams[b-665coccszh] {
        grid-column: 1 / -1;
        font-size: 0.78rem;
    }

    .mhTeamName[b-665coccszh] {
        font-size: 0.75rem;
    }

    .mhScore[b-665coccszh] {
        font-size: 0.8rem;
    }

    .mhDuration[b-665coccszh] {
        font-size: 0.7rem;
    }

    .mhDate[b-665coccszh] {
        font-size: 0.7rem;
        text-align: right;
    }

    .mhMvp[b-665coccszh] {
        grid-column: 1 / -1;
        font-size: 0.68rem;
    }

    .matchHistoryList[b-665coccszh] {
        max-height: 350px;
    }
}
/* /Components/Shared/PromoBanner.razor.rz.scp.css */
.promoToast[b-6j61ahy4yf] {
    position: fixed;
    top: 76px;
    right: 20px;
    z-index: 1200;
    width: 340px;
    max-width: calc(100vw - 40px);
    background: var(--panel);
    border: 1px solid rgba(251, 191, 36, 0.35);
    border-radius: 14px;
    padding: 16px 18px 18px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(251, 191, 36, 0.06);
    animation: promoIn-b-6j61ahy4yf 0.3s ease-out;
}

@keyframes promoIn-b-6j61ahy4yf {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.promoClose[b-6j61ahy4yf] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.promoClose:hover[b-6j61ahy4yf] {
    background: var(--panelSoft);
    color: var(--text);
}

.promoHead[b-6j61ahy4yf] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-right: 22px;
}

.promoIcon[b-6j61ahy4yf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: rgba(251, 191, 36, 0.14);
    color: #fbbf24;
    flex-shrink: 0;
}

.promoTitle[b-6j61ahy4yf] {
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--text);
}

.promoText[b-6j61ahy4yf] {
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--muted);
    margin: 0 0 12px;
}

.promoCode[b-6j61ahy4yf] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0 0 14px;
    padding: 9px 12px;
    border-radius: 9px;
    background: rgba(251, 191, 36, 0.08);
    border: 1px dashed rgba(251, 191, 36, 0.4);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, border-color 0.15s;
}

.promoCode:hover[b-6j61ahy4yf] {
    background: rgba(251, 191, 36, 0.14);
    border-color: rgba(251, 191, 36, 0.6);
}

.promoCodeLabel[b-6j61ahy4yf] {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #fbbf24;
    opacity: 0.85;
}

.promoCodeCopy[b-6j61ahy4yf] {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    color: #fbbf24;
}

.promoCodeVal[b-6j61ahy4yf] {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.promoActions[b-6j61ahy4yf] {
    display: flex;
    gap: 8px;
}

.promoPrimary[b-6j61ahy4yf] {
    flex: 1;
    padding: 9px 12px;
    border-radius: 9px;
    border: 1px solid #fbbf24;
    background: #fbbf24;
    color: #1a1206;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.promoPrimary:hover[b-6j61ahy4yf] {
    background: #f0b020;
    border-color: #f0b020;
}

.promoSecondary[b-6j61ahy4yf] {
    flex: 1;
    padding: 9px 12px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.promoSecondary:hover[b-6j61ahy4yf] {
    background: var(--panelSoft);
    color: var(--text);
}

@media (max-width: 480px) {
    .promoToast[b-6j61ahy4yf] {
        top: auto;
        bottom: 16px;
        right: 12px;
        left: 12px;
        width: auto;
    }
}
/* /Components/Shared/ReportMatchCard.razor.rz.scp.css */
/* Per-match card on /reports/{date}. */

.reportMatchCard[b-3hbfigtlvn] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    margin-bottom: 0.85rem;
}

.reportMatchCardStripe[b-3hbfigtlvn] {
    width: 4px;
    flex: 0 0 auto;
}

.reportMatchCardBody[b-3hbfigtlvn] {
    flex: 1;
    padding: 0.95rem 1.1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
}

.reportMatchCardHead[b-3hbfigtlvn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.reportMatchCardLeague[b-3hbfigtlvn] {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.reportMatchCardTime[b-3hbfigtlvn] {
    font-size: 0.72rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* Matchup row */

.reportMatchCardTeams[b-3hbfigtlvn] {
    display: grid;
    grid-template-columns: 1fr 80px 1fr;
    align-items: center;
    gap: 0.85rem;
}

.reportMatchCardTeam[b-3hbfigtlvn] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.reportMatchCardTeamLeft[b-3hbfigtlvn] {
    justify-content: flex-end;
}

.reportMatchCardTeamRight[b-3hbfigtlvn] {
    justify-content: flex-start;
}

.reportMatchCardTeamName[b-3hbfigtlvn] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.reportMatchCardTeamNameBold[b-3hbfigtlvn] {
    color: var(--text);
    font-weight: 800;
}

.reportMatchCardTeamLogo[b-3hbfigtlvn] {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex: 0 0 auto;
}

.reportMatchCardTeamLogoPlaceholder[b-3hbfigtlvn] {
    width: 28px;
    height: 28px;
    background: var(--panelSoft, rgba(255,255,255,0.04));
    border: 1px solid var(--border);
    border-radius: 4px;
    flex: 0 0 auto;
}

.reportMatchCardScore[b-3hbfigtlvn] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    font-size: 1.35rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.reportMatchCardScoreBold[b-3hbfigtlvn] {
    color: var(--text);
}

.reportMatchCardScoreFaded[b-3hbfigtlvn] {
    color: var(--muted);
    opacity: 0.65;
}

.reportMatchCardScoreDash[b-3hbfigtlvn] {
    color: var(--muted);
}

/* Per-model mini cards */

.reportMatchCardModelGrid[b-3hbfigtlvn] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.55rem;
}

.reportMatchCardModel[b-3hbfigtlvn] {
    background: var(--panelSoft, rgba(0,0,0,0.18));
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.reportMatchCardModelStripe[b-3hbfigtlvn] {
    height: 2px;
}

.reportMatchCardModelBody[b-3hbfigtlvn] {
    padding: 0.55rem 0.65rem 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.reportMatchCardModelHead[b-3hbfigtlvn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--border);
}

.reportMatchCardModelName[b-3hbfigtlvn] {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.reportMatchCardBadge[b-3hbfigtlvn] {
    font-size: 0.6rem;
    font-weight: 800;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    border: 1px solid var(--border);
    font-variant-numeric: tabular-nums;
}

.reportMatchCardBadgeMuted[b-3hbfigtlvn] {
    color: var(--muted);
    background: transparent;
}

.reportMatchCardNoData[b-3hbfigtlvn] {
    font-size: 0.65rem;
    font-style: italic;
    color: var(--muted);
    text-align: center;
    padding: 0.5rem 0;
}

/* Per-prediction row */

.reportMatchCardPredRow[b-3hbfigtlvn] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0;
}

.reportMatchCardPredLabel[b-3hbfigtlvn] {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: 0.04em;
    flex: 0 0 38px;
}

.reportMatchCardPredLogoSlot[b-3hbfigtlvn] {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reportMatchCardPredLogo[b-3hbfigtlvn] {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.reportMatchCardPredPct[b-3hbfigtlvn] {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    margin-left: 0.2rem;
}

.reportMatchCardPredPctUncertain[b-3hbfigtlvn] {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.4);
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
    font-size: 0.7rem;
}

.reportMatchCardPredIcon[b-3hbfigtlvn] {
    margin-left: auto;
    width: 11px;
    height: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile */

@media (max-width: 768px) {
    .reportMatchCardModelGrid[b-3hbfigtlvn] {
        grid-template-columns: repeat(2, 1fr);
    }

    .reportMatchCardTeams[b-3hbfigtlvn] {
        grid-template-columns: 1fr 60px 1fr;
    }

    .reportMatchCardTeamName[b-3hbfigtlvn] {
        font-size: 0.85rem;
    }

    .reportMatchCardScore[b-3hbfigtlvn] {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .reportMatchCardTeamLogo[b-3hbfigtlvn],
    .reportMatchCardTeamLogoPlaceholder[b-3hbfigtlvn] {
        width: 22px;
        height: 22px;
    }
}
/* /Components/Shared/SandboxTabs.razor.rz.scp.css */
.sandboxTabs[b-853k2s43qg] {
    display: flex;
    gap: 0;
    max-width: 900px;
    margin: 0 auto 20px auto;
    background: var(--panelSoft);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 4px;
    overflow: hidden;
}

.sandboxTab[b-853k2s43qg] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    letter-spacing: 0.01em;
}

.sandboxTab:hover:not(.active)[b-853k2s43qg] {
    background: var(--hoverGlow);
    color: var(--text);
}

.sandboxTab.active[b-853k2s43qg] {
    background: var(--panel);
    color: var(--text);
    box-shadow: 0 2px 8px var(--hoverShadow);
    font-weight: 900;
}

.sandboxTab svg[b-853k2s43qg] {
    opacity: 0.6;
    flex-shrink: 0;
}

.sandboxTab.active svg[b-853k2s43qg] {
    opacity: 1;
    stroke: var(--blue);
}
/* /Components/Shared/SearchBar.razor.rz.scp.css */
.search-wrapper[b-9rp8ubdvhe] {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 360px;
}

.search-box[b-9rp8ubdvhe] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 36px;
    background: var(--hoverGlow);
    border: 1.5px solid var(--borderSoft);
    border-radius: 999px;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.search-wrapper.search-open .search-box[b-9rp8ubdvhe],
.search-box:focus-within[b-9rp8ubdvhe] {
    border-color: rgba(59, 130, 246, 0.5);
    background: var(--panel);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.search-icon[b-9rp8ubdvhe] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
    flex-shrink: 0;
}

.search-input[b-9rp8ubdvhe] {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0 36px 0 34px;
    border-radius: 999px;
}

.search-input[b-9rp8ubdvhe]::placeholder {
    color: var(--mutedFaint);
    font-weight: 500;
}

/* Hide native search clear button (we render our own). */
.search-input[b-9rp8ubdvhe]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.search-clear[b-9rp8ubdvhe] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--borderSoft);
    color: var(--muted);
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

.search-clear:hover[b-9rp8ubdvhe] {
    background: var(--mutedFaint);
    color: var(--text);
}

/* ── Dropdown ──────────────────────────────────────────────── */

.search-dropdown[b-9rp8ubdvhe] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    max-height: min(70vh, 480px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--panel);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 6px;
    z-index: 1100;
    animation: searchDropIn-b-9rp8ubdvhe 0.15s ease-out;
}

@keyframes searchDropIn-b-9rp8ubdvhe {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.search-status[b-9rp8ubdvhe] {
    padding: 16px;
    text-align: center;
    color: var(--muted);
    font-size: 0.85rem;
}

.search-empty[b-9rp8ubdvhe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--mutedFaint);
    padding: 24px 16px;
}

.search-empty span[b-9rp8ubdvhe] {
    font-size: 0.85rem;
}

.search-section[b-9rp8ubdvhe] {
    padding: 4px 2px;
}

.search-section + .search-section[b-9rp8ubdvhe] {
    border-top: 1px solid var(--borderSoft);
    margin-top: 4px;
    padding-top: 6px;
}

.search-section-header[b-9rp8ubdvhe] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mutedFaint);
}

.search-result[b-9rp8ubdvhe] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 500;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s ease;
}

.search-result-active[b-9rp8ubdvhe],
.search-result:hover[b-9rp8ubdvhe],
.search-result:focus-visible[b-9rp8ubdvhe] {
    background: rgba(59, 130, 246, 0.16);
    outline: none;
}

.search-result-icon[b-9rp8ubdvhe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    flex-shrink: 0;
    color: var(--text);
}

.search-icon-league[b-9rp8ubdvhe] {
    background: rgba(96, 165, 250, 0.18);
    color: #60a5fa;
}

.search-icon-team[b-9rp8ubdvhe] {
    background: rgba(167, 139, 250, 0.18);
    color: #a78bfa;
}

.search-icon-player[b-9rp8ubdvhe] {
    background: rgba(34, 211, 238, 0.18);
    color: #22d3ee;
}

.search-result-logo[b-9rp8ubdvhe] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    object-fit: contain;
    flex-shrink: 0;
    background: var(--hoverGlow);
    padding: 2px;
}

.search-result-name[b-9rp8ubdvhe] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-result-tag[b-9rp8ubdvhe] {
    flex-shrink: 0;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mutedFaint);
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--hoverGlow);
}

.search-result-meta[b-9rp8ubdvhe] {
    flex-shrink: 0;
    font-size: 0.72rem;
    color: var(--mutedFaint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 50%;
}

/* ── Mobile overrides ─────────────────────────────────────── */

@media (max-width: 768px) {
    .search-wrapper[b-9rp8ubdvhe] {
        max-width: none;
    }

    .search-box[b-9rp8ubdvhe] {
        height: 38px;
    }

    .search-input[b-9rp8ubdvhe] {
        font-size: 0.9rem;
    }

    .search-dropdown[b-9rp8ubdvhe] {
        /* On mobile let the dropdown align with the menu container that hosts it
           rather than splaying across the viewport. */
        max-height: min(60vh, 420px);
    }

    .search-result[b-9rp8ubdvhe] {
        padding: 10px 10px;
    }

    .search-result-meta[b-9rp8ubdvhe] {
        max-width: 40%;
    }
}
/* /Components/Shared/TeamDetailView.razor.rz.scp.css */
/* Self-contained styles for TeamDetailView. Copied from Rankings.razor.css so the
   component is fully styled wherever it's hosted (scoped CSS travels with the
   component). Relies only on global CSS variables (--text, --muted, --border, etc.)
   defined in app.css. */

.teamDetailView[b-yhbfwtxt8a] {
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}

/* ── Team header ──────────────────────────────────── */

.leagueDetailHeader[b-yhbfwtxt8a] {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 24px 20px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(139, 92, 246, 0.06), transparent);
    border-bottom: 1px solid var(--borderSoft);
}

.leagueDetailIcon[b-yhbfwtxt8a] {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--borderSoft);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.leagueDetailLogo[b-yhbfwtxt8a] {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.leagueDetailInfo[b-yhbfwtxt8a] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.leagueDetailName[b-yhbfwtxt8a] {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -0.02em;
}

.leagueDetailMeta[b-yhbfwtxt8a] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.leagueDetailStat[b-yhbfwtxt8a] {
    font-size: 0.78rem;
    color: var(--muted);
    font-weight: 600;
}

.leagueDetailDot[b-yhbfwtxt8a] {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--muted);
    opacity: 0.4;
}

.teamRecordBadge[b-yhbfwtxt8a] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.recordWins[b-yhbfwtxt8a] { color: #22c55e; }
.recordLosses[b-yhbfwtxt8a] { color: #ef4444; }
.recordSep[b-yhbfwtxt8a] { color: var(--muted); opacity: 0.5; font-weight: 400; }

.teamWrBadge[b-yhbfwtxt8a] {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
}

.teamWrBadge.wrPositive[b-yhbfwtxt8a] {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.teamWrBadge.wrNegative[b-yhbfwtxt8a] {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* ── League stats grid + rank badges ──────────────── */

.leagueStatsSection[b-yhbfwtxt8a] {
    padding: 16px 20px;
    border-bottom: 1px solid var(--borderSoft);
}

.leagueStatsSectionTitle[b-yhbfwtxt8a] {
    margin: 0 0 10px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.leagueStatsGrid[b-yhbfwtxt8a] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 2px;
}

.leagueStat[b-yhbfwtxt8a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 10px 8px;
    border-left: 2px solid var(--hoverGlow);
}

.leagueStatValue[b-yhbfwtxt8a] {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.leagueStatLabel[b-yhbfwtxt8a] {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    text-align: center;
}

.rankBadge[b-yhbfwtxt8a] {
    display: inline-block;
    margin-left: 2px;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    vertical-align: middle;
}

.rankBadge1[b-yhbfwtxt8a] {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.25), rgba(245, 158, 11, 0.18));
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.rankBadge2[b-yhbfwtxt8a] {
    background: rgba(96, 165, 250, 0.12);
    color: #60a5fa;
    border: 1px solid rgba(96, 165, 250, 0.2);
}

.rankBadgeTop[b-yhbfwtxt8a] {
    background: rgba(74, 222, 128, 0.10);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.18);
}

.rankBadgeBot[b-yhbfwtxt8a] {
    background: rgba(248, 113, 113, 0.10);
    color: #f87171;
    border: 1px solid rgba(248, 113, 113, 0.18);
}

/* ── Upcoming matches ─────────────────────────────── */

.teamUpcomingList[b-yhbfwtxt8a] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.teamUpcomingRow[b-yhbfwtxt8a] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panelSoft, var(--panel));
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.teamUpcomingRow:hover[b-yhbfwtxt8a] {
    border-color: var(--accent, #60a5fa);
}

.teamUpcomingLeague[b-yhbfwtxt8a] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    min-width: 4rem;
}

.teamUpcomingTeams[b-yhbfwtxt8a] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 16rem;
    font-weight: 600;
}

.teamUpcomingVs[b-yhbfwtxt8a] {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 500;
}

.teamUpcomingMeta[b-yhbfwtxt8a] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    font-size: 0.8rem;
    color: var(--muted);
}

.teamUpcomingFormat[b-yhbfwtxt8a] {
    font-weight: 700;
    color: var(--text);
}

/* All model picks for an upcoming match — wraps onto its own full-width line below the
   teams/meta. FastTree is always shown; the premium trio renders a lock chip when the
   viewer isn't Premium. */
.teamUpcomingPicks[b-yhbfwtxt8a] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
    flex-basis: 100%;
    padding-top: 0.55rem;
    margin-top: 0.1rem;
    border-top: 1px solid var(--borderSoft, var(--border));
}

.teamUpcomingPicksLabel[b-yhbfwtxt8a] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: var(--muted);
    margin-right: 0.15rem;
}

.teamModelPick[b-yhbfwtxt8a] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.55rem;
    border-radius: 8px;
    background: var(--panel);
    border: 1px solid var(--border);
}

.teamModelPickLocked[b-yhbfwtxt8a] {
    opacity: 0.85;
}

.teamModelPickModel[b-yhbfwtxt8a] {
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 0.01em;
}

.teamModelPickName[b-yhbfwtxt8a] {
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--text);
}

.teamModelPickConf[b-yhbfwtxt8a] {
    font-weight: 800;
    font-size: 0.78rem;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.teamModelPickLock[b-yhbfwtxt8a] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
}

/* Model accent colors (match the app-wide palette). */
.modelFastTree[b-yhbfwtxt8a] { color: #60a5fa; }
.modelLightGBM[b-yhbfwtxt8a] { color: #fbbf24; }
.modelPcaSweep[b-yhbfwtxt8a] { color: #a78bfa; }
.modelConsensus[b-yhbfwtxt8a] { color: #22d3ee; }

/* ── Recent form ──────────────────────────────────── */

.teamFormStrip[b-yhbfwtxt8a] {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.teamFormPip[b-yhbfwtxt8a] {
    width: 1.6rem;
    height: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 800;
    color: #fff;
}

.teamFormWin[b-yhbfwtxt8a] { background: #16a34a; }
.teamFormLoss[b-yhbfwtxt8a] { background: #dc2626; }

.teamHistoryList[b-yhbfwtxt8a] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.teamHistoryRow[b-yhbfwtxt8a] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    font-size: 0.85rem;
}

.teamHistoryRow:nth-child(odd)[b-yhbfwtxt8a] {
    background: var(--panelSoft, var(--panel));
}

.teamHistoryDate[b-yhbfwtxt8a] {
    color: var(--muted);
    min-width: 3.5rem;
}

.teamHistoryResult[b-yhbfwtxt8a] {
    font-weight: 800;
    min-width: 2.5rem;
}

.teamHistoryWin[b-yhbfwtxt8a] { color: #16a34a; }
.teamHistoryLoss[b-yhbfwtxt8a] { color: #dc2626; }

.teamHistoryOpp[b-yhbfwtxt8a] {
    flex: 1 1 8rem;
    color: var(--text);
    font-weight: 600;
}

.teamHistoryScore[b-yhbfwtxt8a] {
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}

.teamHistoryDuration[b-yhbfwtxt8a] {
    color: var(--muted);
    font-size: 0.78rem;
}

/* Clickable recent-form rows → series detail page */
a.teamHistoryRowLink[b-yhbfwtxt8a] {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background 0.12s ease, transform 0.12s ease;
}
a.teamHistoryRowLink:hover[b-yhbfwtxt8a] {
    background: var(--hoverGlow, rgba(96,165,250,0.14));
    transform: translateX(2px);
}
.teamHistoryArrow[b-yhbfwtxt8a] {
    margin-left: auto;
    color: var(--accent, #60a5fa);
    font-size: 1.1rem;
    font-weight: 700;
    opacity: 0;
    transition: opacity 0.12s ease;
}
a.teamHistoryRowLink:hover .teamHistoryArrow[b-yhbfwtxt8a] { opacity: 1; }

/* Highlighted Elo badge (header hero stat) */
.eloBadge[b-yhbfwtxt8a] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(96,165,250,0.20), rgba(96,165,250,0.05));
    border: 1px solid var(--accent, #60a5fa);
    box-shadow: 0 2px 10px rgba(96,165,250,0.18);
}
.eloBadgeNum[b-yhbfwtxt8a] {
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--accent, #60a5fa);
    font-variant-numeric: tabular-nums;
}
.eloBadgeUnit[b-yhbfwtxt8a] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--accent, #60a5fa);
    opacity: 0.85;
}
.eloBadgeRank[b-yhbfwtxt8a] {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text);
    background: rgba(96,165,250,0.20);
    padding: 0.1rem 0.42rem;
    border-radius: 999px;
    margin-left: 0.1rem;
}

/* ── Tables (roster) ──────────────────────────────── */

.rankTableScroll[b-yhbfwtxt8a] {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(37,99,235,0.2) transparent;
}

.rankTableScroll[b-yhbfwtxt8a]::-webkit-scrollbar { width: 6px; height: 6px; }
.rankTableScroll[b-yhbfwtxt8a]::-webkit-scrollbar-track { background: transparent; }
.rankTableScroll[b-yhbfwtxt8a]::-webkit-scrollbar-thumb { background: rgba(37,99,235,0.2); border-radius: 3px; }
.rankTableScroll[b-yhbfwtxt8a]::-webkit-scrollbar-thumb:hover { background: rgba(37,99,235,0.35); }

.rankTable[b-yhbfwtxt8a] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    table-layout: fixed;
}

.rankTable thead th[b-yhbfwtxt8a] {
    background: var(--panelSoft);
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.rankTable thead th.thNum[b-yhbfwtxt8a] { width: 85px; text-align: right; }
.rankTable thead th.thRole[b-yhbfwtxt8a] { width: 90px; }

.rankTable tbody tr[b-yhbfwtxt8a] {
    border-bottom: 1px solid var(--borderSoft);
    transition: background 0.1s ease;
}

.rankTable tbody tr:last-child[b-yhbfwtxt8a] { border-bottom: none; }
.rankTable tbody tr:hover[b-yhbfwtxt8a] { background: var(--panelSoft); }

.rankTable td[b-yhbfwtxt8a] {
    padding: 10px 12px;
    color: var(--text);
}

.tdTeam[b-yhbfwtxt8a] { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdStat[b-yhbfwtxt8a] { width: 85px; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.tdRole[b-yhbfwtxt8a] { width: 90px; }

.playerTable[b-yhbfwtxt8a] {
    table-layout: auto;
    min-width: 900px;
}

.playerTable thead th[b-yhbfwtxt8a] { white-space: nowrap; }
.playerTable .thPlayerName[b-yhbfwtxt8a] { min-width: 130px; }
.playerTable .thNum[b-yhbfwtxt8a] { width: 70px; text-align: right; }
.playerTable .tdStat[b-yhbfwtxt8a] { white-space: nowrap; font-size: 0.8rem; }

.playerName[b-yhbfwtxt8a] {
    font-weight: 700;
    color: var(--text);
}

.playerLink[b-yhbfwtxt8a] {
    text-decoration: none;
    color: var(--blueLight, #60a5fa);
}

.playerLink:hover[b-yhbfwtxt8a] { text-decoration: underline; }

.roleTag[b-yhbfwtxt8a] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.roleTag-top[b-yhbfwtxt8a] { background: rgba(239, 68, 68, 0.12); color: #f87171; }
.roleTag-jungle[b-yhbfwtxt8a] { background: rgba(34, 197, 94, 0.12); color: #4ade80; }
.roleTag-mid[b-yhbfwtxt8a] { background: rgba(99, 102, 241, 0.15); color: #818cf8; }
.roleTag-adc[b-yhbfwtxt8a] { background: rgba(251, 191, 36, 0.12); color: #fbbf24; }
.roleTag-support[b-yhbfwtxt8a] { background: rgba(56, 189, 248, 0.12); color: #38bdf8; }

/* ── Champion role section ────────────────────────── */

.champRoleSection[b-yhbfwtxt8a] {
    padding: 16px 20px 20px;
    border-bottom: 1px solid var(--borderSoft);
}

.champRoleSectionTitle[b-yhbfwtxt8a] {
    margin: 0 0 12px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.champRoleSubTitle[b-yhbfwtxt8a] {
    margin: 14px 0 10px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text);
}

.champRoleGrid[b-yhbfwtxt8a] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 8px;
}

.champRoleCard[b-yhbfwtxt8a] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--borderSoft);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.champRoleCard:hover[b-yhbfwtxt8a] {
    border-color: rgba(59, 130, 246, 0.3);
    background: rgba(59, 130, 246, 0.04);
}

.champRoleCardImg[b-yhbfwtxt8a] { flex-shrink: 0; }

.champRoleIcon[b-yhbfwtxt8a] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--borderSoft);
}

.champRoleIconPlaceholder[b-yhbfwtxt8a] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--borderSoft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--muted);
}

.champRoleCardInfo[b-yhbfwtxt8a] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.champRoleCardName[b-yhbfwtxt8a] {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.champRoleCardStats[b-yhbfwtxt8a] {
    display: flex;
    gap: 8px;
    font-size: 0.65rem;
    font-weight: 600;
    white-space: nowrap;
}

.champRoleCardGames[b-yhbfwtxt8a] { color: var(--muted); }
.champRoleCardWR[b-yhbfwtxt8a] { font-weight: 700; }
.champRoleCardKDA[b-yhbfwtxt8a] { color: var(--muted); }

.wrHigh[b-yhbfwtxt8a] { color: #16a34a; font-weight: 700; }
.wrMid[b-yhbfwtxt8a] { color: var(--text); font-weight: 600; }
.wrLow[b-yhbfwtxt8a] { color: var(--red); font-weight: 600; }

/* ── Ban styles ───────────────────────────────────── */

.champBanCard[b-yhbfwtxt8a] { border-color: rgba(239, 68, 68, 0.12); }

.champBanCard:hover[b-yhbfwtxt8a] {
    border-color: rgba(239, 68, 68, 0.3) !important;
    background: rgba(239, 68, 68, 0.04) !important;
}

.champBanIcon[b-yhbfwtxt8a] { border-color: rgba(239, 68, 68, 0.2) !important; }

.champBanRate[b-yhbfwtxt8a] { color: #f87171 !important; font-weight: 700; }
/* /Components/Shared/UpcomingMatchCard.razor.rz.scp.css */
/* ── Design Tokens (inherited from :root / [data-theme]) ──── */

/* ── Hero Header ───────────────────────────────────────────── */

.hero[b-dn79sfmet3] {
    background: linear-gradient(135deg, #0b1120 0%, #162044 40%, #1e1145 70%, #0f1623 100%);
    padding: 56px 32px 48px;
    text-align: center;
    border-radius: 0;
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
}

.hero[b-dn79sfmet3]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 20%, rgba(37,99,235,0.12) 0%, transparent 60%),
                radial-gradient(ellipse at 70% 80%, rgba(139,92,246,0.10) 0%, transparent 60%);
    pointer-events: none;
}

.heroContent[b-dn79sfmet3] {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
}

.heroBanner[b-dn79sfmet3] {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}

.heroBannerImg[b-dn79sfmet3] {
    width: 100%;
    max-width: 680px;
    height: auto;
}

.heroTagline[b-dn79sfmet3] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #60cfff;
}

/* Stats ribbon */
.statsRibbon[b-dn79sfmet3] {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 28px;
    flex-wrap: wrap;
}

.statChip[b-dn79sfmet3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 20px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    backdrop-filter: blur(8px);
}

.statValue[b-dn79sfmet3] {
    font-size: 1.4rem;
    font-weight: 900;
    color: #e2e8f0;
    letter-spacing: -0.02em;
}

.statLabel[b-dn79sfmet3] {
    font-size: 0.7rem;
    color: rgba(148, 163, 184, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

/* CTA buttons */
.heroCtas[b-dn79sfmet3] {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 28px;
    flex-wrap: wrap;
}

.ctaBtn[b-dn79sfmet3] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.15s ease;
    letter-spacing: 0.01em;
}

.ctaPrimary[b-dn79sfmet3] {
    background: linear-gradient(180deg, #3b82f6, #2563eb);
    color: #fff;
    box-shadow: 0 4px 14px rgba(37,99,235,0.35);
}

.ctaPrimary:hover[b-dn79sfmet3] {
    background: linear-gradient(180deg, #60a5fa, #3b82f6);
    box-shadow: 0 6px 20px rgba(37,99,235,0.45);
    transform: translateY(-1px);
}

.ctaSecondary[b-dn79sfmet3] {
    background: rgba(255,255,255,0.08);
    color: #e2e8f0;
    border: 1px solid rgba(255,255,255,0.15);
}

.ctaSecondary:hover[b-dn79sfmet3] {
    background: rgba(255,255,255,0.14);
    color: #fff;
    transform: translateY(-1px);
}

/* ── Preview Cards (Neon Outline) ────────────────────────── */

.previewCardGrid[b-dn79sfmet3] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 12px 24px 14px;
    margin: 0 auto 28px;
    max-width: 1200px;
    background: rgba(15,22,35,0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 0 0 16px 16px;
}

.previewCard[b-dn79sfmet3] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(18,24,40,0.9), rgba(14,20,35,0.95));
    cursor: pointer;
    transition: all 0.3s ease, box-shadow 0.3s ease;
    font-family: inherit;
    text-align: left;
    color: #c1c9d4;
    min-height: 92px;
}

/* ── Per-tab neon colors (inactive) ── */
.previewCardLive:not(.previewCardDisabled)[b-dn79sfmet3] {
    border-color: rgba(52,211,153,0.25);
    box-shadow: 0 0 8px rgba(52,211,153,0.06), inset 0 0 12px rgba(52,211,153,0.03);
}
.previewCardUpcoming[b-dn79sfmet3] {
    border-color: rgba(96,165,250,0.25);
    box-shadow: 0 0 8px rgba(96,165,250,0.06), inset 0 0 12px rgba(96,165,250,0.03);
}
.previewCardRecent[b-dn79sfmet3] {
    border-color: rgba(251,191,36,0.2);
    box-shadow: 0 0 8px rgba(251,191,36,0.05), inset 0 0 12px rgba(251,191,36,0.02);
}
.previewCardModels[b-dn79sfmet3] {
    border-color: rgba(167,139,250,0.25);
    box-shadow: 0 0 8px rgba(167,139,250,0.06), inset 0 0 12px rgba(167,139,250,0.03);
}

/* ── Per-tab hover glow ── */
.previewCardLive:hover:not(.previewCardDisabled):not(.previewCardActive)[b-dn79sfmet3] {
    border-color: rgba(52,211,153,0.45);
    box-shadow: 0 0 18px rgba(52,211,153,0.12), inset 0 0 20px rgba(52,211,153,0.05);
    transform: translateY(-1px);
}
.previewCardUpcoming:hover:not(.previewCardActive)[b-dn79sfmet3] {
    border-color: rgba(96,165,250,0.45);
    box-shadow: 0 0 18px rgba(96,165,250,0.12), inset 0 0 20px rgba(96,165,250,0.05);
    transform: translateY(-1px);
}
.previewCardRecent:hover:not(.previewCardActive)[b-dn79sfmet3] {
    border-color: rgba(251,191,36,0.4);
    box-shadow: 0 0 18px rgba(251,191,36,0.1), inset 0 0 20px rgba(251,191,36,0.04);
    transform: translateY(-1px);
}
.previewCardModels:hover:not(.previewCardActive)[b-dn79sfmet3] {
    border-color: rgba(167,139,250,0.45);
    box-shadow: 0 0 18px rgba(167,139,250,0.12), inset 0 0 20px rgba(167,139,250,0.05);
    transform: translateY(-1px);
}

/* ── Per-tab active neon glow ── */
.previewCardLive.previewCardActive[b-dn79sfmet3] {
    border-color: rgba(52,211,153,0.6);
    box-shadow: 0 0 24px rgba(52,211,153,0.2), 0 0 48px rgba(52,211,153,0.08), inset 0 0 24px rgba(52,211,153,0.06);
    background: linear-gradient(145deg, rgba(16,55,45,0.8), rgba(14,20,35,0.95));
    color: #fff;
    animation: neonPulseLive-b-dn79sfmet3 2.5s ease-in-out infinite;
}
.previewCardUpcoming.previewCardActive[b-dn79sfmet3] {
    border-color: rgba(96,165,250,0.6);
    box-shadow: 0 0 24px rgba(96,165,250,0.2), 0 0 48px rgba(96,165,250,0.08), inset 0 0 24px rgba(96,165,250,0.06);
    background: linear-gradient(145deg, rgba(20,35,70,0.8), rgba(14,20,35,0.95));
    color: #fff;
    animation: neonPulseBlue-b-dn79sfmet3 2.5s ease-in-out infinite;
}
.previewCardRecent.previewCardActive[b-dn79sfmet3] {
    border-color: rgba(251,191,36,0.5);
    box-shadow: 0 0 24px rgba(251,191,36,0.18), 0 0 48px rgba(251,191,36,0.07), inset 0 0 24px rgba(251,191,36,0.05);
    background: linear-gradient(145deg, rgba(55,40,12,0.7), rgba(14,20,35,0.95));
    color: #fff;
    animation: neonPulseAmber-b-dn79sfmet3 2.5s ease-in-out infinite;
}
.previewCardModels.previewCardActive[b-dn79sfmet3] {
    border-color: rgba(167,139,250,0.6);
    box-shadow: 0 0 24px rgba(167,139,250,0.2), 0 0 48px rgba(167,139,250,0.08), inset 0 0 24px rgba(167,139,250,0.06);
    background: linear-gradient(145deg, rgba(45,30,80,0.8), rgba(14,20,35,0.95));
    color: #fff;
    animation: neonPulseViolet-b-dn79sfmet3 2.5s ease-in-out infinite;
}

@keyframes neonPulseLive-b-dn79sfmet3 {
    0%, 100% { box-shadow: 0 0 24px rgba(52,211,153,0.2), 0 0 48px rgba(52,211,153,0.08), inset 0 0 24px rgba(52,211,153,0.06); }
    50% { box-shadow: 0 0 30px rgba(52,211,153,0.28), 0 0 60px rgba(52,211,153,0.12), inset 0 0 30px rgba(52,211,153,0.08); }
}
@keyframes neonPulseBlue-b-dn79sfmet3 {
    0%, 100% { box-shadow: 0 0 24px rgba(96,165,250,0.2), 0 0 48px rgba(96,165,250,0.08), inset 0 0 24px rgba(96,165,250,0.06); }
    50% { box-shadow: 0 0 30px rgba(96,165,250,0.28), 0 0 60px rgba(96,165,250,0.12), inset 0 0 30px rgba(96,165,250,0.08); }
}
@keyframes neonPulseAmber-b-dn79sfmet3 {
    0%, 100% { box-shadow: 0 0 24px rgba(251,191,36,0.18), 0 0 48px rgba(251,191,36,0.07), inset 0 0 24px rgba(251,191,36,0.05); }
    50% { box-shadow: 0 0 30px rgba(251,191,36,0.25), 0 0 60px rgba(251,191,36,0.10), inset 0 0 30px rgba(251,191,36,0.07); }
}
@keyframes neonPulseViolet-b-dn79sfmet3 {
    0%, 100% { box-shadow: 0 0 24px rgba(167,139,250,0.2), 0 0 48px rgba(167,139,250,0.08), inset 0 0 24px rgba(167,139,250,0.06); }
    50% { box-shadow: 0 0 30px rgba(167,139,250,0.28), 0 0 60px rgba(167,139,250,0.12), inset 0 0 30px rgba(167,139,250,0.08); }
}

/* ── Disabled state ── */
.previewCardDisabled[b-dn79sfmet3] {
    opacity: 0.35;
    cursor: not-allowed;
    border-color: rgba(148,163,184,0.12);
    box-shadow: none;
    animation: none;
}

/* ── Label ── */
.previewCardLabel[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(148,163,184,0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Per-tab label colors */
.previewCardLive:not(.previewCardDisabled) .previewCardLabel[b-dn79sfmet3] { color: rgba(52,211,153,0.7); }
.previewCardUpcoming .previewCardLabel[b-dn79sfmet3] { color: rgba(96,165,250,0.7); }
.previewCardRecent .previewCardLabel[b-dn79sfmet3] { color: rgba(251,191,36,0.7); }
.previewCardModels .previewCardLabel[b-dn79sfmet3] { color: rgba(167,139,250,0.7); }

/* Active label colors (brighter) */
.previewCardLive.previewCardActive .previewCardLabel[b-dn79sfmet3] { color: #6ee7b7; }
.previewCardUpcoming.previewCardActive .previewCardLabel[b-dn79sfmet3] { color: #93c5fd; }
.previewCardRecent.previewCardActive .previewCardLabel[b-dn79sfmet3] { color: #fcd34d; }
.previewCardModels.previewCardActive .previewCardLabel[b-dn79sfmet3] { color: #c4b5fd; }

/* Disabled label */
.previewCardDisabled .previewCardLabel[b-dn79sfmet3] { color: rgba(148,163,184,0.4); }

/* ── Live dot ── */
.previewCardLiveDot[b-dn79sfmet3] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34d399;
    animation: previewLiveBlink-b-dn79sfmet3 1.5s ease-in-out infinite;
    box-shadow: 0 0 6px rgba(52,211,153,0.7);
}

@keyframes previewLiveBlink-b-dn79sfmet3 {
    0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(52,211,153,0.7); }
    50% { opacity: 0.3; box-shadow: 0 0 2px rgba(52,211,153,0.2); }
}

/* ── Card body ── */
.previewCardBody[b-dn79sfmet3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
}

.previewCardTeams[b-dn79sfmet3] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.previewCardHighlight[b-dn79sfmet3] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #e2e8f0;
}

.previewCardDetail[b-dn79sfmet3] {
    font-size: 0.75rem;
    color: rgba(203,213,225,0.95);
    font-weight: 600;
}

.previewCardExtra[b-dn79sfmet3] {
    font-size: 0.68rem;
    color: rgba(148,163,184,0.55);
    font-weight: 600;
}

.previewCardMuted[b-dn79sfmet3] {
    font-size: 0.95rem;
    color: rgba(148,163,184,0.6);
    font-style: italic;
}

.previewCardSkeleton[b-dn79sfmet3] {
    display: block;
    height: 14px;
    width: 70%;
    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-b-dn79sfmet3 1.8s ease-in-out infinite;
}

@keyframes skeletonShimmer-b-dn79sfmet3 {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ── Section Layout ────────────────────────────────────────── */

.section[b-dn79sfmet3] {
    padding: 0 24px;
    margin-bottom: 36px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Wraps the PicksTeaserBanner shared component so it lines up with .section
   and .previewCardGrid (same 1200px max-width, same horizontal padding).
   Without this the banner stretches edge-to-edge while the surrounding
   content is centered, which looks broken. */
.picksTeaserWrap[b-dn79sfmet3] {
    padding: 0 24px;
    max-width: 1200px;
    margin: 0 auto 20px;
}

.sectionTitle[b-dn79sfmet3] {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -0.02em;
}

.sectionSubtitle[b-dn79sfmet3] {
    margin: 4px 0 20px;
    color: var(--muted);
    font-size: 0.88rem;
}

/* "View weekly reports →" link sitting under the MODEL PERFORMANCES
   heading. Treats it as a quiet secondary CTA — the primary content
   below is the spotlight cards. */
.modelReportsLink[b-dn79sfmet3] {
    display: inline-block;
    margin: -12px 0 16px;
    color: #22d3ee;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color 0.15s, transform 0.15s;
}

.modelReportsLink:hover[b-dn79sfmet3] {
    color: #67e8f9;
    transform: translateX(2px);
}



/* ── Split Tabs (Model Performances) ─────────────────────────
   Split 2 (current) uses the standard purple accent. Split 1 (legacy)
   is styled as an "archived" tab — muted palette, dashed outline,
   reduced opacity — to signal that the data belongs to a previous
   split + a previous generation of model hyperparameters. It stays
   clickable so users can still inspect legacy numbers. */
.splitTabs[b-dn79sfmet3] {
    display: flex;
    gap: 6px;
    max-width: 560px;
    margin: 0 auto 14px;
    padding: 4px;
    background: var(--panelSoft);
    border-radius: 10px;
}
.splitTab[b-dn79sfmet3] {
    flex: 1;
    padding: 9px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--mutedFaint);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    letter-spacing: 0.02em;
}
.splitTab:hover[b-dn79sfmet3] { color: var(--muted); background: rgba(255,255,255,0.04); }

.splitTabArchived[b-dn79sfmet3] {
    border: 1px dashed rgba(148, 163, 184, 0.35);
    opacity: 0.72;
    color: rgba(148, 163, 184, 0.85);
}
.splitTabArchived:hover[b-dn79sfmet3] { opacity: 0.9; color: rgba(203, 213, 225, 1); }
.splitTabArchived.active[b-dn79sfmet3] {
    background: rgba(100, 116, 139, 0.18);
    border-color: rgba(148, 163, 184, 0.6);
    color: #cbd5e1;
    opacity: 1;
}

.splitTabCurrent.active[b-dn79sfmet3] {
    background: rgba(124, 58, 237, 0.22);
    border-color: rgba(124, 58, 237, 0.55);
    color: #ddd6fe;
}

/* ── Time Range Tabs (Model Performances) ─────────────────────
   Secondary filter sitting below the Split tabs. Zooms the Model
   Performances panels into a recent window (24h / 1w / 1m) while
   staying within the selected split. Styled more subtly than the
   split tabs so the visual hierarchy stays clear. */
.timeRangeTabs[b-dn79sfmet3] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 560px;
    margin: 0 auto 18px;
    padding: 3px;
    background: var(--panelSoft);
    border-radius: 8px;
}
.timeRangeTab[b-dn79sfmet3] {
    flex: 1;
    min-width: 72px;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--mutedFaint);
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.timeRangeTab:hover[b-dn79sfmet3] {
    color: var(--muted);
    background: rgba(255,255,255,0.04);
}
.timeRangeTab.active[b-dn79sfmet3] {
    background: rgba(56, 189, 248, 0.18);
    border-color: rgba(56, 189, 248, 0.5);
    color: #bae6fd;
}

.emptyTimeRange[b-dn79sfmet3] {
    text-align: center;
    padding: 24px 16px;
    margin: 8px 0 16px;
    color: var(--mutedFaint);
    font-size: 0.88rem;
    font-style: italic;
    background: var(--panelSoft);
    border: 1px dashed rgba(148, 163, 184, 0.25);
    border-radius: 10px;
}


/* ── Model Selector Tabs ──────────────────────────────────── */

.modelTabs[b-dn79sfmet3] {
    display: flex;
    gap: 4px;
    max-width: 800px;
    margin: 0 auto 20px;
    padding: 4px;
    background: var(--panelSoft);
    border-radius: 12px;
}

.modelTab[b-dn79sfmet3] {
    flex: 1;
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--mutedFaint);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.modelTab:hover[b-dn79sfmet3] { color: var(--muted); background: rgba(255,255,255,0.04); }
.modelTab.active[b-dn79sfmet3] { color: #fff; }
.modelTab.active.tab-blue[b-dn79sfmet3] { background: rgba(96,165,250,0.25); color: #93c5fd; }
.modelTab.active.tab-amber[b-dn79sfmet3] { background: rgba(245,158,11,0.25); color: #fcd34d; }
.modelTab.active.tab-purple[b-dn79sfmet3] { background: rgba(167,139,250,0.25); color: #c4b5fd; }
.modelTab.active.tab-cyan[b-dn79sfmet3] { background: rgba(34,211,238,0.2); color: #67e8f9; }

.tabBadge[b-dn79sfmet3] {
    font-size: 0.55rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Spotlight Card ──────────────────────────────────────── */

.spotlightCard[b-dn79sfmet3] {
    max-width: 800px;
    margin: 0 auto;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.3);
}
.spotlightCard.accent-blue[b-dn79sfmet3] { border-top: 3px solid #60a5fa; }
.spotlightCard.accent-amber[b-dn79sfmet3] { border-top: 3px solid #f59e0b; }
.spotlightCard.accent-purple[b-dn79sfmet3] { border-top: 3px solid #a78bfa; }
.spotlightCard.accent-cyan[b-dn79sfmet3] { border-top: 3px solid #22d3ee; }

.spotlightHeader[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px;
}
.spotlightLeft[b-dn79sfmet3] { display: flex; align-items: center; gap: 10px; }
.spotlightBadges[b-dn79sfmet3] { display: flex; gap: 4px; }

.spotlightName[b-dn79sfmet3] { font-weight: 900; font-size: 1.3rem; }
.spotlightName.name-blue[b-dn79sfmet3] { color: #60a5fa; }
.spotlightName.name-amber[b-dn79sfmet3] { color: #f59e0b; }
.spotlightName.name-purple[b-dn79sfmet3] { color: #a78bfa; }
.spotlightName.name-cyan[b-dn79sfmet3] { color: #22d3ee; }

.spotlightTrained[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mutedFaint);
    padding: 5px 10px;
    border-radius: 6px;
}
.spotlightTrained svg[b-dn79sfmet3] { opacity: 0.6; flex-shrink: 0; }
.spotlightTrained.modelTrainedFastTree[b-dn79sfmet3] { color: #60a5fa; background: rgba(96,165,250,0.08); border: 1px solid rgba(96,165,250,0.15); }
.spotlightTrained.modelTrainedLightGBM[b-dn79sfmet3] { color: #fbbf24; background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.15); }
.spotlightTrained.modelTrainedPcaSweep[b-dn79sfmet3] { color: #a78bfa; background: rgba(167,139,250,0.08); border: 1px solid rgba(167,139,250,0.15); }

/* ── Hero Stats (Real-Life Accuracy) ────────────────────── */

.heroRow[b-dn79sfmet3] {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}
.heroBlock[b-dn79sfmet3] {
    flex: 1;
    text-align: center;
    padding: 20px 16px;
    background: var(--panelDeep);
    border: 1px solid var(--borderSoft);
    border-radius: 12px;
}
.heroValue[b-dn79sfmet3] {
    font-size: 2.8rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 8px;
}
.heroValue.blue[b-dn79sfmet3] { color: #60a5fa; }
.heroValue.amber[b-dn79sfmet3] { color: #fbbf24; }
.heroValue.purple[b-dn79sfmet3] { color: #a78bfa; }
.heroValue.cyan[b-dn79sfmet3] { color: #22d3ee; }

.heroProgress[b-dn79sfmet3] {
    width: 80%;
    height: 6px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    margin: 0 auto 8px;
    overflow: hidden;
}
.heroProgressFill[b-dn79sfmet3] { height: 100%; border-radius: 3px; transition: width 0.5s ease; }
.heroProgressFill.blue[b-dn79sfmet3] { background: #60a5fa; }
.heroProgressFill.amber[b-dn79sfmet3] { background: #fbbf24; }
.heroProgressFill.purple[b-dn79sfmet3] { background: #a78bfa; }
.heroProgressFill.cyan[b-dn79sfmet3] { background: #22d3ee; }

.heroLabel[b-dn79sfmet3] {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--mutedFaint);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.heroFraction[b-dn79sfmet3] {
    font-size: 0.8rem;
    color: var(--muted);
    font-weight: 500;
    margin-top: 2px;
}

/* Live log loss row sitting under the X/Y fraction. Slightly larger than
   .heroFraction (this is a real metric, not a sample-size footnote) but
   smaller than the big % above. Inline label + value so the row stays
   compact and visually subordinate to the headline accuracy number. */
.heroSubMetric[b-dn79sfmet3] {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 6px;
    font-size: 0.78rem;
    font-weight: 600;
}
.heroSubLabel[b-dn79sfmet3] {
    color: var(--mutedFaint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.heroSubValue[b-dn79sfmet3] {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* ── Recent Form Strip ──────────────────────────────────── */

/* ── Value Engine (positive-EV ROI panel) ──────────────────
   Full-width panel between the accuracy hero and the confidence
   mini-cards. Renders for every model. Top-right radial "shine"
   makes it read as a premium feature on first glance. On mobile
   the ROI text and donut stay side-by-side (donut shrinks) — the
   stats grid collapses to 2 columns and the series/game footer
   stacks vertically. Color accent comes from the same .blue/.amber/
   .purple/.cyan class the rest of the card uses. */

.valueEngine[b-dn79sfmet3] {
    position: relative;
    margin: 0 0 16px;
    padding: 20px 22px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.04) 0%, var(--panelDeep) 65%);
    border: 1px solid var(--borderSoft);
    border-left: 3px solid #60a5fa;
    border-radius: 12px;
    overflow: hidden;
}
.valueEngine.amber[b-dn79sfmet3]  { border-left-color: #fbbf24; }
.valueEngine.purple[b-dn79sfmet3] { border-left-color: #a78bfa; }
.valueEngine.cyan[b-dn79sfmet3]   { border-left-color: #22d3ee; }

/* Negative ROI repaints with a red tint so the sign is unmistakable
   even before the user reads the percentage. The accent stripe color
   stays the model's color — the body tint carries the sign. */
.valueEngine.valueEngineNeg[b-dn79sfmet3] {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.04) 0%, var(--panelDeep) 65%);
}

/* Subtle radial glow in the top-right corner — premium feel without
   a literal sparkle/star icon. Color follows the accent class. */
.valueEngine[b-dn79sfmet3]::after {
    content: '';
    position: absolute;
    top: 0; right: 0; width: 220px; height: 80px;
    background: radial-gradient(ellipse at top right, #60a5fa, transparent 70%);
    opacity: 0.08;
    pointer-events: none;
}
.valueEngine.amber[b-dn79sfmet3]::after  { background: radial-gradient(ellipse at top right, #fbbf24, transparent 70%); }
.valueEngine.purple[b-dn79sfmet3]::after { background: radial-gradient(ellipse at top right, #a78bfa, transparent 70%); }
.valueEngine.cyan[b-dn79sfmet3]::after   { background: radial-gradient(ellipse at top right, #22d3ee, transparent 70%); }

.veHead[b-dn79sfmet3] {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
    flex-wrap: wrap; gap: 8px;
    position: relative;
    /* z-index 10 so this row's stacking context — and the league dropdown
       menu rendered inside it — sits above the hero (.veHero z-index: 1),
       stats grid, and pick-history list that come after it in source order.
       Without this lift, the absolutely-positioned menu was rendering BEHIND
       the page content even though it was visible on screen, which meant the
       only clickable parts of each row were the spots where no underlying
       text occluded them. Lifting the parent stacking context fixes both the
       visual layering and the dead-zones-in-click-targets issue at once. */
    z-index: 10;
}
.veHeadLeft[b-dn79sfmet3]  { display: flex; align-items: center; gap: 10px; }
.veHeadRight[b-dn79sfmet3] { display: flex; align-items: center; gap: 10px; }

/* Stake-per-pick input row. Sits between the title and the ROI hero, on its
   own line so the input doesn't compete with the title for horizontal space.
   Bound to _stakePerPick — typing scales every $ value in the panel live. */
.veStakeBar[b-dn79sfmet3] {
    display: flex; align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    position: relative; z-index: 1;
}
.veStakeLabel[b-dn79sfmet3] {
    font-size: 0.6rem; font-weight: 700;
    color: var(--mutedFaint);
    text-transform: uppercase; letter-spacing: 0.08em;
}
.veStakeInputWrap[b-dn79sfmet3] {
    display: inline-flex; align-items: baseline;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--borderSoft);
    border-radius: 6px;
    padding: 4px 8px 4px 8px;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.veStakeInputWrap:hover[b-dn79sfmet3] { background: rgba(255, 255, 255, 0.06); }
.veStakeInputWrap:focus-within[b-dn79sfmet3] { border-color: #60a5fa; }
.valueEngine.amber  .veStakeInputWrap:focus-within[b-dn79sfmet3] { border-color: #fbbf24; }
.valueEngine.purple .veStakeInputWrap:focus-within[b-dn79sfmet3] { border-color: #a78bfa; }
.valueEngine.cyan   .veStakeInputWrap:focus-within[b-dn79sfmet3] { border-color: #22d3ee; }
.veStakeCurrency[b-dn79sfmet3] {
    /* Renders as the unit suffix ("u") after the stake input now that the
       Value Engine is denominated in units instead of dollars — see the
       "units" framing in Home.razor. Margin flipped from right→left so the
       suffix has 2px of breathing room from the number. */
    color: var(--mutedFaint); font-weight: 800;
    font-size: 0.8rem;
    margin-left: 2px;
}
.veStakeInput[b-dn79sfmet3] {
    background: transparent;
    border: 0;
    color: var(--text);
    font-family: inherit;
    font-weight: 800;
    font-size: 0.85rem;
    width: 58px;
    padding: 0;
    text-align: left;
    -moz-appearance: textfield;
}
.veStakeInput[b-dn79sfmet3]::-webkit-outer-spin-button,
.veStakeInput[b-dn79sfmet3]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.veStakeInput:focus[b-dn79sfmet3] { outline: none; }
.veTitle[b-dn79sfmet3] {
    font-size: 0.7rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: #60a5fa;
}
.valueEngine.amber  .veTitle[b-dn79sfmet3] { color: #fbbf24; }
.valueEngine.purple .veTitle[b-dn79sfmet3] { color: #a78bfa; }
.valueEngine.cyan   .veTitle[b-dn79sfmet3] { color: #22d3ee; }

.veSubtitle[b-dn79sfmet3] {
    font-size: 0.62rem; color: var(--mutedFaint);
    text-transform: uppercase; letter-spacing: 0.08em;
}

/* League-scope filter sitting alongside the subtitle in veHeadRight. Native
   <select> so it inherits OS-level keyboard / a11y. Styled to feel like a
   chip — small caps label, faint background, no borders — so it visually
   belongs in the Value Engine head row instead of looking grafted on. */
.veLeagueSelect[b-dn79sfmet3] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: color-mix(in srgb, var(--text) 5%, transparent);
    color: var(--text);
    border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    border-radius: 8px;
    padding: 5px 26px 5px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23808a9a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: border-color 120ms ease, background-color 120ms ease;
}
.veLeagueSelect:hover[b-dn79sfmet3] {
    border-color: color-mix(in srgb, var(--text) 24%, transparent);
    background-color: color-mix(in srgb, var(--text) 8%, transparent);
}
.veLeagueSelect:focus[b-dn79sfmet3] {
    outline: none;
    border-color: color-mix(in srgb, var(--text) 32%, transparent);
}
.veLeagueSelect option[b-dn79sfmet3] {
    background: var(--panel);
    color: var(--text);
}
@media (max-width: 540px) {
    .veLeagueSelect[b-dn79sfmet3] {
        font-size: 0.68rem;
        padding: 4px 22px 4px 8px;
    }
}

/* ── League-scope dropdown ──
   Custom (not native <select>) so we can put league logos + colored ROI
   into the option list. Same `@onfocusout` + 200ms delay close pattern as
   the Picks page model dropdown so the option click registers before the
   wrapper loses focus.
   Trigger is a chip. Menu is positioned absolutely below the trigger with
   a generous max-height so 10+ leagues paginate via scroll instead of
   pushing the rest of the panel down. */
.veLeagueDropdown[b-dn79sfmet3] {
    position: relative;
    outline: none;
}
.veLeagueDropdownTrigger[b-dn79sfmet3] {
    appearance: none;
    background: color-mix(in srgb, var(--text) 5%, transparent);
    color: var(--text);
    border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    border-radius: 9px;
    padding: 7px 10px 7px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    line-height: 1.15;
    white-space: nowrap;
    min-width: 150px;
    transition: border-color 120ms ease, background-color 120ms ease;
}
.veLeagueDropdownTrigger:hover[b-dn79sfmet3] {
    border-color: color-mix(in srgb, var(--text) 24%, transparent);
    background: color-mix(in srgb, var(--text) 8%, transparent);
}
.veLeagueDropdownOpen > .veLeagueDropdownTrigger[b-dn79sfmet3] {
    border-color: color-mix(in srgb, var(--text) 32%, transparent);
    background: color-mix(in srgb, var(--text) 9%, transparent);
}
.veLeagueDropdownTriggerIcon[b-dn79sfmet3] {
    width: 18px; height: 18px;
    border-radius: 4px;
    object-fit: contain;
    flex: 0 0 auto;
}
.veLeagueDropdownTriggerName[b-dn79sfmet3] {
    flex: 0 0 auto;
}
.veLeagueDropdownTriggerRoi[b-dn79sfmet3] {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--text) 7%, transparent);
}
.veLeagueDropdownChev[b-dn79sfmet3] {
    color: var(--mutedFaint);
    margin-left: 2px;
    transition: transform 160ms ease;
    flex: 0 0 auto;
}
.veLeagueDropdownOpen > .veLeagueDropdownTrigger .veLeagueDropdownChev[b-dn79sfmet3] {
    transform: rotate(180deg);
}

/* Menu — absolutely positioned below the trigger, right-aligned to the
   trigger so it doesn't punch outside the panel on the right side. */
.veLeagueDropdownMenu[b-dn79sfmet3] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 280px;
    max-width: 360px;
    max-height: 360px;
    overflow-y: auto;
    background: var(--panel);
    border: 1px solid var(--borderSoft);
    border-radius: 10px;
    box-shadow: 0 14px 32px rgba(0,0,0,0.32);
    padding: 4px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 2px;
    outline: none;
}
.veLeagueDropdownOption[b-dn79sfmet3] {
    appearance: none;
    background: transparent;
    color: var(--text);
    border: 0;
    border-radius: 7px;
    padding: 8px 10px;
    text-align: left;
    cursor: pointer;
    display: grid;
    grid-template-columns: 20px 1fr auto auto;
    gap: 10px;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.15;
    transition: background-color 100ms ease;
}
.veLeagueDropdownOption:hover[b-dn79sfmet3] {
    background: color-mix(in srgb, var(--text) 8%, transparent);
}
.veLeagueDropdownOptionActive[b-dn79sfmet3] {
    background: color-mix(in srgb, var(--text) 11%, transparent);
}
.veLeagueDropdownOptionAll[b-dn79sfmet3] {
    /* "All Leagues" option has no logo / picks / ROI — collapse the
       grid columns so the label uses the full row width. */
    grid-template-columns: 1fr;
    font-weight: 700;
}
.veLeagueDropdownOptionIcon[b-dn79sfmet3] {
    width: 20px; height: 20px;
    border-radius: 4px;
    object-fit: contain;
}
.veLeagueDropdownOptionName[b-dn79sfmet3] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.veLeagueDropdownOptionBets[b-dn79sfmet3] {
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--mutedFaint);
    text-transform: lowercase;
    letter-spacing: 0.01em;
}
.veLeagueDropdownOptionRoi[b-dn79sfmet3] {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--text) 6%, transparent);
    min-width: 56px;
    text-align: right;
}

/* Shared ROI color helpers — applied on both trigger pill and menu options. */
.veLeagueRoiPos[b-dn79sfmet3] { color: #10b981; }
.veLeagueRoiNeg[b-dn79sfmet3] { color: #f87171; }

/* Mobile: trigger stays the same shape but tightens; menu widens to use
   most of the viewport so logos + ROI don't collide. */
@media (max-width: 720px) {
    .veLeagueDropdownTrigger[b-dn79sfmet3] {
        font-size: 0.74rem;
        padding: 6px 9px 6px 11px;
        min-width: 0;
    }
    .veLeagueDropdownMenu[b-dn79sfmet3] {
        min-width: 240px;
        max-width: calc(100vw - 32px);
    }
}
@media (max-width: 540px) {
    .veLeagueDropdownTrigger[b-dn79sfmet3] { font-size: 0.7rem; gap: 6px; }
    .veLeagueDropdownTriggerIcon[b-dn79sfmet3] { width: 16px; height: 16px; }
    .veLeagueDropdownTriggerRoi[b-dn79sfmet3] { font-size: 0.64rem; padding: 1px 5px; }
    .veLeagueDropdownOption[b-dn79sfmet3] { font-size: 0.72rem; padding: 7px 8px; gap: 8px; }
    .veLeagueDropdownOptionIcon[b-dn79sfmet3] { width: 18px; height: 18px; }
    .veLeagueDropdownOptionBets[b-dn79sfmet3] { font-size: 0.6rem; }
    .veLeagueDropdownOptionRoi[b-dn79sfmet3] { font-size: 0.66rem; padding: 1px 5px; min-width: 48px; }
}

.veHelp[b-dn79sfmet3] {
    width: 14px; height: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.7rem; color: var(--mutedFaint); cursor: help;
    border-radius: 50%; border: 1px solid var(--borderSoft);
    font-style: italic;
}

.veHero[b-dn79sfmet3] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: center;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}
.veHeroLeft[b-dn79sfmet3] { display: flex; flex-direction: column; gap: 4px; }
.veRoi[b-dn79sfmet3] {
    font-size: 2.6rem; font-weight: 900; line-height: 1;
    letter-spacing: -0.01em;
}
.veRoiSub[b-dn79sfmet3] {
    font-size: 0.92rem; color: var(--textSoft); font-weight: 600;
}
.veRoiSub strong[b-dn79sfmet3] { font-weight: 800; }

/* Hit-rate donut — radius 15.915 gives circumference ≈ 100 so
   stroke-dasharray maps directly to percentages. */
.veDonutWrap[b-dn79sfmet3] {
    position: relative; width: 84px; height: 84px; flex-shrink: 0;
}
.veDonut[b-dn79sfmet3] { width: 100%; height: 100%; transform: rotate(-90deg); }
.veDonutTrack[b-dn79sfmet3] { fill: none; stroke: rgba(255,255,255,0.07); stroke-width: 3.5; }
.veDonutFill[b-dn79sfmet3] {
    fill: none; stroke-width: 3.5; stroke-linecap: round;
    transition: stroke-dasharray 0.6s ease;
}
.veDonutLabel[b-dn79sfmet3] {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    line-height: 1;
}
.veDonutLabel .vdNum[b-dn79sfmet3] { font-size: 1.05rem; font-weight: 900; }
.veDonutLabel .vdK[b-dn79sfmet3] {
    font-size: 0.5rem; color: var(--mutedFaint); margin-top: 2px;
    text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
}

.veStats[b-dn79sfmet3] {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--borderSoft);
    margin-bottom: 12px;
    position: relative; z-index: 1;
}
.veStats .veK[b-dn79sfmet3] {
    font-size: 0.58rem; font-weight: 700; color: var(--mutedFaint);
    text-transform: uppercase; letter-spacing: 0.08em; line-height: 1;
}
.veStats .veV[b-dn79sfmet3] {
    font-size: 0.95rem; font-weight: 800; color: var(--textSoft);
    margin-top: 4px;
}

.veFooter[b-dn79sfmet3] {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    position: relative; z-index: 1;
}
.veSplitCard[b-dn79sfmet3] {
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--borderSoft);
    border-radius: 8px;
    padding: 10px 14px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
}
/* Button-as-tile variant — used when the SplitCard toggles the per-card
   Series/Games scope filter. Resets the default <button> chrome so it visually
   matches the non-clickable card while still being keyboard-focusable. */
.veSplitCardClickable[b-dn79sfmet3] {
    width: 100%;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: left;
    transition: border-color 0.12s ease, background-color 0.12s ease, transform 0.12s ease;
}
.veSplitCardClickable:hover[b-dn79sfmet3] {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
}
.veSplitCardClickable:focus-visible[b-dn79sfmet3] {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}
/* Active state — the tile reflects the currently-applied scope filter.
   Picks up the model card's accent color via currentColor on the border so
   the highlight matches FastTree blue / LightGBM amber / PCA purple / Consensus
   cyan without needing per-model rules. */
.veSplitCardActive[b-dn79sfmet3] {
    border-color: currentColor;
    background: rgba(96, 165, 250, 0.07);
    box-shadow: inset 0 0 0 1px currentColor;
}
.veSplitCardActive .veSplitKind[b-dn79sfmet3] { color: currentColor; }

.veSplitLeft[b-dn79sfmet3] { display: flex; flex-direction: column; gap: 2px; }
.veSplitKind[b-dn79sfmet3] {
    font-size: 0.6rem; font-weight: 800; color: var(--mutedFaint);
    text-transform: uppercase; letter-spacing: 0.08em;
}
.veSplitSub[b-dn79sfmet3] { font-size: 0.72rem; color: var(--muted); }
/* Per-scope ROI percentage rendered inline after the W/picks count.
   Inherits pos/neg classes (green/red) from the same .valueEngine .pos
   / .neg rules that color the hero ROI — keeps the tile's numerical
   feedback visually consistent with the main +X.X% above it. */
.veSplitRoi[b-dn79sfmet3] { font-weight: 700; margin-left: 4px; }
.veSplitValue[b-dn79sfmet3] { font-size: 1.1rem; font-weight: 900; line-height: 1; }

/* Tile header row — wraps the SERIES/GAMES label and the optional BEST tag
   side-by-side so the tag sits inline with the kind, not on its own line. */
.veSplitKindRow[b-dn79sfmet3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* BEST PERFORMER tag — only rendered on the tile whose model has the highest
   ROI in that scope (sole-leader only — ties suppress the tag). Soft green
   pill matching the rest of the ROI-positive palette so the visual hierarchy
   stays consistent with the +X.X% / +Yu values inside the tile. */
.veSplitBestTag[b-dn79sfmet3] {
    display: inline-block;
    padding: 1px 6px;
    background: rgba(34, 197, 94, 0.18);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4;
    white-space: nowrap;
}

/* Tile background highlight for the BEST PERFORMER. Subtle green wash + soft
   green border so the eye picks it out from the neighboring tile without
   shouting. Composes with veSplitCardActive: when the user clicks the
   best-performer tile to filter, the active treatment (inset shadow + bolder
   border) layers on top so both states stay readable at a glance. */
.veSplitCardBest[b-dn79sfmet3] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(22, 163, 74, 0.04) 100%);
    border-color: rgba(34, 197, 94, 0.35);
}
.veSplitCardBest:hover[b-dn79sfmet3] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.12) 0%, rgba(22, 163, 74, 0.06) 100%);
    border-color: rgba(34, 197, 94, 0.55);
}

/* Signed-value colors. Used inline by the Razor template on the
   ROI percent, the net-units pill, and each Series/Game value. */
.valueEngine .pos[b-dn79sfmet3] { color: #10b981; }
.valueEngine .neg[b-dn79sfmet3] { color: #f87171; }

/* ── Value Engine "picks history" list ──
   Per-model paginated list (5/page) of the historical +EV bets that fed
   the ROI numbers above. Lives inside .valueEngine, after the stats grid
   and footer, before the disclaimer. Each row is an anchor link to the
   detail page (match or live), styled to look like a tight read-only
   table rather than a clickable card so it visually attaches to the
   parent card. */
.vePicksList[b-dn79sfmet3] {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--borderSoft);
    position: relative; z-index: 1;
}
.vePicksHeader[b-dn79sfmet3] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
}
.vePicksTitle[b-dn79sfmet3] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
}
.vePicksCount[b-dn79sfmet3] {
    font-size: 0.7rem;
    color: var(--muted);
}

.vePickRow[b-dn79sfmet3] {
    display: grid;
    grid-template-columns: 56px minmax(0, 1.6fr) minmax(0, 1.1fr) 88px 96px;
    gap: 10px 14px;
    align-items: center;
    padding: 9px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.04);
    margin-bottom: 6px;
    text-decoration: none;
    color: inherit;
    transition: background 0.12s ease, border-color 0.12s ease;
}
/* When rendered as a <button> (the click-to-navigate variant) we need to strip
   the default browser button styling so it visually matches the legacy <a> row.
   Same grid + hover treatment, plus text-align: inherit so the cells flow LTR
   like the link version. */
.vePickRowBtn[b-dn79sfmet3] {
    width: 100%;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
}
.vePickRowBtn:disabled[b-dn79sfmet3] {
    cursor: progress;
    opacity: 0.7;
}
.vePickRow:hover[b-dn79sfmet3] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}
/* Inline spinner shown in the date cell while the destination page loads.
   forceLoad navigation tears down this page, so the spinner just needs to
   tide the user over until the browser swaps documents. */
.vePickSpinner[b-dn79sfmet3] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: vePickSpin-b-dn79sfmet3 0.7s linear infinite;
    opacity: 0.7;
}
@keyframes vePickSpin-b-dn79sfmet3 {
    to { transform: rotate(360deg); }
}

.vePickDate[b-dn79sfmet3] {
    font-size: 0.72rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.vePickTeams[b-dn79sfmet3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.vePickTeam[b-dn79sfmet3] {
    font-size: 0.82rem;
    color: var(--text);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}
.vePickTeam.vePickTeamChosen[b-dn79sfmet3] {
    color: #10b981;
    font-weight: 700;
}
.vePickVs[b-dn79sfmet3] {
    font-size: 0.65rem;
    color: var(--mutedFaint);
    margin: 0 4px;
    display: inline-block;
}
.vePickTeams .vePickTeam + .vePickVs + .vePickTeam[b-dn79sfmet3] { display: inline-block; }
.vePickTeams[b-dn79sfmet3] { display: block; line-height: 1.35; }
.vePickMeta[b-dn79sfmet3] {
    display: block;
    font-size: 0.65rem;
    color: var(--muted);
    margin-top: 2px;
}

.vePickPick[b-dn79sfmet3] { display: flex; flex-direction: column; gap: 2px; }
.vePickPickLabel[b-dn79sfmet3], .vePickEvLabel[b-dn79sfmet3] {
    font-size: 0.58rem;
    color: var(--mutedFaint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.vePickPickTeam[b-dn79sfmet3] {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text);
}
.vePickPickOdds[b-dn79sfmet3] {
    font-size: 0.7rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.vePickEv[b-dn79sfmet3] { display: flex; flex-direction: column; gap: 2px; }
.vePickEvVal[b-dn79sfmet3] {
    font-size: 0.85rem;
    font-weight: 800;
    color: #10b981;
    font-variant-numeric: tabular-nums;
}

.vePickResult[b-dn79sfmet3] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.vePickResultBadge[b-dn79sfmet3] {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 4px;
}
.vePickResultWin .vePickResultBadge[b-dn79sfmet3] {
    background: rgba(16, 185, 129, 0.18);
    color: #10b981;
}
.vePickResultLoss .vePickResultBadge[b-dn79sfmet3] {
    background: rgba(248, 113, 113, 0.18);
    color: #f87171;
}
.vePickProfit[b-dn79sfmet3] { font-size: 0.78rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.vePickProfit.pos[b-dn79sfmet3] { color: #10b981; }
.vePickProfit.neg[b-dn79sfmet3] { color: #f87171; }

.vePicksPager[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--borderSoft);
}
.vePagerBtn[b-dn79sfmet3] {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    border: 1px solid var(--borderSoft);
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.vePagerBtn:hover:not(:disabled)[b-dn79sfmet3] {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--border);
}
.vePagerBtn:disabled[b-dn79sfmet3] {
    opacity: 0.4;
    cursor: not-allowed;
}
.vePagerLabel[b-dn79sfmet3] {
    font-size: 0.72rem;
    color: var(--muted);
}

/* Small print at the bottom of the panel: legal/regulatory cover note.
   "Past results do not guarantee future returns. For analysis only." —
   the same disclaimer regulators in regulated betting jurisdictions
   typically require when historical P/L is shown. Visible by default
   (not opt-in) and styled muted so it doesn't compete with the hero. */
.veDisclaimer[b-dn79sfmet3] {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--borderSoft);
    font-size: 0.62rem;
    color: var(--mutedFaint);
    line-height: 1.4;
    text-align: left;
    position: relative; z-index: 1;
}

/* Mobile (≤ 640px): keep ROI text + donut side-by-side but shrink the
   donut and drop the ROI font a notch so the text never wraps into
   the donut's column. Stats collapse to 2 columns; footer stacks. */
@media (max-width: 640px) {
    .valueEngine[b-dn79sfmet3] { padding: 16px; }
    .veHero[b-dn79sfmet3] { gap: 12px; align-items: start; }
    .veDonutWrap[b-dn79sfmet3] { width: 64px; height: 64px; }
    .veDonutLabel .vdNum[b-dn79sfmet3] { font-size: 0.9rem; }
    .veRoi[b-dn79sfmet3] { font-size: 1.85rem; }
    .veRoiSub[b-dn79sfmet3] { font-size: 0.82rem; line-height: 1.35; }
    .veStats[b-dn79sfmet3] { grid-template-columns: repeat(2, 1fr); gap: 12px 16px; }
    .veFooter[b-dn79sfmet3] { grid-template-columns: 1fr; gap: 8px; }
    .veHead[b-dn79sfmet3] { margin-bottom: 10px; }
    .veSubtitle[b-dn79sfmet3] { font-size: 0.58rem; }

    /* Picks list mobile: collapse the 5-column row to a 2-row layout —
       row 1 = teams + EV/result, row 2 = pick + odds + date.
       Keeps date and result-badge visible without horizontal squeeze. */
    .vePickRow[b-dn79sfmet3] {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        gap: 6px 10px;
    }
    .vePickTeams[b-dn79sfmet3] { grid-column: 1; grid-row: 1; }
    .vePickResult[b-dn79sfmet3] { grid-column: 2; grid-row: 1; }
    .vePickPick[b-dn79sfmet3] { grid-column: 1; grid-row: 2; flex-direction: row; align-items: baseline; gap: 6px; }
    .vePickEv[b-dn79sfmet3] { grid-column: 2; grid-row: 2; }
    .vePickDate[b-dn79sfmet3] { display: none; }
    .vePickPickLabel[b-dn79sfmet3] { display: none; }
    .vePickEvLabel[b-dn79sfmet3] { display: none; }
    .vePickRow[b-dn79sfmet3] { padding: 10px 12px; }
}
@media (max-width: 360px) {
    .valueEngine[b-dn79sfmet3]::after { display: none; }
    .veRoi[b-dn79sfmet3] { font-size: 1.65rem; }
    .veDonutWrap[b-dn79sfmet3] { width: 56px; height: 56px; }
}

/* ── Confidence-Level Mini Cards ─────────────────────────── */

.confSection[b-dn79sfmet3] {
    margin-bottom: 16px;
}

.confTypeLabel[b-dn79sfmet3] {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--mutedFaint);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    margin-top: 12px;
}

.confTypeLabel:first-child[b-dn79sfmet3] {
    margin-top: 0;
}

.confCards[b-dn79sfmet3] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.confMiniCard[b-dn79sfmet3] {
    text-align: center;
    padding: 12px 8px;
    background: var(--panelDeep);
    border: 1px solid var(--borderSoft);
    border-radius: 10px;
}

.confMiniCard.confMiniEmpty[b-dn79sfmet3] {
    opacity: 0.4;
}

.confMiniThreshold[b-dn79sfmet3] {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--mutedFaint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}

.confMiniValue[b-dn79sfmet3] {
    font-size: 1.4rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 6px;
}
.confMiniValue.blue[b-dn79sfmet3] { color: #60a5fa; }
.confMiniValue.amber[b-dn79sfmet3] { color: #fbbf24; }
.confMiniValue.purple[b-dn79sfmet3] { color: #a78bfa; }
.confMiniValue.cyan[b-dn79sfmet3] { color: #22d3ee; }

.confMiniProgress[b-dn79sfmet3] {
    width: 70%;
    height: 4px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    margin: 0 auto 6px;
    overflow: hidden;
}

.confMiniFill[b-dn79sfmet3] {
    height: 100%;
    border-radius: 2px;
}
.confMiniFill.blue[b-dn79sfmet3] { background: #60a5fa; }
.confMiniFill.amber[b-dn79sfmet3] { background: #fbbf24; }
.confMiniFill.purple[b-dn79sfmet3] { background: #a78bfa; }
.confMiniFill.cyan[b-dn79sfmet3] { background: #22d3ee; }

.confMiniFraction[b-dn79sfmet3] {
    font-size: 0.7rem;
    color: var(--muted);
    font-weight: 500;
}

/* ── Meta-Learner Activity Panel (LightGBM / PCA Sweep) ──────
   Sits between Top Leagues and Inner Tabs in the spotlight card. Reports how often
   the stacking meta-learner overrode the base model's directional pick (flips) and
   how often it pulled a confident pick to the uncertain band. Two columns per row:
   series (BO3/BO5 outcome) and match (per-game draft prediction). */
.metaActivityPanel[b-dn79sfmet3] {
    margin-bottom: 20px;
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px solid var(--borderSoft);
    background: rgba(0,0,0,0.18);
}
.metaActivityHeader[b-dn79sfmet3] {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
    margin-bottom: 10px;
}
.metaActivityRows[b-dn79sfmet3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.metaActivityRow[b-dn79sfmet3] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.metaActivityRowHeader[b-dn79sfmet3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.metaActivityLabel[b-dn79sfmet3] {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
}
.metaActivitySublabel[b-dn79sfmet3] {
    font-size: 0.72rem;
    color: var(--mutedFaint);
    font-style: italic;
}
.metaActivityValues[b-dn79sfmet3] {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.metaActivityCell[b-dn79sfmet3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-variant-numeric: tabular-nums;
}
.metaActivityCellLabel[b-dn79sfmet3] {
    text-transform: uppercase;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: 0.04em;
}
.metaActivityCellValue[b-dn79sfmet3] {
    font-size: 0.86rem;
    font-weight: 700;
}
.metaActivityCellValue.amber[b-dn79sfmet3]  { color: #fbbf24; }
.metaActivityCellValue.purple[b-dn79sfmet3] { color: #a78bfa; }


/* ── Top Leagues Strip ──────────────────────────────────── */

.topLeaguesStrip[b-dn79sfmet3] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    padding: 10px 14px;
    background: rgba(0,0,0,0.15);
    border-radius: 8px;
}

.topLeaguesLabel[b-dn79sfmet3] {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--mutedFaint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
    padding-top: 4px;
}

.topLeaguesList[b-dn79sfmet3] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
}

.topLeagueChip[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
}

.topLeagueIcon[b-dn79sfmet3] {
    width: 16px;
    height: 16px;
    object-fit: contain;
    opacity: 0.8;
    flex-shrink: 0;
}

.topLeagueName[b-dn79sfmet3] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #cbd5e1;
    white-space: nowrap;
}

/* ── Inner Tabs ─────────────────────────────────────────── */

.innerTabs[b-dn79sfmet3] {
    display: flex;
    gap: 4px;
    padding: 3px;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    margin-bottom: 16px;
}
.innerTab[b-dn79sfmet3] {
    flex: 1;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: rgba(255,255,255,0.45);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}
.innerTab:hover[b-dn79sfmet3] { color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.04); }
.innerTab.active[b-dn79sfmet3] { background: rgba(59,130,246,0.18); color: #93c5fd; }
.accent-amber .innerTab.active[b-dn79sfmet3] { background: rgba(245,158,11,0.18); color: #fcd34d; }
.accent-purple .innerTab.active[b-dn79sfmet3] { background: rgba(139,92,246,0.18); color: #c4b5fd; }
.accent-cyan .innerTab.active[b-dn79sfmet3] { background: rgba(34,211,238,0.18); color: #67e8f9; }

.innerTabDisabled[b-dn79sfmet3] {
    opacity: 0.35;
    cursor: not-allowed !important;
    position: relative;
}
.innerTabDisabled:hover[b-dn79sfmet3] {
    background: transparent !important;
    color: rgba(255,255,255,0.45) !important;
}

/* ── Bar Chart Metrics ──────────────────────────────────── */

.barChartMetrics[b-dn79sfmet3] { display: flex; flex-direction: column; gap: 10px; }

.barRow[b-dn79sfmet3] {
    display: grid;
    grid-template-columns: 110px 1fr 65px;
    gap: 12px;
    align-items: center;
}
.barLabel[b-dn79sfmet3] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
}
.barTrack[b-dn79sfmet3] {
    height: 26px;
    background: var(--panelDeep);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--borderSoft);
}
.barFill[b-dn79sfmet3] {
    height: 100%;
    border-radius: 6px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.barFill.blue[b-dn79sfmet3] { background: rgba(96,165,250,0.35); }
.barFill.amber[b-dn79sfmet3] { background: rgba(251,191,36,0.35); }
.barFill.purple[b-dn79sfmet3] { background: rgba(167,139,250,0.35); }

.barValue[b-dn79sfmet3] {
    font-size: 0.88rem;
    font-weight: 800;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.barValue.blue[b-dn79sfmet3] { color: #60a5fa; }
.barValue.amber[b-dn79sfmet3] { color: #fbbf24; }
.barValue.purple[b-dn79sfmet3] { color: #a78bfa; }

.sampleRow[b-dn79sfmet3] {
    display: flex;
    gap: 20px;
    padding: 10px 0;
    border-top: 1px solid var(--borderSoft);
    margin-top: 6px;
}
.sampleItem[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--mutedFaint);
}
.sampleVal[b-dn79sfmet3] { font-weight: 700; color: var(--muted); }

/* ── League List (Predictions tab) ──────────────────────── */

.leagueList[b-dn79sfmet3] { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.leagueItem[b-dn79sfmet3] {
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    overflow: hidden;
}
.leagueItemHeader[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: rgba(0,0,0,0.12);
    color: inherit;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease;
}
.leagueItemHeader:hover[b-dn79sfmet3] { background: rgba(0,0,0,0.2); }
.leagueItemIcon[b-dn79sfmet3] {
    width: 16px;
    height: 16px;
    object-fit: contain;
    opacity: 0.8;
    flex-shrink: 0;
}
.leagueItemName[b-dn79sfmet3] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #cbd5e1;
    flex: 1;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.leagueItemBody[b-dn79sfmet3] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    background: rgba(0,0,0,0.08);
}

.rpAccChevron[b-dn79sfmet3] {
    color: rgba(148,163,184,0.4);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.rpAccChevronOpen[b-dn79sfmet3] {
    transform: rotate(180deg);
}

/* ── Model Insight Tags ─────────────────────────────────── */

.modelInsightTag[b-dn79sfmet3] {
    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[b-dn79sfmet3] {
    background: rgba(74,222,128,0.15);
    color: #4ade80;
    border: 1px solid rgba(74,222,128,0.3);
}

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

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

/* Total Maps per-model EV (value vs the captured Over/Under price). */
.tagTmEvPos[b-dn79sfmet3] {
    background: rgba(34,197,94,0.15);
    color: #4ade80;
    border: 1px solid rgba(34,197,94,0.3);
}

.tagTmEvNeg[b-dn79sfmet3] {
    background: rgba(148,163,184,0.12);
    color: #94a3b8;
    border: 1px solid rgba(148,163,184,0.25);
}

.recentUncertainTag[b-dn79sfmet3] {
    font-size: 0.45rem;
    padding: 0px 4px;
}

.recentModelPredUncertain[b-dn79sfmet3] {
    opacity: 0.6;
}

/* ── Model Insight Cards ────────────────────────────────── */

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

.insightCard[b-dn79sfmet3] {
    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[b-dn79sfmet3] {
    border-top-color: var(--ins-color, rgba(255,255,255,0.1));
    background: rgba(0,0,0,0.2);
}

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

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

.insightCardTags[b-dn79sfmet3] {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
}

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

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

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

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

.insightCardStatConfHelp[b-dn79sfmet3] {
    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[b-dn79sfmet3] {
    color: #4ade80;
}

.modelBadge[b-dn79sfmet3] {
    font-size: 0.6rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badgeBasic[b-dn79sfmet3] {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.badgeNiche[b-dn79sfmet3] {
    background: linear-gradient(135deg, #b45309, #d97706, #f59e0b);
    color: #fff;
    border: 1px solid rgba(245, 158, 11, 0.4);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.badgePremium[b-dn79sfmet3] {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff;
    border: 1px solid rgba(139, 92, 246, 0.4);
}

/* Model description */
.modelDescription[b-dn79sfmet3] {
    font-size: 0.88rem;
    color: var(--textSoft);
    line-height: 1.7;
    margin: 0 0 16px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.02);
    border-left: 3px solid var(--blue);
    border-radius: 0 6px 6px 0;
    font-style: italic;
}

.accent-amber .modelDescription[b-dn79sfmet3] {
    border-left-color: #f59e0b;
    background: rgba(245, 158, 11, 0.04);
}

.accent-purple .modelDescription[b-dn79sfmet3] {
    border-left-color: #a78bfa;
    background: rgba(167, 139, 250, 0.04);
}

.accent-cyan .modelDescription[b-dn79sfmet3] {
    border-left-color: #22d3ee;
    background: rgba(34, 211, 238, 0.04);
}

/* Each model's secondary "character" tag uses the same hue family as the model
   name itself so the card reads as one consistent color story. PREMIUM (gold)
   sits next to whichever themed tag the model carries. */
.badgeMetaSavvy[b-dn79sfmet3] {
    background: linear-gradient(135deg, #b45309, #d97706, #f59e0b);
    color: #fff;
    border: 1px solid rgba(245, 158, 11, 0.4);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.badgeHyperTuned[b-dn79sfmet3] {
    background: linear-gradient(135deg, #6d28d9, #8b5cf6, #a78bfa);
    color: #fff;
    border: 1px solid rgba(167, 139, 250, 0.4);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.badgeRiskBalanced[b-dn79sfmet3] {
    background: linear-gradient(135deg, #0e7490, #06b6d4, #22d3ee);
    color: #fff;
    border: 1px solid rgba(34, 211, 238, 0.4);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
/* PREMIUM tag — deeper, jewel-toned purple that's clearly purple (not pink, not
   fuchsia) but a half-shade darker / more saturated than PCA Sweep's softer
   #a78bfa-leaning purple. The two can sit next to each other without reading
   as the same gradient. Indigo→violet→amethyst gives a royal-purple chrome. */
.badgePremium[b-dn79sfmet3] {
    background: linear-gradient(135deg, #4c1d95, #6d28d9, #9333ea);
    color: #fff;
    border: 1px solid rgba(147, 51, 234, 0.55);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 0 8px rgba(196, 181, 253, 0.18);
}
.badgeConsensus[b-dn79sfmet3] {
    background: linear-gradient(135deg, #0891b2, #22d3ee);
    color: #fff;
    border: 1px solid rgba(34, 211, 238, 0.4);
}

.metricsUnknown[b-dn79sfmet3] {
    padding: 16px;
    text-align: center;
    color: var(--muted);
    font-size: 0.85rem;
    font-style: italic;
    background: var(--panelSoft);
    border-radius: 8px;
}

/* ── Recent Predictions in Model Cards ────────────────────── */

.rpAggregateStats[b-dn79sfmet3] {
    display: flex;
    gap: 16px;
    margin-top: 8px;
    padding: 6px 10px;
    background: rgba(0,0,0,0.15);
    border-radius: 6px;
}

.rpAggregateStat[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
}

.rpAggLabel[b-dn79sfmet3] {
    color: rgba(255,255,255,0.5);
    font-weight: 500;
}

.rpAggValue[b-dn79sfmet3] {
    font-weight: 600;
}

.rpAggGood[b-dn79sfmet3] {
    color: #4ade80;
}

.rpAggBad[b-dn79sfmet3] {
    color: #f87171;
}

.recentPredsList[b-dn79sfmet3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.recentPredSeries[b-dn79sfmet3] {
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 10px 12px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.recentPredSeriesClickable[b-dn79sfmet3] {
    cursor: pointer;
}

.recentPredSeriesClickable:hover[b-dn79sfmet3] {
    border-color: rgba(96,165,250,0.3);
    background: rgba(37,99,235,0.06);
}

.rpSeriesHeader[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.rpTeams[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1;
    min-width: 0;
}

.rpLogo[b-dn79sfmet3] {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 3px;
    flex-shrink: 0;
}

.rpTeamName[b-dn79sfmet3] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rpWinner[b-dn79sfmet3] {
    color: #e2e8f0;
}

.rpScore[b-dn79sfmet3] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.04em;
    flex-shrink: 0;
    padding: 0 2px;
}

.rpAccuracy[b-dn79sfmet3] {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    flex-shrink: 0;
    letter-spacing: 0.03em;
}

.rpAccuracyCompact[b-dn79sfmet3] {
    font-size: 0.62rem;
    padding: 1px 6px;
}

.rpPerfect[b-dn79sfmet3] {
    background: rgba(74,222,128,0.15);
    color: #4ade80;
    border: 1px solid rgba(74,222,128,0.3);
}

.rpGood[b-dn79sfmet3] {
    background: rgba(250,204,21,0.12);
    color: #fbbf24;
    border: 1px solid rgba(250,204,21,0.2);
}

.rpBad[b-dn79sfmet3] {
    background: rgba(248,113,113,0.12);
    color: #f87171;
    border: 1px solid rgba(248,113,113,0.2);
}

.rpPredictions[b-dn79sfmet3] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rpPredRow[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    border-radius: 4px;
    background: rgba(255,255,255,0.02);
}

.rpPredType[b-dn79sfmet3] {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    width: 52px;
    flex-shrink: 0;
}

.rpPredWinner[b-dn79sfmet3] {
    margin-left: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #cbd5e1;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rpPredConf[b-dn79sfmet3] {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--muted);
    flex-shrink: 0;
}

.rpPredResult[b-dn79sfmet3] {
    font-size: 0.75rem;
    font-weight: 700;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.rpCorrect[b-dn79sfmet3] {
    color: #4ade80;
}

.rpWrong[b-dn79sfmet3] {
    color: #f87171;
}

.rpUncertain[b-dn79sfmet3] {
    color: #fbbf24;
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: help;
    white-space: nowrap;
}

.rpPredRowSeries[b-dn79sfmet3] {
    background: rgba(96,165,250,0.12);
    border-left: 2px solid rgba(96,165,250,0.5);
    padding-left: 5px;
}

/* (Old rpTabBar/rpLeagueAccordion removed — replaced by innerTabs and leagueList) */

/* ── Upcoming Matches ─────────────────────────────────────── */

.upcomingList[b-dn79sfmet3] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.upcomingDay[b-dn79sfmet3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dayHeader[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dayLabel[b-dn79sfmet3] {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dayHeader[b-dn79sfmet3]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* ── Upcoming Day Tabs ─────────────────────────────────────── */

.upcomingDayTabs[b-dn79sfmet3] {
    display: flex;
    gap: 6px;
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    overflow-x: auto;
    scrollbar-width: thin;
}

.upcomingDayTab[b-dn79sfmet3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.upcomingDayTab:hover[b-dn79sfmet3] {
    background: rgba(255,255,255,0.08);
    color: #e2e8f0;
}

.upcomingDayTabActive[b-dn79sfmet3] {
    background: rgba(59,130,246,0.18);
    border-color: rgba(59,130,246,0.4);
    color: #93c5fd;
}

.upcomingDayTabLabel[b-dn79sfmet3] {
    font-weight: 700;
}

.upcomingDayTabCount[b-dn79sfmet3] {
    font-size: 0.65rem;
    font-weight: 600;
    background: rgba(255,255,255,0.1);
    color: var(--muted);
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.upcomingDayTabActive .upcomingDayTabCount[b-dn79sfmet3] {
    background: rgba(59,130,246,0.3);
    color: #93c5fd;
}

.upcomingGrid[b-dn79sfmet3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(427px, 1fr));
    gap: 12px;
}

.liveSection .upcomingGrid[b-dn79sfmet3] {
    grid-template-columns: 1fr;
}

.upcomingCard[b-dn79sfmet3] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radiusSm);
    padding: 16px;
    min-width: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.upcomingCard:hover[b-dn79sfmet3] {
    transform: translateY(-2px);
    box-shadow: var(--shadowSoft);
    border-color: rgba(59, 130, 246, 0.3);
}

.upcomingCardHeader[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.leagueBadge[b-dn79sfmet3] {
    font-size: 0.6rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Tournament-bracket tag on a match card header (amber = live event, links to /bracket). */
.bracketBadge[b-dn79sfmet3] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: #422006;
    text-decoration: none;
}
.bracketBadge:hover[b-dn79sfmet3] { filter: brightness(1.08); }

.leagueBadgeLink[b-dn79sfmet3] {
    text-decoration: none;
    color: #fff;
    transition: filter 0.15s ease, transform 0.15s ease;
    cursor: pointer;
}

.leagueBadgeLink:hover[b-dn79sfmet3] {
    filter: brightness(1.2);
    transform: scale(1.05);
}

.homeTeamLink[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.15s ease;
    cursor: pointer;
    min-width: 0;
    overflow: hidden;
    max-width: 100%;
}

.homeTeamLink:hover[b-dn79sfmet3] {
    opacity: 0.8;
}

.homeTeamLink:hover[b-dn79sfmet3]  .teamName,
.homeTeamLink:hover[b-dn79sfmet3]  .lcTeamName {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.homeTeamLinkRight[b-dn79sfmet3] {
    flex-direction: row-reverse;
}

.matchFormat[b-dn79sfmet3] {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--muted);
    padding: 2px 6px;
    background: var(--hoverGlow);
    border-radius: 4px;
}

.matchTime[b-dn79sfmet3] {
    margin-left: auto;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.upcomingTeams[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    overflow: hidden;
    min-width: 0;
}

.upcomingTeam[b-dn79sfmet3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    max-width: calc(50% - 20px);
}

.teamLogo[b-dn79sfmet3] {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    padding: 4px;
    flex-shrink: 0;
}

.teamName[b-dn79sfmet3] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    min-width: 0;
}

.teamCode[b-dn79sfmet3] {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.vsLabel[b-dn79sfmet3] {
    font-size: 0.7rem;
    font-weight: 900;
    color: var(--muted);
    flex-shrink: 0;
    opacity: 0.6;
}

/* ── Upcoming Predictions ─────────────────────────────────── */

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

/* ── Prediction Team Labels ─── */
.lcPredTeams[b-dn79sfmet3] {
    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[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.lcPredTeamRight[b-dn79sfmet3] {
    justify-content: flex-end;
}

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

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

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

.lcPredSpacer[b-dn79sfmet3] {
    width: 8px;
    flex-shrink: 0;
}

.upPredRow[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.upPredModel[b-dn79sfmet3] {
    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[b-dn79sfmet3] { color: #60a5fa; }
.upPredModel.upPredLightGBM[b-dn79sfmet3] { color: #fbbf24; }
.upPredModel.upPredPcaSweep[b-dn79sfmet3] { color: #a78bfa; }


.upPredBar[b-dn79sfmet3] {
    flex: 1;
    display: flex;
    height: 20px;
    border-radius: 4px;
    position: relative;
    gap: 1px;
}

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

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

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

.upPredLocked[b-dn79sfmet3] {
    opacity: 0.5;
    position: relative;
}

.upPredLockedOverlay[b-dn79sfmet3] {
    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 — the lock now navigates to /premium, so it needs to look
   clickable rather than reading as a static "you're locked out" badge. Mirror
   the hover treatment of other CTAs on the page so the upgrade prompt is
   discoverable from anywhere a model is gated. */
.upPredLockedLink[b-dn79sfmet3] {
    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[b-dn79sfmet3],
.upPredLockedLink:focus-visible[b-dn79sfmet3] {
    background: rgba(139, 92, 246, 0.18);
    border-color: rgba(139, 92, 246, 0.55);
    color: #c4b5fd;
    transform: translateY(-1px);
    outline: none;
}

/* Consensus row — slightly larger, accent border */
.upPredConsensus[b-dn79sfmet3] {
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--borderSoft);
}

.upPredConsensus .upPredModel[b-dn79sfmet3] {
    font-size: 0.7rem;
    color: #22d3ee;
}

.upPredConsensus .upPredBar[b-dn79sfmet3] {
    height: 24px;
}

.upPredConsensus .upPredPct[b-dn79sfmet3] {
    font-size: 0.7rem;
}

/* Favored side glow */
.upPredBarLeft.upPredFavored[b-dn79sfmet3] {
    background: linear-gradient(90deg, #1d4ed8, #3b82f6);
    box-shadow: inset 0 0 6px rgba(59,130,246,0.4);
}

.upPredBarRight.upPredFavored[b-dn79sfmet3] {
    background: linear-gradient(90deg, #b91c1c, #ef4444);
    box-shadow: inset 0 0 6px rgba(239,68,68,0.4);
}

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

/* ── Compact League Prediction Accuracy ── */
.upLeagueAcc[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    margin-top: 4px;
    background: rgba(255,255,255,0.03);
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.05);
}
.upLeagueAccLabel[b-dn79sfmet3] {
    font-size: 0.62rem;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    min-width: fit-content;
}
.upLeagueAccModels[b-dn79sfmet3] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.upLeagueAccModel[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    gap: 4px;
}
.upLeagueAccModelName[b-dn79sfmet3] {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.upLeagueAccStat[b-dn79sfmet3], .upLeagueAccStatDraft[b-dn79sfmet3] {
    font-size: 0.7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.upLeagueAccStat[b-dn79sfmet3]::before {
    content: 'S ';
    font-size: 0.55rem;
    font-weight: 500;
    color: rgba(255,255,255,0.4);
}
.upLeagueAccStatDraft[b-dn79sfmet3]::before {
    content: 'D ';
    font-size: 0.55rem;
    font-weight: 500;
    color: rgba(255,255,255,0.4);
}
.upLeagueAccHigh[b-dn79sfmet3] { color: #4ade80; }
.upLeagueAccMid[b-dn79sfmet3]  { color: #fbbf24; }
.upLeagueAccLow[b-dn79sfmet3]  { color: #f87171; }

.upcomingActions[b-dn79sfmet3] {
    display: flex;
    gap: 8px;
}

.predictBtn[b-dn79sfmet3] {
    flex: 1;
    text-align: center;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.15s ease;
    cursor: pointer;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.predictMatch[b-dn79sfmet3] {
    background: linear-gradient(180deg, #3b82f6, #2563eb);
    color: #fff;
}

.predictMatch:hover[b-dn79sfmet3] {
    background: linear-gradient(180deg, #60a5fa, #3b82f6);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.predictDraft[b-dn79sfmet3] {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.predictDraft:hover[b-dn79sfmet3] {
    background: rgba(139, 92, 246, 0.25);
    transform: translateY(-1px);
}

.predictBtn:disabled[b-dn79sfmet3] {
    opacity: 0.7;
    cursor: wait;
    transform: none;
}

.btnSpinner[b-dn79sfmet3] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(167, 139, 250, 0.3);
    border-top-color: #a78bfa;
    border-radius: 50%;
    animation: btnSpin-b-dn79sfmet3 0.6s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}

@keyframes btnSpin-b-dn79sfmet3 {
    to { transform: rotate(360deg); }
}

.predictDisabled[b-dn79sfmet3] {
    background: rgba(255, 255, 255, 0.05);
    color: var(--muted);
    cursor: not-allowed;
    opacity: 0.5;
}

/* ── Upcoming Matches Header + League Filter ──────────────── */

.upcomingHeader[b-dn79sfmet3] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 16px;
    flex-wrap: wrap;
}

.upcomingHeader .sectionTitle[b-dn79sfmet3],
.upcomingHeader .sectionSubtitle[b-dn79sfmet3] {
    margin-bottom: 0;
}

.leagueFilter[b-dn79sfmet3] {
    flex-shrink: 0;
}

.leagueSelect[b-dn79sfmet3] {
    appearance: none;
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 32px 8px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.leagueSelect:hover[b-dn79sfmet3],
.leagueSelect:focus[b-dn79sfmet3] {
    border-color: var(--blue);
    outline: none;
}

.leagueSelect option[b-dn79sfmet3] {
    background: var(--panel);
    color: var(--text);
}

/* ── Recent Matches — Card-Based Layout ───────────────────── */

.recentMatchesList[b-dn79sfmet3] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 900px;
}

.recentCard[b-dn79sfmet3] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radiusSm);
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.recentCard:hover[b-dn79sfmet3] {
    transform: translateY(-2px);
    box-shadow: var(--shadowSoft);
}

/* Tournament + Date bar */
.recentCardMeta[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: var(--panelDeep);
    border-bottom: 1px solid var(--borderSoft);
}

.recentTournament[b-dn79sfmet3] {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recentDate[b-dn79sfmet3] {
    font-size: 0.78rem;
    color: var(--mutedFaint);
    font-weight: 500;
    flex-shrink: 0;
}

/* Matchup row — Team1 SCORE Team2 */
.recentMatchup[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    gap: 16px;
}

.recentTeamSide[b-dn79sfmet3] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

.recentTeamSide.teamRight[b-dn79sfmet3] {
    justify-content: flex-end;
}

.recentTeamName[b-dn79sfmet3] {
    font-size: 1.05rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sideWinner .recentTeamName[b-dn79sfmet3] {
    color: var(--text);
}

.sideLoser .recentTeamName[b-dn79sfmet3] {
    color: var(--muted);
    opacity: 0.6;
    font-weight: 600;
}

.recentScoreBlock[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.recentScoreNum[b-dn79sfmet3] {
    font-size: 1.5rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    min-width: 24px;
    text-align: center;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
}

.recentScoreSep[b-dn79sfmet3] {
    font-size: 1.2rem;
    color: var(--muted);
    font-weight: 400;
}

.scoreWin[b-dn79sfmet3] { color: var(--blue); font-weight: 900; font-size: inherit; }
.scoreLose[b-dn79sfmet3] { color: var(--muted); font-weight: 900; font-size: inherit; }
.scoreDash[b-dn79sfmet3] { color: var(--muted); margin: 0 1px; }

/* Games table within each card */
.recentGames[b-dn79sfmet3] {
    border-top: 1px solid var(--border);
}

.recentGamesHeader[b-dn79sfmet3] {
    display: grid;
    grid-template-columns: 40px minmax(80px, 1fr) 72px 68px minmax(120px, 2fr) minmax(90px, 1fr);
    align-items: center;
    gap: 14px;
    padding: 8px 20px;
    background: var(--panelDeep);
    border-bottom: 1px solid var(--borderSoft);
}

.rgCol[b-dn79sfmet3] {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mutedFaint);
    text-align: center;
}

.rgColWinner[b-dn79sfmet3] {
    text-align: center;
}

.recentGameRow[b-dn79sfmet3] {
    display: grid;
    grid-template-columns: 40px minmax(80px, 1fr) 72px 68px minmax(120px, 2fr) minmax(90px, 1fr);
    align-items: center;
    gap: 14px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--borderSoft);
    transition: background 0.1s ease;
}

.recentGameRow:last-child[b-dn79sfmet3] {
    border-bottom: none;
}

.recentGameRow:hover[b-dn79sfmet3] {
    background: rgba(59, 130, 246, 0.04);
}

.rgGameLabel[b-dn79sfmet3] {
    font-weight: 800;
    color: var(--muted);
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    text-align: center;
}

.rgGameScore[b-dn79sfmet3] {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    gap: 3px;
}

.rgGameScore .scoreWin[b-dn79sfmet3],
.rgGameScore .scoreLose[b-dn79sfmet3] {
    font-weight: 800;
    font-size: 0.92rem;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
}

.rgGameDuration[b-dn79sfmet3] {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 500;
    text-align: center;
}

/* Side indicators */
.rgGameSides[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 0.72rem;
}

.sideDot[b-dn79sfmet3] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sideBlue[b-dn79sfmet3] { background: var(--blue); }
.sideRed[b-dn79sfmet3] { background: var(--red); }

.sideTeamAbbr[b-dn79sfmet3] {
    font-weight: 700;
    color: var(--muted);
    font-size: 0.7rem;
}

.sideVs[b-dn79sfmet3] {
    color: var(--mutedFaint);
    font-size: 0.6rem;
    font-weight: 400;
    margin: 0 1px;
}

/* MVP styling */
.rgGameMvp[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
}

.mvpBadge[b-dn79sfmet3] {
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 5px;
    border-radius: 3px;
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.3);
    flex-shrink: 0;
    line-height: 1;
}

.mvpName[b-dn79sfmet3] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mvpChamp[b-dn79sfmet3] {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--mutedFaint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rgWinnerTag[b-dn79sfmet3] {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 12px;
    border-radius: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.rgWinnerTag.winnerTeam1[b-dn79sfmet3] {
    background: rgba(37, 99, 235, 0.12);
    color: var(--blue);
    border: 1px solid rgba(37, 99, 235, 0.25);
}

.rgWinnerTag.winnerTeam2[b-dn79sfmet3] {
    background: rgba(220, 38, 38, 0.10);
    color: var(--red);
    border: 1px solid rgba(220, 38, 38, 0.20);
}

/* ── Revamped Recent Matches (League-style rows) ─────────── */

.recentPanel[b-dn79sfmet3] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadowSoft);
}

.recentScroll[b-dn79sfmet3] {
    max-height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(37,99,235,0.2) transparent;
    padding: 4px 0;
}

.recentRow[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--borderSoft);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    position: relative;
}

.recentRow:last-child[b-dn79sfmet3] { border-bottom: none; }

.recentRow:hover[b-dn79sfmet3] {
    transform: translateY(-2px) scale(1.005);
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15), 0 0 0 1px rgba(59, 130, 246, 0.1);
    background: rgba(59, 130, 246, 0.06);
    z-index: 2;
    border-radius: 6px;
}

.recentRowDate[b-dn79sfmet3] {
    min-width: 50px;
    flex-shrink: 0;
}

.recentRowDateText[b-dn79sfmet3] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
}

.recentRowTeams[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    justify-content: center;
    min-width: 0;
}

.recentRowTeam[b-dn79sfmet3] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--muted);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    text-align: right;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}

.recentTeamLogo[b-dn79sfmet3] {
    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}

.recentLeagueIcon[b-dn79sfmet3] {
    width: 16px;
    height: 16px;
    object-fit: contain;
    border-radius: 3px;
    flex-shrink: 0;
}

.recentRowTeamRight[b-dn79sfmet3] {
    text-align: left;
    justify-content: flex-start;
}

.recentRowTeamWin[b-dn79sfmet3] {
    color: var(--text);
    font-weight: 800;
}

.recentRowScore[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.recentRowScoreNum[b-dn79sfmet3] {
    font-size: 0.95rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    min-width: 16px;
    text-align: center;
}

.recentRowScoreWin[b-dn79sfmet3] { color: #22c55e; }
.recentRowScoreLoss[b-dn79sfmet3] { color: var(--muted); opacity: 0.6; }

.recentRowScoreSep[b-dn79sfmet3] {
    color: var(--muted);
    opacity: 0.4;
    font-weight: 400;
    font-size: 0.85rem;
}

.recentRowMeta[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-width: 120px;
    justify-content: flex-end;
}

.recentLeagueName[b-dn79sfmet3] {
    font-size: 0.68rem;
    font-weight: 700;
    color: #60a5fa;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(139, 92, 246, 0.08));
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 4px;
    padding: 2px 8px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.recentChevron[b-dn79sfmet3] {
    color: var(--muted);
    opacity: 0.4;
    flex-shrink: 0;
    transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.recentRow:hover .recentChevron[b-dn79sfmet3] {
    opacity: 1;
    color: var(--blue);
    transform: translateX(3px);
}

/* ── Expanded Recent Cards (with predictions) ─────────────── */

.recentExpandedList[b-dn79sfmet3] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.recentCard[b-dn79sfmet3] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--shadowSoft);
}

.recentCard:hover[b-dn79sfmet3] {
    transform: translateY(-2px);
    box-shadow: var(--hoverShadow);
    border-color: rgba(59,130,246,0.2);
}

.recentCardHeader[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.recentCardDate[b-dn79sfmet3] {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.recentCardLeague[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mutedFaint);
    margin-left: auto;
}

.recentCardLeagueIcon[b-dn79sfmet3] {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.recentCardMatchup[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 14px;
}

.recentCardTeam[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: flex-end;
    min-width: 0;
}

.recentCardTeamRight[b-dn79sfmet3] {
    justify-content: flex-start;
}

.recentCardLogo[b-dn79sfmet3] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: contain;
    flex-shrink: 0;
    background: rgba(255,255,255,0.04);
}

.recentCardTeamName[b-dn79sfmet3] {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recentCardTeamWin .recentCardTeamName[b-dn79sfmet3] {
    color: var(--text);
}

.recentCardScore[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.recentCardScoreNum[b-dn79sfmet3] {
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--muted);
}

.recentCardScoreWin[b-dn79sfmet3] {
    color: var(--text);
}

.recentCardScoreSep[b-dn79sfmet3] {
    font-size: 0.9rem;
    color: var(--mutedFaint);
}

/* Series Predictions section (below matchup) */
.recentCardSeriesPreds[b-dn79sfmet3] {
    border-top: 1px solid var(--borderSoft);
    padding-top: 10px;
    margin-top: 4px;
}

/* Predictions inside recent card */
/* Prediction summary chips */
.recentCardPredsSummary[b-dn79sfmet3] {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 4px 0 6px;
}

.recentPredChip[b-dn79sfmet3] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    font-size: 0.72rem;
}

.recentPredChip.upPredFastTree[b-dn79sfmet3] { border-color: rgba(96,165,250,0.25); background: rgba(96,165,250,0.08); }
.recentPredChip.upPredLightGBM[b-dn79sfmet3] { border-color: rgba(251,191,36,0.25); background: rgba(251,191,36,0.08); }
.recentPredChip.upPredPcaSweep[b-dn79sfmet3] { border-color: rgba(167,139,250,0.25); background: rgba(167,139,250,0.08); }

.recentPredChipName[b-dn79sfmet3] {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.recentPredChip.upPredFastTree .recentPredChipName[b-dn79sfmet3] { color: #60a5fa; }
.recentPredChip.upPredLightGBM .recentPredChipName[b-dn79sfmet3] { color: #fbbf24; }
.recentPredChip.upPredPcaSweep .recentPredChipName[b-dn79sfmet3] { color: #a78bfa; }

.recentPredChipPct[b-dn79sfmet3] {
    font-weight: 700;
    color: var(--textSoft);
}

.recentPredChipIcon[b-dn79sfmet3] {
    display: flex;
    align-items: center;
}

.recentPredCorrect[b-dn79sfmet3] {
    color: #4ade80;
}

.recentPredWrong[b-dn79sfmet3] {
    color: #f87171;
}

.recentCardDrafts[b-dn79sfmet3] {
    border-top: 1px solid var(--borderSoft);
    padding-top: 10px;
    margin-top: 4px;
}

.recentCardPredsLabel[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mutedFaint);
    margin-bottom: 8px;
}

.recentDraftWinnerLogoHeader[b-dn79sfmet3] {
    width: 18px;
    height: 18px;
    object-fit: contain;
    opacity: 0.7;
}

.recentPredModel[b-dn79sfmet3] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    min-width: 72px;
    flex-shrink: 0;
}

/* Draft predictions per game — horizontal card grid */
.recentDraftGrid[b-dn79sfmet3] {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

.recentDraftGrid[b-dn79sfmet3]::-webkit-scrollbar {
    display: none;
}

.recentDraftGameCard[b-dn79sfmet3] {
    flex: 1;
    min-width: 0;
    border-radius: 10px;
    padding: 8px 10px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(37,99,235,0.18);
    background: linear-gradient(135deg, rgba(37,99,235,0.12), rgba(30,40,64,0.6));
}

.recentDraftGameCard2[b-dn79sfmet3] {
    background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(30,40,64,0.6));
    border-color: rgba(139,92,246,0.15);
}

.recentDraftGameCard3[b-dn79sfmet3] {
    background: linear-gradient(135deg, rgba(251,191,36,0.10), rgba(30,40,64,0.6));
    border-color: rgba(251,191,36,0.12);
}

.recentDraftGameCard4[b-dn79sfmet3] {
    background: linear-gradient(135deg, rgba(52,211,153,0.10), rgba(30,40,64,0.6));
    border-color: rgba(52,211,153,0.12);
}

.recentDraftGameCard5[b-dn79sfmet3] {
    background: linear-gradient(135deg, rgba(244,114,182,0.10), rgba(30,40,64,0.6));
    border-color: rgba(244,114,182,0.12);
}

.recentDraftGameHeader[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.recentDraftGameLabel[b-dn79sfmet3] {
    font-size: 0.7rem;
    font-weight: 800;
    color: rgba(255,255,255,0.8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.recentDraftWinnerLogo[b-dn79sfmet3] {
    width: 20px;
    height: 20px;
    object-fit: contain;
    opacity: 0.7;
    filter: grayscale(20%);
}

.recentDraftRow[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}

.recentDraftModelDot[b-dn79sfmet3] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.recentDraftModelDot.upPredFastTree[b-dn79sfmet3] { background: #60a5fa; box-shadow: 0 0 6px rgba(96,165,250,0.4); }
.recentDraftModelDot.upPredLightGBM[b-dn79sfmet3] { background: #fbbf24; box-shadow: 0 0 6px rgba(251,191,36,0.4); }
.recentDraftModelDot.upPredPcaSweep[b-dn79sfmet3] { background: #a78bfa; box-shadow: 0 0 6px rgba(167,139,250,0.4); }

.recentDraftModelName[b-dn79sfmet3] {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.recentDraftModelName.upPredFastTree[b-dn79sfmet3] { color: #60a5fa; }
.recentDraftModelName.upPredLightGBM[b-dn79sfmet3] { color: #fbbf24; }
.recentDraftModelName.upPredPcaSweep[b-dn79sfmet3] { color: #a78bfa; }

.recentDraftPct[b-dn79sfmet3] {
    font-size: 0.68rem;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    margin-left: auto;
}

/* ── Model-Grouped Prediction Cards (Recent Matches) ──────── */

.recentModelPredGrid[b-dn79sfmet3] {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.recentModelPredCard[b-dn79sfmet3] {
    flex: 1;
    min-width: 0;
    border-radius: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(135deg, rgba(18,24,40,0.9), rgba(14,20,35,0.95));
}

.recentModelPredCard.upPredFastTree[b-dn79sfmet3] {
    border-color: rgba(96,165,250,0.2);
    background: linear-gradient(135deg, rgba(37,99,235,0.08), rgba(14,20,35,0.95));
}
.recentModelPredCard.upPredLightGBM[b-dn79sfmet3] {
    border-color: rgba(251,191,36,0.2);
    background: linear-gradient(135deg, rgba(245,158,11,0.08), rgba(14,20,35,0.95));
}
.recentModelPredCard.upPredPcaSweep[b-dn79sfmet3] {
    border-color: rgba(167,139,250,0.2);
    background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(14,20,35,0.95));
}
.recentModelPredCard.upPredConsensus[b-dn79sfmet3] {
    border-color: rgba(34,211,238,0.2);
    background: linear-gradient(135deg, rgba(6,182,212,0.08), rgba(14,20,35,0.95));
}

.recentModelPredHeader[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.recentModelPredName[b-dn79sfmet3] {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.recentModelPredName.upPredFastTree[b-dn79sfmet3] { color: #60a5fa; }
.recentModelPredName.upPredLightGBM[b-dn79sfmet3] { color: #fbbf24; }
.recentModelPredName.upPredPcaSweep[b-dn79sfmet3] { color: #a78bfa; }
.recentModelPredName.upPredConsensus[b-dn79sfmet3] { color: #22d3ee; }

.recentModelPredScore[b-dn79sfmet3] {
    font-size: 0.62rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
}
.recentModelPredScore.rpPerfect[b-dn79sfmet3] { background: rgba(52,211,153,0.2); color: #6ee7b7; }
.recentModelPredScore.rpGood[b-dn79sfmet3] { background: rgba(96,165,250,0.2); color: #93c5fd; }
.recentModelPredScore.rpBad[b-dn79sfmet3] { background: rgba(239,68,68,0.2); color: #fca5a5; }

.recentModelPredRow[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
}

.recentModelPredType[b-dn79sfmet3] {
    font-size: 0.6rem;
    font-weight: 700;
    color: rgba(148,163,184,0.6);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    min-width: 44px;
}

.recentModelPredIcon[b-dn79sfmet3] {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 3px;
    flex-shrink: 0;
}

.recentModelPredConf[b-dn79sfmet3] {
    font-size: 0.68rem;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    margin-left: auto;
}

/* ── Mobile Model Tabs (Recent Matches) ───────────────────── */

.recentModelTabs[b-dn79sfmet3] {
    display: none; /* shown only on mobile */
}

/* ── Winner Icon in Model Recent Predictions (rpPredRow) ──── */

.rpPredIcon[b-dn79sfmet3] {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 3px;
    flex-shrink: 0;
}

/* ── League Row in Model Recent Predictions ───────────────── */

.rpLeagueRow[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.rpLeagueIcon[b-dn79sfmet3] {
    width: 14px;
    height: 14px;
    object-fit: contain;
    opacity: 0.7;
}

.rpLeagueName[b-dn79sfmet3] {
    font-size: 0.6rem;
    font-weight: 600;
    color: rgba(148,163,184,0.55);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rpMatchDate[b-dn79sfmet3] {
    font-size: 0.58rem;
    font-weight: 600;
    color: rgba(148,163,184,0.4);
    margin-left: auto;
}

.rpChevron[b-dn79sfmet3] {
    color: rgba(148,163,184,0.3);
    flex-shrink: 0;
}

/* ── Navigation Overlay ────────────────────────────────────── */

.navOverlay[b-dn79sfmet3] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: rgba(11, 17, 32, 0.85);
    backdrop-filter: blur(6px);
    animation: fadeIn-b-dn79sfmet3 0.15s ease;
}

@keyframes fadeIn-b-dn79sfmet3 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.navSpinner[b-dn79sfmet3] {
    width: 44px;
    height: 44px;
    border: 3px solid rgba(59, 130, 246, 0.15);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: navSpin-b-dn79sfmet3 0.8s linear infinite;
}

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

.navOverlayText[b-dn79sfmet3] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #94a3b8;
    letter-spacing: 0.02em;
}

/* ── Utility ───────────────────────────────────────────────── */

.loadingPlaceholder[b-dn79sfmet3] {
    padding: 40px 20px;
    text-align: center;
    color: var(--muted);
    font-size: 0.9rem;
}

.emptyState[b-dn79sfmet3] {
    padding: 40px 20px;
    text-align: center;
    color: var(--muted);
    font-size: 0.88rem;
    font-style: italic;
}

/* ── Responsive ────────────────────────────────────────────── */

@media (max-width: 768px) {
    .hero[b-dn79sfmet3] {
        padding: 24px 16px 16px;
        margin-bottom: 0;
    }

    .heroBannerImg[b-dn79sfmet3] {
        max-width: 180px;
    }

    .heroTagline[b-dn79sfmet3] {
        font-size: 0.82rem;
        margin-top: 2px;
    }

    .statsRibbon[b-dn79sfmet3] {
        gap: 6px;
        margin-top: 12px;
    }

    .statChip[b-dn79sfmet3] {
        padding: 4px 8px;
        min-width: 0;
        flex: 1;
    }

    .statValue[b-dn79sfmet3] {
        font-size: 0.88rem;
    }

    .statLabel[b-dn79sfmet3] {
        font-size: 0.5rem;
    }

    .section[b-dn79sfmet3] {
        /* No extra horizontal inset on mobile — the global article.content already
           provides the page gutter. Doubling it left cards unnecessarily narrow. */
        padding: 0;
        margin-bottom: 24px;
    }

    .sectionTitle[b-dn79sfmet3] {
        font-size: 1.15rem;
    }

    .sectionSubtitle[b-dn79sfmet3] {
        font-size: 0.78rem;
    }

    .heroCtas[b-dn79sfmet3] {
        flex-direction: row;
        justify-content: center;
        gap: 8px;
        margin-top: 14px;
    }

    .ctaBtn[b-dn79sfmet3] {
        flex: 1;
        max-width: 160px;
        justify-content: center;
        padding: 9px 14px;
        font-size: 0.78rem;
    }

    /* Preview cards hidden on mobile — bottom tab bar replaces them */

    /* ── Upcoming Grid ── */
    .upcomingGrid[b-dn79sfmet3] {
        grid-template-columns: 1fr;
    }

    .upcomingHeader[b-dn79sfmet3] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .upcomingCard[b-dn79sfmet3] {
        padding: 12px;
    }

    .upcomingTeams[b-dn79sfmet3] {
        gap: 8px;
        margin-bottom: 10px;
    }

    .teamLogo[b-dn79sfmet3] {
        width: 34px;
        height: 34px;
    }

    .teamName[b-dn79sfmet3] {
        font-size: 0.75rem;
    }

    .upcomingPredictions[b-dn79sfmet3] {
        padding: 8px 10px;
    }

    .upcomingActions[b-dn79sfmet3] {
        gap: 6px;
    }

    .predictBtn[b-dn79sfmet3] {
        padding: 7px 10px;
        font-size: 0.72rem;
    }

    /* ── Recent Matches (card view) ── */
    .recentCard[b-dn79sfmet3] {
        padding: 12px 14px;
    }

    .recentCardMatchup[b-dn79sfmet3] {
        gap: 10px;
    }

    .recentCardLogo[b-dn79sfmet3] {
        width: 24px;
        height: 24px;
    }

    .recentCardTeamName[b-dn79sfmet3] {
        font-size: 0.78rem;
    }

    .recentCardScoreNum[b-dn79sfmet3] {
        font-size: 1.1rem;
    }

    .recentCardPredsSummary[b-dn79sfmet3] {
        gap: 6px;
    }

    .recentPredChip[b-dn79sfmet3] {
        padding: 4px 8px;
        font-size: 0.62rem;
    }

    /* Model tabs — visible on mobile */
    .recentModelTabs[b-dn79sfmet3] {
        display: flex;
        gap: 4px;
        margin-top: 8px;
        margin-bottom: 6px;
    }

    .recentModelTab[b-dn79sfmet3] {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 4px 8px;
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 6px;
        background: transparent;
        cursor: pointer;
        font-size: 0.58rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: rgba(255,255,255,0.4);
        transition: all 0.15s ease;
        flex: 1;
        justify-content: center;
    }

    .recentModelTab.recentModelTabActive.upPredFastTree[b-dn79sfmet3] {
        border-color: rgba(96,165,250,0.4);
        background: rgba(37,99,235,0.12);
        color: #60a5fa;
    }
    .recentModelTab.recentModelTabActive.upPredLightGBM[b-dn79sfmet3] {
        border-color: rgba(251,191,36,0.4);
        background: rgba(245,158,11,0.12);
        color: #fbbf24;
    }
    .recentModelTab.recentModelTabActive.upPredPcaSweep[b-dn79sfmet3] {
        border-color: rgba(167,139,250,0.4);
        background: rgba(139,92,246,0.12);
        color: #a78bfa;
    }
    .recentModelTab.recentModelTabActive.upPredConsensus[b-dn79sfmet3] {
        border-color: rgba(34,211,238,0.4);
        background: rgba(6,182,212,0.12);
        color: #22d3ee;
    }

    .recentModelTabName[b-dn79sfmet3] {
        pointer-events: none;
    }

    .recentModelTabScore[b-dn79sfmet3] {
        font-size: 0.55rem;
        font-weight: 800;
        padding: 1px 4px;
        border-radius: 6px;
        pointer-events: none;
    }

    /* Model-grouped prediction cards — show only active on mobile */
    .recentModelPredGrid[b-dn79sfmet3] {
        gap: 6px;
        overflow: hidden;
    }

    .recentModelPredCard[b-dn79sfmet3] {
        display: none;
        padding: 6px 8px;
    }

    .recentModelPredCard.recentModelPredCardActive[b-dn79sfmet3] {
        display: block;
    }

    .recentModelPredHeader[b-dn79sfmet3] {
        display: none; /* header info is in the tab now */
    }

    .recentModelPredName[b-dn79sfmet3] {
        font-size: 0.6rem;
    }

    .recentModelPredType[b-dn79sfmet3] {
        font-size: 0.55rem;
        min-width: 38px;
    }

    .recentModelPredIcon[b-dn79sfmet3] {
        width: 16px;
        height: 16px;
    }

    .recentModelPredConf[b-dn79sfmet3] {
        font-size: 0.62rem;
    }

    /* ── Recent Matches (row view) ── */
    .recentMatchup[b-dn79sfmet3] {
        padding: 12px 16px;
    }

    .recentTeamName[b-dn79sfmet3] {
        font-size: 0.9rem;
    }

    .recentScoreNum[b-dn79sfmet3] {
        font-size: 1.2rem;
    }

    .recentGamesHeader[b-dn79sfmet3],
    .recentGameRow[b-dn79sfmet3] {
        grid-template-columns: 36px 80px 60px 56px 1fr 90px;
        gap: 6px;
        padding: 8px 12px;
    }

    .rgCol[b-dn79sfmet3] {
        font-size: 0.7rem;
    }

    .rgGameScore[b-dn79sfmet3] {
        font-size: 0.82rem;
    }

    .rgGameDuration[b-dn79sfmet3] {
        font-size: 0.72rem;
    }

    .mvpBadge[b-dn79sfmet3] { display: none; }
    .mvpChamp[b-dn79sfmet3] { display: none; }
    .mvpName[b-dn79sfmet3] { font-size: 0.72rem; }

    .rgWinnerTag[b-dn79sfmet3] {
        font-size: 0.68rem;
        padding: 3px 6px;
    }

    /* ── Live Section ── */
    /* Higher specificity (.section.liveSection) so this beats the base .liveSection
       { padding: 24px } rule defined LATER in the file — without it the base clobbered
       the mobile reduction and the live card got a 24px inner inset on phones. */
    .section.liveSection[b-dn79sfmet3] {
        padding: 14px 12px;
        margin-bottom: 16px;
    }

    .liveHeader[b-dn79sfmet3] {
        gap: 8px;
        margin-bottom: 10px;
    }

    .liveTitle[b-dn79sfmet3] {
        font-size: 1rem;
    }

    /* ── Model Spotlight responsive ── */
    .spotlightCard[b-dn79sfmet3] {
        padding: 20px 16px;
    }

    .modelTab[b-dn79sfmet3] {
        font-size: 0.78rem;
        padding: 8px 10px;
    }

    .tabBadge[b-dn79sfmet3] {
        display: none;
    }

    .heroRow[b-dn79sfmet3] {
        flex-direction: column;
    }

    .heroValue[b-dn79sfmet3] {
        font-size: 2.2rem;
    }

    .barRow[b-dn79sfmet3] {
        grid-template-columns: 85px 1fr 55px;
        gap: 8px;
    }

    .barLabel[b-dn79sfmet3] {
        font-size: 0.72rem;
    }

    .spotlightName[b-dn79sfmet3] {
        font-size: 1.1rem;
    }

    .modelDescription[b-dn79sfmet3] {
        font-size: 0.8rem;
        padding: 10px 12px;
    }

    /* ── Insight cards: single column on mobile ── */
    .insightCards[b-dn79sfmet3] {
        grid-template-columns: 1fr;
    }

    .insightCardHeader[b-dn79sfmet3] {
        flex-wrap: wrap;
    }

    .insightCardStat[b-dn79sfmet3] {
        flex-wrap: wrap;
    }

    .insightCardStatLabel[b-dn79sfmet3] {
        font-size: 0.55rem;
    }

    /* ── Top leagues: stack vertically on mobile ── */
    .topLeaguesStrip[b-dn79sfmet3] {
        flex-direction: column;
        gap: 6px;
    }

    .topLeaguesList[b-dn79sfmet3] {
        flex-direction: column;
        gap: 4px;
    }

    .topLeagueChip[b-dn79sfmet3] {
        width: 100%;
    }

    /* ── Confidence mini cards: smaller on mobile ── */
    .confMiniValue[b-dn79sfmet3] {
        font-size: 1.1rem;
    }

    .confMiniCard[b-dn79sfmet3] {
        padding: 8px 6px;
    }

    /* ── Recent predictions in model stats ── */
    .rpSeriesHeader[b-dn79sfmet3] {
        flex-wrap: wrap;
        gap: 4px;
    }

    .rpTeamName[b-dn79sfmet3] {
        max-width: 70px;
    }

    .rpPredRow[b-dn79sfmet3] {
        gap: 4px;
    }

    .rpPredType[b-dn79sfmet3] {
        width: 44px;
        font-size: 0.58rem;
    }
}

@media (max-width: 640px) {
    .recentRow[b-dn79sfmet3] {
        flex-wrap: wrap;
        gap: 6px;
        padding: 10px 12px;
    }
    .recentRowDate[b-dn79sfmet3] { min-width: 45px; }
    .recentRowMeta[b-dn79sfmet3] {
        min-width: unset;
        width: 100%;
        justify-content: flex-start;
        margin-top: 2px;
    }
}

@media (max-width: 480px) {
    .hero[b-dn79sfmet3] {
        padding: 20px 12px 14px;
    }

    .heroBannerImg[b-dn79sfmet3] {
        max-width: 150px;
    }

    .heroTagline[b-dn79sfmet3] {
        font-size: 0.75rem;
    }

    .previewCard[b-dn79sfmet3] {
        min-width: 110px;
        max-width: 145px;
        padding: 7px 10px;
    }

    .previewCardLabel[b-dn79sfmet3] {
        font-size: 0.58rem;
    }

    .previewCardTeams[b-dn79sfmet3] {
        font-size: 0.65rem;
    }

    .previewCardDetail[b-dn79sfmet3], .previewCardExtra[b-dn79sfmet3] {
        font-size: 0.55rem;
    }

    .metricsGrid[b-dn79sfmet3] {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Hide duration, MVP, and sides on very small screens */
    .rgColDur[b-dn79sfmet3],
    .rgColMvp[b-dn79sfmet3],
    .rgColSides[b-dn79sfmet3],
    .rgGameDuration[b-dn79sfmet3],
    .rgGameMvp[b-dn79sfmet3],
    .rgGameSides[b-dn79sfmet3] {
        display: none;
    }

    .recentGamesHeader[b-dn79sfmet3],
    .recentGameRow[b-dn79sfmet3] {
        grid-template-columns: 36px 60px 1fr;
        gap: 6px;
    }

    /* Live card mobile */
    .lcScoreboard[b-dn79sfmet3] {
        gap: 4px;
        padding: 8px 8px 6px;
    }

    .lcTeamLogo[b-dn79sfmet3] { width: 28px; height: 28px; }
    .lcTeamName[b-dn79sfmet3] { font-size: 0.68rem; max-width: 68px; }
    .lcKills[b-dn79sfmet3] { font-size: 1rem; }
    .lcCenter[b-dn79sfmet3] { min-width: 60px; }
    .lcGameTime[b-dn79sfmet3] { font-size: 0.72rem; }
    .lcVs[b-dn79sfmet3] { font-size: 0.65rem; }

    .lcGoldRow[b-dn79sfmet3], .lcObjRow[b-dn79sfmet3] {
        padding: 2px 8px;
        gap: 4px;
    }

    .lcGoldVal[b-dn79sfmet3] { font-size: 0.72rem; }
    .lcObjIconSm[b-dn79sfmet3] { width: 12px; height: 12px; }
    .lcGoldVs[b-dn79sfmet3] { font-size: 0.55rem; }

    .lcH2hContainer[b-dn79sfmet3] { padding: 2px 4px; }
    .lcH2hChamp[b-dn79sfmet3] { width: 18px; height: 18px; }
    .lcH2hLevel[b-dn79sfmet3] { width: 13px; height: 13px; font-size: 0.5rem; }
    .lcH2hPlayer[b-dn79sfmet3] { font-size: 0.55rem; gap: 2px; }
    .lcH2hName[b-dn79sfmet3] { max-width: 48px; font-size: 0.55rem; }
    .lcH2hKda[b-dn79sfmet3] { font-size: 0.52rem; }
    .lcH2hCenter[b-dn79sfmet3] { width: 36px; }
    .lcH2hRole[b-dn79sfmet3] { font-size: 0.5rem; }
    .lcH2hGoldDiff[b-dn79sfmet3] { font-size: 0.48rem; }

    .liveDraftRow[b-dn79sfmet3] { gap: 3px; padding: 4px 6px; }
    .liveDraftChamp[b-dn79sfmet3] { width: 22px; height: 22px; }

    /* Series predictions chips */
    .recentCardPredsSummary[b-dn79sfmet3] {
        gap: 4px;
    }

    .recentPredChip[b-dn79sfmet3] {
        padding: 3px 6px;
        font-size: 0.58rem;
    }

    .recentPredChipPct[b-dn79sfmet3] {
        font-size: 0.6rem;
    }

    /* Draft prediction cards */
    .recentDraftGameCard[b-dn79sfmet3] {
        min-width: 100px;
        padding: 5px 7px;
    }

    .recentDraftGameLabel[b-dn79sfmet3] {
        font-size: 0.6rem;
    }

    .recentDraftWinnerLogo[b-dn79sfmet3] {
        width: 16px;
        height: 16px;
    }

    /* Upcoming match card tighter */
    .upcomingCard[b-dn79sfmet3] {
        padding: 10px;
    }

    .teamLogo[b-dn79sfmet3] {
        width: 30px;
        height: 30px;
    }

    .teamName[b-dn79sfmet3] {
        font-size: 0.7rem;
    }

    .teamCode[b-dn79sfmet3] {
        font-size: 0.55rem;
    }

    .leagueBadge[b-dn79sfmet3] {
        font-size: 0.55rem;
        padding: 2px 6px;
    }

    .matchFormat[b-dn79sfmet3] {
        font-size: 0.58rem;
    }

    /* Day tabs */
    .upcomingDayTab[b-dn79sfmet3] {
        padding: 6px 12px;
        font-size: 0.72rem;
    }

    .upcomingDayTabCount[b-dn79sfmet3] {
        font-size: 0.58rem;
    }

    .leagueSelect[b-dn79sfmet3] {
        font-size: 0.75rem;
        padding: 6px 28px 6px 10px;
    }

    /* Recent card matchup */
    .recentCardTeamName[b-dn79sfmet3] {
        font-size: 0.72rem;
    }

    .recentCardLogo[b-dn79sfmet3] {
        width: 22px;
        height: 22px;
    }

    .recentCardScoreNum[b-dn79sfmet3] {
        font-size: 1rem;
    }

    .recentCardSeriesPreds[b-dn79sfmet3] {
        padding-top: 8px;
    }

    .recentCardPredsLabel[b-dn79sfmet3] {
        font-size: 0.6rem;
        margin-bottom: 6px;
    }
}

/* ── Live Games Section ────────────────────────────────────── */

.liveSection[b-dn79sfmet3] {
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: var(--radiusSm);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.04), rgba(34, 197, 94, 0.01));
    padding: 24px;
    margin-bottom: 24px;
}

.liveHeader[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.liveTitle[b-dn79sfmet3] {
    color: #22c55e !important;
    letter-spacing: 0.15em;
}

.livePulse[b-dn79sfmet3] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #22c55e;
    animation: livePulseAnim-b-dn79sfmet3 1.5s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
}

@keyframes livePulseAnim-b-dn79sfmet3 {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 8px rgba(34, 197, 94, 0.6); }
    50% { opacity: 0.6; transform: scale(0.85); box-shadow: 0 0 16px rgba(34, 197, 94, 0.3); }
}

.liveCard[b-dn79sfmet3] {
    border-color: rgba(34, 197, 94, 0.3) !important;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.06), var(--panel)) !important;
}

.liveCard:hover[b-dn79sfmet3] {
    border-color: rgba(34, 197, 94, 0.5) !important;
}

.liveIndicator[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #22c55e;
    margin-left: auto;
    letter-spacing: 0.04em;
}

.liveDot[b-dn79sfmet3] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    animation: livePulseAnim-b-dn79sfmet3 1.5s ease-in-out infinite;
}

/* ── Player H2H Scoreboard in live card ── */
.lcH2hContainer[b-dn79sfmet3] {
    margin: 6px 0 4px;
    padding: 4px 0;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 8px;
    overflow: hidden;
}

.lcH2hRow[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    padding: 3px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.lcH2hRow:last-child[b-dn79sfmet3] {
    border-bottom: none;
}

.lcH2hPlayer[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: 4px;
    font-size: 0.68rem;
}
.lcH2hLeft[b-dn79sfmet3] {
    justify-content: flex-end;
    text-align: right;
}
.lcH2hRight[b-dn79sfmet3] {
    justify-content: flex-start;
    text-align: left;
}

.lcH2hChampWrap[b-dn79sfmet3] {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

/* Dead player champion icon */
.lcH2hChampWrap.champDead[b-dn79sfmet3] {
    position: relative;
}

.lcChampDead[b-dn79sfmet3] {
    filter: grayscale(100%) brightness(0.4);
}

.lcDeathTimer[b-dn79sfmet3] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.65rem;
    font-weight: 800;
    color: #ef4444;
    text-shadow: 0 0 4px rgba(0,0,0,0.9);
    z-index: 2;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}

/* Health bar below champion icon */
.lcHpBar[b-dn79sfmet3] {
    display: block;
    width: 100%;
    height: 3px;
    background: rgba(0,0,0,0.5);
    border-radius: 1.5px;
    overflow: hidden;
    margin-top: 2px;
}
.lcHpFill[b-dn79sfmet3] {
    display: block;
    height: 100%;
    border-radius: 1.5px;
    transition: width 0.4s ease;
}
.lcHpBlue[b-dn79sfmet3], .lcHpRed[b-dn79sfmet3] { background: linear-gradient(90deg, #22c55e, #4ade80); }

.lcH2hChampWrap.champDead .lcHpBar[b-dn79sfmet3] { display: none; }

.lcH2hChampWrap.baronBuff[b-dn79sfmet3] {
    animation: baronPulse-b-dn79sfmet3 2s ease-in-out infinite;
}

.lcH2hChampWrap.baronBuff[b-dn79sfmet3]::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: #9b59b6;
    border-right-color: #8e44ad;
    animation: baronSpin-b-dn79sfmet3 1.5s linear infinite;
    pointer-events: none;
}

.lcH2hChampWrap.baronBuff[b-dn79sfmet3]::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    box-shadow: 0 0 6px 1px rgba(155, 89, 182, 0.5);
    pointer-events: none;
    animation: baronGlow-b-dn79sfmet3 2s ease-in-out infinite;
}

@keyframes baronSpin-b-dn79sfmet3 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes baronPulse-b-dn79sfmet3 {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.15); }
}

@keyframes baronGlow-b-dn79sfmet3 {
    0%, 100% { box-shadow: 0 0 4px 1px rgba(155, 89, 182, 0.3); }
    50% { box-shadow: 0 0 8px 2px rgba(155, 89, 182, 0.6); }
}

.lcH2hChamp[b-dn79sfmet3] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    object-fit: cover;
    flex-shrink: 0;
}
.lcH2hChampBlue[b-dn79sfmet3] {
    border-color: rgba(96, 165, 250, 0.35);
}
.lcH2hChampRed[b-dn79sfmet3] {
    border-color: rgba(248, 113, 113, 0.35);
}

.lcH2hLevel[b-dn79sfmet3] {
    font-size: 0.58rem;
    font-weight: 700;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    margin: 0 -2px;
}
.lcH2hLevelBlue[b-dn79sfmet3] {
    background: rgba(96, 165, 250, 0.2);
    color: #93c5fd;
}
.lcH2hLevelRed[b-dn79sfmet3] {
    background: rgba(248, 113, 113, 0.2);
    color: #fca5a5;
}

.lcH2hName[b-dn79sfmet3] {
    color: #e2e8f0;
    font-weight: 600;
    font-size: 0.66rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70px;
}

.lcH2hKda[b-dn79sfmet3] {
    font-size: 0.62rem;
    white-space: nowrap;
    color: #94a3b8;
}
.lcH2hK[b-dn79sfmet3] { color: #4ade80; }
.lcH2hD[b-dn79sfmet3] { color: #f87171; }
.lcH2hA[b-dn79sfmet3] { color: #94a3b8; }

.lcH2hCs[b-dn79sfmet3] {
    font-size: 0.6rem;
    color: #64748b;
    white-space: nowrap;
}

.lcH2hGold[b-dn79sfmet3] {
    font-size: 0.6rem;
    color: #fbbf24;
    font-weight: 600;
    white-space: nowrap;
}

.lcH2hCenter[b-dn79sfmet3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 42px;
    flex-shrink: 0;
    gap: 1px;
}

.lcH2hRole[b-dn79sfmet3] {
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #64748b;
    text-transform: uppercase;
}

.lcH2hGoldDiff[b-dn79sfmet3] {
    font-size: 0.54rem;
    font-weight: 700;
    white-space: nowrap;
}
.lcH2hGdBlue[b-dn79sfmet3] {
    color: #60a5fa;
}
.lcH2hGdRed[b-dn79sfmet3] {
    color: #f87171;
}

/* Hide gold/CS columns on very small screens to keep it readable */
@media (max-width: 500px) {
    .lcH2hGold[b-dn79sfmet3], .lcH2hCs[b-dn79sfmet3] {
        display: none;
    }
    .lcH2hName[b-dn79sfmet3] {
        max-width: 55px;
    }
}

/* ── No Live Data Badge ── */

.lcNoLiveBadge[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    margin: 4px 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.lcNoLiveIcon[b-dn79sfmet3] {
    opacity: 0.5;
    flex-shrink: 0;
}

.liveDraftRow[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 8px 0 4px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 8px;
}

.liveDraftSide[b-dn79sfmet3] {
    display: flex;
    gap: 3px;
}

.liveDraftChamp[b-dn79sfmet3] {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    object-fit: cover;
}

.liveDraftBlue .liveDraftChamp[b-dn79sfmet3] {
    border-color: rgba(96, 165, 250, 0.3);
}

.liveDraftRed .liveDraftChamp[b-dn79sfmet3] {
    border-color: rgba(248, 113, 113, 0.3);
}

.liveDraftSpacer[b-dn79sfmet3] {
    width: 12px;
}

.liveStats[b-dn79sfmet3] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 10px 0;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.liveStatRow[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.liveStatLabel[b-dn79sfmet3] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    text-align: center;
    min-width: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.liveStatIcon[b-dn79sfmet3] {
    width: 14px;
    height: 14px;
    object-fit: contain;
    opacity: 0.8;
}

.liveStatVal[b-dn79sfmet3] {
    font-size: 0.85rem;
    font-weight: 800;
    min-width: 45px;
}

.liveBlue[b-dn79sfmet3] {
    color: #60a5fa;
    text-align: right;
}

.liveRed[b-dn79sfmet3] {
    color: #f87171;
    text-align: left;
}

.liveGameTime[b-dn79sfmet3] {
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--muted);
    margin-top: 2px;
}

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

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

.liveDraftTag[b-dn79sfmet3] {
    font-size: 0.55rem;
    font-weight: 900;
    padding: 1px 6px;
    border-radius: 3px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    letter-spacing: 0.06em;
}

/* Series Score */
.liveSeriesScore[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.liveScoreNum[b-dn79sfmet3] {
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.liveScoreWin[b-dn79sfmet3] {
    color: #22c55e;
}

.liveScoreSep[b-dn79sfmet3] {
    font-size: 1rem;
    color: var(--muted);
    opacity: 0.5;
    font-weight: 600;
}

/* Previous Games */
.livePrevGames[b-dn79sfmet3] {
    margin: 8px 0;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 8px;
}

.livePrevGame[b-dn79sfmet3] {
    padding: 6px 0;
}

.livePrevGame + .livePrevGame[b-dn79sfmet3] {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.livePrevGameHeader[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.livePrevGameNum[b-dn79sfmet3] {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.livePrevWinner[b-dn79sfmet3] {
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.livePrevScore[b-dn79sfmet3] {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--text);
}

.livePrevTime[b-dn79sfmet3] {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text);
    opacity: 0.7;
    margin-left: auto;
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 6px;
    border-radius: 4px;
}

.livePrevGame .liveDraftRow[b-dn79sfmet3] {
    margin: 4px 0 0;
    padding: 4px 6px;
}

.livePrevGame .liveDraftChamp[b-dn79sfmet3] {
    width: 22px;
    height: 22px;
}

/* Previous game winner banner */
.livePrevGameWinner[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    flex-wrap: wrap;
}

.livePrevWinBlue[b-dn79sfmet3] {
    background: rgba(37, 99, 235, 0.10);
    border-left: 3px solid #3b82f6;
}

.livePrevWinRed[b-dn79sfmet3] {
    background: rgba(220, 38, 38, 0.10);
    border-left: 3px solid #ef4444;
}

.livePrevWinTag[b-dn79sfmet3] {
    font-size: 0.58rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 6px;
    border-radius: 3px;
    background: #22c55e;
    color: #fff;
    line-height: 1;
}

.livePrevWinnerName[b-dn79sfmet3] {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--text);
}

/* Previous game team header (blue left / red right) */
.livePrevTeamHeader[b-dn79sfmet3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    margin: 4px 0 0;
    background: rgba(0, 0, 0, 0.12);
    border-radius: 6px 6px 0 0;
}

.livePrevTeamSide[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.livePrevTeamRight[b-dn79sfmet3] {
    flex-direction: row-reverse;
}

.livePrevTeamLogo[b-dn79sfmet3] {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.livePrevTeamName[b-dn79sfmet3] {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

/* Previous game actions (Show Details button) */
.livePrevActions[b-dn79sfmet3] {
    padding: 4px 0 2px;
    margin: 0;
}

.livePrevBtn[b-dn79sfmet3] {
    font-size: 0.75rem !important;
    padding: 8px 16px !important;
    min-height: unset;
}

/* Previous game scoreboard (compact) */
.livePrevStats[b-dn79sfmet3] {
    margin: 4px 0;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.10);
    border-radius: 6px;
}

.livePrevStats .liveStatRow[b-dn79sfmet3] {
    gap: 6px;
}

.livePrevStats .liveStatVal[b-dn79sfmet3] {
    font-size: 0.78rem;
}

.livePrevStats .liveStatLabel[b-dn79sfmet3] {
    font-size: 0.6rem;
}

/* Prediction result predictions within previous games */
.livePrevPredictions[b-dn79sfmet3] {
    padding: 6px 8px;
    margin: 0;
    background: rgba(0, 0, 0, 0.08);
    border: none;
}

.livePredResult[b-dn79sfmet3] {
    position: relative;
}

.livePredIcon[b-dn79sfmet3] {
    font-size: 0.75rem;
    font-weight: 900;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}

.livePredCorrect .livePredIcon[b-dn79sfmet3] {
    color: #22c55e;
}

.livePredWrong .livePredIcon[b-dn79sfmet3] {
    color: #ef4444;
}

.livePredCorrect[b-dn79sfmet3] {
    background: rgba(34, 197, 94, 0.06);
    border-radius: 4px;
    padding: 2px 4px;
}

.livePredWrong[b-dn79sfmet3] {
    background: rgba(239, 68, 68, 0.06);
    border-radius: 4px;
    padding: 2px 4px;
}

/* Collapsible toggle for previous games */
.livePrevToggle[b-dn79sfmet3] {
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    user-select: none;
}

.livePrevToggle[b-dn79sfmet3]::-webkit-details-marker {
    display: none;
}

.livePrevToggle[b-dn79sfmet3]::before {
    content: '\25B6';
    font-size: 0.55rem;
    transition: transform 0.2s ease;
    display: inline-block;
    color: var(--muted);
}

details[open] > .livePrevToggle[b-dn79sfmet3]::before {
    transform: rotate(90deg);
}

.livePrevToggle:hover[b-dn79sfmet3] {
    color: var(--text);
}

.livePrevSideTag[b-dn79sfmet3] {
    font-size: 0.55rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 1px 5px;
    border-radius: 3px;
}

/* ── Broadcast-Style Live Card ───────────────────────────── */

.liveCardWide[b-dn79sfmet3] {
    max-width: none;
    width: 100%;
    overflow: hidden;
}

.lcInfoBar[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.15);
    border-radius: var(--radiusSm) var(--radiusSm) 0 0;
}

/* ── Waiting Card (no data yet) ─── */
.lcWaitingCard[b-dn79sfmet3] {
    padding-bottom: 0;
}
.lcWaitingBody[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 28px 20px;
}
.lcWaitingCenter[b-dn79sfmet3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.lcWaitingText[b-dn79sfmet3] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* ── Stale Data Indicator ─── */
.lcStaleBadge[b-dn79sfmet3] {
    margin-left: auto;
    font-size: 0.65rem;
    font-weight: 700;
    color: #eab308;
    opacity: 0.8;
    letter-spacing: 0.02em;
}
.lcGameTimeStale[b-dn79sfmet3] {
    opacity: 0.5;
}

/* ── Current Game Indicator ─── */
.lcGameIndicator[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 16px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #4ade80;
    letter-spacing: 0.04em;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(34, 197, 94, 0.06);
}
.lcGameIndicator.lcGameFinished[b-dn79sfmet3] {
    color: var(--muted);
    background: rgba(255,255,255,0.02);
}
.lcGameFinTag[b-dn79sfmet3] {
    font-size: 0.58rem;
    font-weight: 900;
    padding: 1px 6px;
    border-radius: 3px;
    background: rgba(148, 163, 184, 0.12);
    color: var(--muted);
    letter-spacing: 0.06em;
}
.lcGameStatusIcon[b-dn79sfmet3] {
    flex-shrink: 0;
}

/* ── Scoreboard Grid ─── */
.lcScoreboard[b-dn79sfmet3] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 10px;
}

.lcTeamSide[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    overflow: hidden;
}

.lcTeamSideRight[b-dn79sfmet3] {
    justify-content: flex-end;
}

.lcTeamLogo[b-dn79sfmet3] {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    padding: 3px;
    flex-shrink: 0;
}

.lcTeamMeta[b-dn79sfmet3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lcTeamMetaRight[b-dn79sfmet3] {
    align-items: flex-end;
    text-align: right;
}

.lcTeamNameBlock[b-dn79sfmet3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.lcTeamNameBlockRight[b-dn79sfmet3] {
    align-items: flex-end;
    text-align: right;
}

.lcWinTag[b-dn79sfmet3] {
    font-size: 0.62rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 3px;
    background: #22c55e;
    color: #fff;
    line-height: 1.2;
    width: fit-content;
}

.lcTeamName[b-dn79sfmet3] {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

.lcSideTag[b-dn79sfmet3] {
    font-size: 0.55rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 3px;
    padding: 1px 5px;
    width: fit-content;
}

.lcSideBlue[b-dn79sfmet3] {
    color: #60a5fa;
    background: rgba(96,165,250,0.12);
}

.lcSideRed[b-dn79sfmet3] {
    color: #f87171;
    background: rgba(248,113,113,0.12);
}

/* ── Series Dots ─── */
.lcSeriesDots[b-dn79sfmet3] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.lcDot[b-dn79sfmet3] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: 1.5px solid rgba(255,255,255,0.15);
}

.lcDotWon[b-dn79sfmet3] {
    border-color: transparent;
}

.lcDotBlue[b-dn79sfmet3] {
    background: #3b82f6;
    box-shadow: 0 0 6px rgba(59,130,246,0.4);
}

.lcDotRed[b-dn79sfmet3] {
    background: #ef4444;
    box-shadow: 0 0 6px rgba(239,68,68,0.4);
}

/* ── Center (Kills, Time, Gold) ─── */
.lcCenter[b-dn79sfmet3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 80px;
}

.lcKillRow[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lcKills[b-dn79sfmet3] {
    font-size: 1.6rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.lcKillsBlue[b-dn79sfmet3] { color: #60a5fa; }
.lcKillsRed[b-dn79sfmet3] { color: #f87171; }

.lcGameTimeRow[b-dn79sfmet3] {
    text-align: center;
    margin-bottom: 2px;
}

.lcGameTime[b-dn79sfmet3] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

.lcVs[b-dn79sfmet3] {
    font-size: 0.7rem;
    font-weight: 900;
    color: var(--muted);
    opacity: 0.5;
}

.lcGoldRow[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
    justify-content: center;
    padding: 10px 20px 20px;
    border-top: 1px solid rgba(255,255,255,0.05);
    background: rgba(0,0,0,0.08);
}

.lcGoldVal[b-dn79sfmet3] {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.lcGoldVs[b-dn79sfmet3] {
    font-size: 0.7rem;
    font-weight: 900;
    color: var(--muted);
    opacity: 0.5;
}

.lcGoldValWrap[b-dn79sfmet3] {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.lcGoldIcon[b-dn79sfmet3] {
    width: 14px;
    height: 14px;
}

.lcGoldDiff[b-dn79sfmet3] {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.68rem;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    margin-top: 1px;
}

.lcGoldDiffBlue[b-dn79sfmet3] {
    color: #93c5fd;
    background: rgba(59,130,246,0.15);
}

.lcGoldDiffRed[b-dn79sfmet3] {
    color: #fca5a5;
    background: rgba(239,68,68,0.15);
}

/* ── Inline Objectives (next to gold) ─── */
.lcObjInline[b-dn79sfmet3] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.lcObjIconSm[b-dn79sfmet3] {
    width: 24px;
    height: 24px;
    object-fit: contain;
    opacity: 0.85;
}

/* ── Dragon Types Row ─── */
.lcDragonsRow[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    min-height: 44px;
    border-top: 1px solid rgba(255,255,255,0.05);
    background: rgba(0,0,0,0.08);
}

.lcDragonsSide[b-dn79sfmet3] {
    display: flex;
    gap: 5px;
    min-width: 60px;
    align-items: center;
}

.lcDragonsSideRight[b-dn79sfmet3] {
    justify-content: flex-end;
}

.lcDragonsLabel[b-dn79sfmet3] {
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.lcDragonIcon[b-dn79sfmet3] {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 50%;
}

.lcDragonSoul[b-dn79sfmet3] {
    box-shadow: 0 0 8px 3px rgba(255, 215, 0, 0.7);
    border: 2px solid #ffd700;
    transform: scale(1.15);
}

/* ── Objective Announcements ─── */

.objAnnounce[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 14px;
    margin: 4px 0;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(0,0,0,0.4), rgba(0,0,0,0.2));
    border: 1px solid rgba(255,255,255,0.08);
    animation: objSlideIn-b-dn79sfmet3 0.4s ease-out;
    transition: opacity 2s ease-out;
    opacity: 1;
}

.objAnnounce.objAnnounceFading[b-dn79sfmet3] {
    opacity: 0;
}

.objAnnounceLeft[b-dn79sfmet3] {
    border-left: 3px solid #60a5fa;
}

.objAnnounceRight[b-dn79sfmet3] {
    border-left: 3px solid #f87171;
}

.objAnnounceTeam[b-dn79sfmet3] {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.objAnnounceType[b-dn79sfmet3] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #fbbf24;
    letter-spacing: 0.02em;
}

.objAnnounceTime[b-dn79sfmet3] {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--muted);
    margin-left: 4px;
    font-variant-numeric: tabular-nums;
}

@keyframes objSlideIn-b-dn79sfmet3 {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── H2H Player Stats ─── */
.lcH2hSection[b-dn79sfmet3] {
    border-top: 1px solid rgba(255,255,255,0.05);
    background: rgba(0,0,0,0.12);
    padding: 6px 10px 10px;
}

.lcH2hHeader[b-dn79sfmet3] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 6px;
    padding: 2px 0 6px;
}

.lcH2hTeamLabel[b-dn79sfmet3] {
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.lcH2hTeamRight[b-dn79sfmet3] {
    text-align: right;
}

.lcH2hRoleLabel[b-dn79sfmet3] {
    font-size: 0.55rem;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
}

.lcH2hRow[b-dn79sfmet3] {
    display: grid;
    grid-template-columns: 1fr 60px 1fr;
    align-items: center;
    gap: 4px;
    padding: 3px 0;
    border-top: 1px solid rgba(255,255,255,0.03);
}

.lcH2hPlayer[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    min-width: 0;
}

.lcH2hLeft[b-dn79sfmet3] {
    justify-content: flex-end;
}

.lcH2hRight[b-dn79sfmet3] {
    justify-content: flex-start;
}

.lcH2hChamp[b-dn79sfmet3] {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
}

.lcH2hName[b-dn79sfmet3] {
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
}

.lcH2hKda[b-dn79sfmet3] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-size: 0.65rem;
}

.lcPtK[b-dn79sfmet3] { color: #4ade80; }
.lcPtD[b-dn79sfmet3] { color: #f87171; }
.lcPtA[b-dn79sfmet3] { color: #94a3b8; }

.lcH2hCs[b-dn79sfmet3] {
    font-weight: 600;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    font-size: 0.62rem;
    flex-shrink: 0;
}

.lcH2hGold[b-dn79sfmet3] {
    font-weight: 700;
    color: #fbbf24;
    font-variant-numeric: tabular-nums;
    font-size: 0.62rem;
    flex-shrink: 0;
}

.lcH2hRole[b-dn79sfmet3] {
    font-size: 0.58rem;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lcH2hGoldDiff[b-dn79sfmet3] {
    font-size: 0.55rem;
    font-weight: 800;
    padding: 0px 4px;
    border-radius: 3px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Live Card Responsive ─── */
@media (max-width: 640px) {
    .liveCardWide[b-dn79sfmet3] { max-width: none; }

    .lcScoreboard[b-dn79sfmet3] {
        gap: 6px;
        padding: 10px 10px 8px;
    }

    .lcTeamLogo[b-dn79sfmet3] { width: 32px; height: 32px; }
    .lcTeamName[b-dn79sfmet3] { font-size: 0.76rem; max-width: 80px; }
    .lcKills[b-dn79sfmet3] { font-size: 1.2rem; }
    .lcCenter[b-dn79sfmet3] { min-width: 70px; }

    .lcH2hRow[b-dn79sfmet3] {
        grid-template-columns: 1fr 46px 1fr;
        gap: 2px;
    }

    .lcH2hPlayer[b-dn79sfmet3] { gap: 3px; font-size: 0.6rem; }
    .lcH2hChamp[b-dn79sfmet3] { width: 20px; height: 20px; }
    .lcH2hCs[b-dn79sfmet3], .lcH2hGold[b-dn79sfmet3] { display: none; }
    .lcH2hName[b-dn79sfmet3] { max-width: 56px; }

    .lcGameTabs[b-dn79sfmet3] { padding: 4px 8px; gap: 3px; }
    .lcGameTab[b-dn79sfmet3] { padding: 4px 10px; font-size: 0.65rem; }
}

/* ── Game Tabs ─────────────────────────────────────────────── */
.lcGameTabs[b-dn79sfmet3] {
    display: flex;
    gap: 4px;
    padding: 6px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.12);
    overflow-x: auto;
}

.lcGameTab[b-dn79sfmet3] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    background: rgba(255,255,255,0.04);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.lcGameTab:hover[b-dn79sfmet3] {
    background: rgba(255,255,255,0.08);
    color: #e2e8f0;
}

.lcGameTabActive[b-dn79sfmet3] {
    background: rgba(59,130,246,0.18);
    border-color: rgba(59,130,246,0.4);
    color: #93c5fd;
}

.lcGameTabFinished[b-dn79sfmet3] {
    opacity: 0.8;
}

.lcGameTabFinished[b-dn79sfmet3]::before {
    content: '\2713';
    font-size: 0.65rem;
    color: #4ade80;
    margin-right: 2px;
}

.lcGameTabContent[b-dn79sfmet3] {
    animation: fadeInTab-b-dn79sfmet3 0.2s ease;
}

@keyframes fadeInTab-b-dn79sfmet3 {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Draft Gating (live card) ─────────────────────────────── */

.lcDraftGated[b-dn79sfmet3] {
    text-align: center;
}

.lcGatePrompt[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    color: rgba(148,163,184,0.8);
    font-size: 0.8rem;
    margin-top: 8px;
}

.lcGateBtn[b-dn79sfmet3] {
    display: inline-flex;
    padding: 6px 16px;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: #fff;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    transition: filter 0.15s;
}

.lcGateBtn:hover[b-dn79sfmet3] {
    filter: brightness(1.15);
}

/* ── Mobile Bottom Tab Bar ───────────────────────────────── */
.mobileTabBar[b-dn79sfmet3] {
    display: none;
}

.mobileTabBarSpacer[b-dn79sfmet3] {
    display: none;
}

@media (max-width: 768px) {
    .mobileTabBar[b-dn79sfmet3] {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: rgba(10, 15, 28, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid rgba(255,255,255,0.08);
        padding: 6px 0 env(safe-area-inset-bottom, 6px);
        justify-content: space-around;
    }

    .mobileTab[b-dn79sfmet3] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 6px 12px;
        background: none;
        border: none;
        color: rgba(148,163,184,0.6);
        cursor: pointer;
        transition: color 0.15s ease;
        position: relative;
        font-family: inherit;
    }

    .mobileTab:active[b-dn79sfmet3] {
        transform: scale(0.95);
    }

    .mobileTabDisabled[b-dn79sfmet3] {
        opacity: 0.3;
        cursor: default;
    }

    .mobileTabLabel[b-dn79sfmet3] {
        font-size: 0.6rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .mobileTabActive[b-dn79sfmet3] {
        color: #93c5fd;
    }

    .mobileTabActiveLive[b-dn79sfmet3] { color: #6ee7b7; }
    .mobileTabActiveUpcoming[b-dn79sfmet3] { color: #93c5fd; }
    .mobileTabActiveRecent[b-dn79sfmet3] { color: #fcd34d; }
    .mobileTabActiveModels[b-dn79sfmet3] { color: #c4b5fd; }

    .mobileTabLiveDot[b-dn79sfmet3] {
        position: absolute;
        top: 2px;
        right: 8px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #22c55e;
        animation: previewLiveBlink-b-dn79sfmet3 1.5s infinite;
    }

    /* Hide preview card grid on mobile — bottom bar replaces it */
    .previewCardGrid[b-dn79sfmet3] {
        display: none !important;
    }

    /* Spacer so content doesn't hide behind the fixed bottom bar */
    .mobileTabBarSpacer[b-dn79sfmet3] {
        display: block;
        height: 68px;
    }
}

/* ── Recent-card prelive odds row ──
   Sits between the teams-and-score block and the model-prediction grid. Tiny
   chip pair tinted green for the winning side, red for the losing side, so
   the user can instantly read whether the result was the bookmaker's
   favourite or an upset. Hidden when the series has no captured odds. */
.recentCardOdds[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 12px;
    margin: 6px 0 10px;
    font-size: 0.78rem;
}
.recentCardOddsLabel[b-dn79sfmet3] {
    font-size: 0.64rem;
    font-weight: 700;
    color: var(--mutedFaint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.recentCardOddsChip[b-dn79sfmet3] {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
    letter-spacing: -0.005em;
}
.recentOddsWin[b-dn79sfmet3] {
    background: rgba(34, 197, 94, 0.16);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.35);
}
.recentOddsLose[b-dn79sfmet3] {
    background: rgba(248, 113, 113, 0.14);
    color: #f87171;
    border: 1px solid rgba(248, 113, 113, 0.3);
}
.recentCardOddsSep[b-dn79sfmet3] {
    color: var(--mutedFaint);
    font-weight: 600;
}

/* ── Upcoming market dropdown + Series Handicap (Premium) view ── */
.upcomingMarketSelect[b-dn79sfmet3] {
    font-weight: 600;
}

.upcomingHandicap[b-dn79sfmet3] {
    margin-top: 12px;
    background: rgba(34, 211, 238, 0.04);
    border: 1px solid rgba(34, 211, 238, 0.18);
    border-radius: 10px;
    padding: 12px 14px;
}

.hcapHead[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.hcapTitle[b-dn79sfmet3] {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text);
}

.hcapPremiumTag[b-dn79sfmet3] {
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    border-radius: 999px;
    padding: 2px 7px;
}

.hcapSides[b-dn79sfmet3] {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.hcapSide[b-dn79sfmet3] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--panelSoft);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 7px 10px;
}

.hcapSideRight[b-dn79sfmet3] {
    align-items: flex-end;
}

.hcapSideTeam[b-dn79sfmet3] {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text);
}

.hcapSideOdds[b-dn79sfmet3] {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.hcapTable[b-dn79sfmet3] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hcapRow[b-dn79sfmet3] {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr;
    align-items: center;
    gap: 8px;
    padding: 5px 4px;
    border-top: 1px solid var(--border);
}

.hcapRowModel[b-dn79sfmet3] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--textSoft);
}

.hcapRowCell[b-dn79sfmet3] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}

.hcapRowPct[b-dn79sfmet3] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.hcapRowEv[b-dn79sfmet3] {
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.hcapRowCell.foValueGood .hcapRowEv[b-dn79sfmet3] { color: #22c55e; }
.hcapRowCell.foValueBad .hcapRowEv[b-dn79sfmet3] { color: #ef4444; }

.hcapEmpty[b-dn79sfmet3] {
    font-size: 0.8rem;
    color: var(--muted);
    text-align: center;
}

.hcapLocked[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: #a855f7;
}

.hcapLockedText[b-dn79sfmet3] {
    flex: 1;
    font-size: 0.8rem;
    color: var(--textSoft);
    line-height: 1.4;
}

.hcapUpgradeBtn[b-dn79sfmet3] {
    flex-shrink: 0;
    font-size: 0.74rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    border-radius: 7px;
    padding: 5px 12px;
}

/* ── Upcoming market dropdown (custom, supports Premium tag) ── */
.marketDropdown[b-dn79sfmet3] { position: relative; }
/* Right-aligned menu variant — used on the live card where the trigger sits at the
   card's right edge, so a left-aligned menu would overflow and get clipped. */
.marketDropdown--right .marketDropdownMenu[b-dn79sfmet3] { left: auto; right: 0; }

.marketDropdownTrigger[b-dn79sfmet3] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--panelSoft);
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.marketDropdownTrigger:hover[b-dn79sfmet3] { border-color: #6366f1; }

.marketDropdownMenu[b-dn79sfmet3] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 50;
    min-width: 220px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 9px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.4);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.marketDropdownOption[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 9px 11px;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
    text-align: left;
    border-radius: 6px;
    cursor: pointer;
}

.marketDropdownOption:hover[b-dn79sfmet3] { background: var(--panelSoft); }
.marketDropdownOptionSel[b-dn79sfmet3] { background: rgba(99,102,241,0.14); }

.marketPremiumTag[b-dn79sfmet3] {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    border-radius: 999px;
    padding: 2px 8px;
}

/* Live-card series prediction header: label on the left, market dropdown on the right. */
.seriesPredHeaderRow[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.seriesPredHeaderRow .seriesPredLabel[b-dn79sfmet3] { margin: 0; }

/* Handicap +1.5/-1.5 tags above the team row (live card). Mirrors the detail pages:
   neutral pill, line number in a red (give) / green (get) badge. */
.hcapTagRow[b-dn79sfmet3] {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 8px 0 4px;
    flex-wrap: wrap;
}
.hcapTag[b-dn79sfmet3] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text);
    padding: 4px 8px 4px 12px;
    border-radius: 999px;
    background: var(--panelSoft);
    border: 1px solid var(--border);
}
.hcapTag strong[b-dn79sfmet3] {
    font-size: 0.95rem;
    font-weight: 800;
    padding: 2px 9px;
    border-radius: 999px;
    letter-spacing: -0.01em;
}
.hcapTagGive strong[b-dn79sfmet3] { color: #f87171; background: rgba(248, 113, 113, 0.16); }
.hcapTagGet strong[b-dn79sfmet3] { color: #4ade80; background: rgba(74, 222, 128, 0.16); }

.lcHandicapEmpty[b-dn79sfmet3] {
    font-size: 0.8rem;
    color: var(--muted);
    text-align: center;
    padding: 12px 8px;
}

/* Handicap line sub-header above the (shared) prediction UI */
.hcapLineLabel[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin: 10px 0 2px;
}

.hcapLineChips[b-dn79sfmet3] { display: inline-flex; gap: 6px; }

.hcapLineChip[b-dn79sfmet3] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text);
    background: var(--panelSoft);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 2px 8px;
}

/* ── Series Handicap header (Option A): tinted band, favourite chip, segmented toggle ── */
.hcapBar[b-dn79sfmet3] {
    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[b-dn79sfmet3] {
    color: #22d3ee;
    font-weight: 800;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hcapBarLines[b-dn79sfmet3] { display: inline-flex; align-items: center; gap: 12px; }

/* Favourite + underdog lines: plain text, both the same colour, with team logos and a
   clear vertical divider between the two sides. Not pill/clickable-styled. */
.hcapHdrSide[b-dn79sfmet3] { display: inline-flex; align-items: center; gap: 6px; }

.hcapHdrLogo[b-dn79sfmet3] {
    width: 17px;
    height: 17px;
    border-radius: 4px;
    object-fit: contain;
    flex-shrink: 0;
}

.hcapHdrTxt[b-dn79sfmet3] {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text);
}

.hcapHdrDiv[b-dn79sfmet3] {
    width: 1px;
    height: 18px;
    background: var(--border);
    opacity: 0.9;
}

.hcapSeg[b-dn79sfmet3] {
    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[b-dn79sfmet3] {
    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[b-dn79sfmet3] { color: var(--text); }

.hcapSegBtnOn[b-dn79sfmet3] {
    background: #22d3ee;
    color: #04222a;
}

/* ── Exact Score header: "TEAM1 [logo]  3–1  [logo] TEAM2" ── */
.esScoreHdr[b-dn79sfmet3] { gap: 10px; }
.esScoreNum[b-dn79sfmet3] {
    font-size: 0.95rem;
    font-weight: 800;
    color: #22d3ee;
    letter-spacing: 0.02em;
}

/* ── Exact Score single-value bars (one probability per model — not a two-sided split) ── */
.esRow[b-dn79sfmet3] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0;
}
.esRow .upPredModel[b-dn79sfmet3] { min-width: 92px; }
.esBar[b-dn79sfmet3] {
    position: relative;
    flex: 1;
    height: 26px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    border-radius: 7px;
    overflow: hidden;
}
.esBarFill[b-dn79sfmet3] {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    border-radius: 6px 0 0 6px;
    transition: width 0.2s ease;
    min-width: 2px;
}
.esBarPct[b-dn79sfmet3] {
    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[b-dn79sfmet3] { background: linear-gradient(90deg, #22d3ee, #0ea5b7); }
/* EV-coloured fill: green = +EV, red = −EV (the most-likely scoreline shown by value). */
.esBarFillPos[b-dn79sfmet3] { background: linear-gradient(90deg, #22c55e, #16a34a) !important; }
.esBarFillNeg[b-dn79sfmet3] { background: linear-gradient(90deg, #ef4444, #dc2626) !important; }
.esEv[b-dn79sfmet3] {
    flex-shrink: 0;
    font-size: 0.74rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
}
.esEvPos[b-dn79sfmet3] { color: #16331f; background: #4ade80; }
.esEvNeg[b-dn79sfmet3] { color: #fff; background: #b91c1c; }
.esNoOdds[b-dn79sfmet3] { font-size: 0.78rem; color: var(--muted); font-style: italic; margin: 4px 0 2px; }

/* Total Maps bet365 price chip in the header */
.tmOdds[b-dn79sfmet3] { font-size: 0.8rem; font-weight: 800; color: #fbbf24; margin-left: 6px; }

/* "New market — experimental" banner above the upcoming grid (owner preview) */
.newMarketBanner[b-dn79sfmet3] {
    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[b-dn79sfmet3] { color: #fbbf24; }