/* /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;
}

/* ── 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] {
    color-scheme: dark only;
    background: var(--panel, #1a2236);
    color: var(--text, #e2e8f0);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-n4qxfq516t] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /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;
}

.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;
}

/* ── 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: 6px;
    border: none;
    background: var(--hoverGlow);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.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-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;
}

.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 ──────────────────────────────────────────── */

@media (max-width: 768px) {
    .nav-links[b-oqt82hn74m],
    .nav-right[b-oqt82hn74m] {
        display: none;
    }

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

    .glass-nav[b-oqt82hn74m] {
        top: 8px;
        width: calc(100% - 24px);
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.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],
.components-rejoining-animation[b-wohe5y875j] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-wohe5y875j],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[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-retrying .components-rejoining-animation[b-wohe5y875j],
#components-reconnect-modal.components-reconnect-failed[b-wohe5y875j],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-wohe5y875j] {
    display: block;
}


#components-reconnect-modal[b-wohe5y875j] {
    background-color: #1a2236;
    color: #e2e8f0;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-wohe5y875j 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-wohe5y875j 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-wohe5y875j 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-wohe5y875j]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-wohe5y875j 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-wohe5y875j {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-wohe5y875j {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-wohe5y875j {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-wohe5y875j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

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

#components-reconnect-modal button[b-wohe5y875j] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-wohe5y875j] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-wohe5y875j] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-wohe5y875j] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-wohe5y875j] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-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 components-rejoining-animation-b-wohe5y875j {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /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);
}

/* ── 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: 560px;
    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;
}

/* ── 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);
}

/* ── 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);
}

/* ── 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;
    }
}
/* /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;
    }
}

/* ── 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;
}
/* /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/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;
}

/* 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;
}

/* 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);
}

/* ── 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);
}

/* 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;
}

.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] {
    font-size: 0.85rem;
    color: rgba(148,163,184,0.45);
}

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

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

.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;
}



/* ── Model Stats Cards ─────────────────────────────────────── */

.modelStatsGrid[b-l0rg40o53e] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.modelStatCard[b-l0rg40o53e] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadowSoft);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.modelStatCard:hover[b-l0rg40o53e] {
    transform: translateY(-4px);
    box-shadow: var(--hoverShadow);
}

.modelStatCard.niche[b-l0rg40o53e] {
    border-color: rgba(245, 158, 11, 0.3);
    background: linear-gradient(135deg, rgba(245,158,11,0.06), rgba(217,119,6,0.03));
}

.modelStatCard.premium[b-l0rg40o53e] {
    border-color: rgba(139, 92, 246, 0.3);
    background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(168,85,247,0.04));
}

.modelStatHeader[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 6px;
}
.modelStatHeader > span[b-l0rg40o53e] {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.modelStatName[b-l0rg40o53e] {
    font-weight: 900;
    font-size: 1.1rem;
    color: var(--text);
}
.modelStatName.name-basic[b-l0rg40o53e] { color: #60a5fa; }
.modelStatName.name-niche[b-l0rg40o53e] { color: #f59e0b; }
.modelStatName.name-premium[b-l0rg40o53e] { color: #a78bfa; }

.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: 12px 0 8px;
    padding: 12px 14px;
    background: var(--hoverGlow);
    border-left: 3px solid var(--blue);
    border-radius: 0 6px 6px 0;
    font-style: italic;
}

.niche .modelDescription[b-l0rg40o53e] {
    border-left-color: #f59e0b;
    background: rgba(245, 158, 11, 0.04);
}


.premium .modelDescription[b-l0rg40o53e] {
    border-left-color: #fbbf24;
    background: rgba(251, 191, 36, 0.04);
}

.modelTrainedAt[b-l0rg40o53e] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    margin: 8px 0 4px;
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    width: fit-content;
}

.modelTrainedAt svg[b-l0rg40o53e] {
    opacity: 0.6;
    flex-shrink: 0;
}

.modelTrainedAt.modelTrainedFastTree[b-l0rg40o53e] {
    color: #60a5fa;
    background: rgba(96,165,250,0.08);
    border: 1px solid rgba(96,165,250,0.15);
}

.modelTrainedAt.modelTrainedLightGBM[b-l0rg40o53e] {
    color: #fbbf24;
    background: rgba(251,191,36,0.08);
    border: 1px solid rgba(251,191,36,0.15);
}

.modelTrainedAt.modelTrainedPcaSweep[b-l0rg40o53e] {
    color: #a78bfa;
    background: rgba(167,139,250,0.08);
    border: 1px solid rgba(167,139,250,0.15);
}

.modelTrainedAt.modelTrainedFastTree svg[b-l0rg40o53e],
.modelTrainedAt.modelTrainedLightGBM svg[b-l0rg40o53e],
.modelTrainedAt.modelTrainedPcaSweep svg[b-l0rg40o53e] {
    opacity: 0.8;
}

/* Metrics block (No Draft / With Draft) */
.metricsBlock[b-l0rg40o53e] {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--borderSoft);
}

.metricsBlock:first-of-type[b-l0rg40o53e] {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.metricsBlockLabel[b-l0rg40o53e] {
    display: block;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--textSoft);
    margin-bottom: 10px;
}

.metricsGrid[b-l0rg40o53e] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.metricItem[b-l0rg40o53e] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    background: var(--panelDeep);
    border: 1px solid var(--borderSoft);
    border-radius: 8px;
    position: relative;
    cursor: help;
    transition: border-color 0.15s ease;
}

.metricItem[data-tip]:hover[b-l0rg40o53e] {
    border-color: rgba(96, 165, 250, 0.25);
}

.metricItem[data-tip][b-l0rg40o53e]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) scale(0.95);
    background: var(--tooltipBg);
    color: var(--tooltipText);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--tooltipBorder);
    box-shadow: 0 8px 24px var(--shadow);
    white-space: normal;
    width: 220px;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 100;
}

.metricItem[data-tip]:hover[b-l0rg40o53e]::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* Arrow */
.metricItem[data-tip][b-l0rg40o53e]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--tooltipBg);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 100;
}

.metricItem[data-tip]:hover[b-l0rg40o53e]::before {
    opacity: 1;
}

.metricItem.wide[b-l0rg40o53e] {
    grid-column: 1 / -1;
}

.metricVal[b-l0rg40o53e] {
    font-size: 1rem;
    font-weight: 900;
    color: var(--blueLight);
    letter-spacing: -0.01em;
}

.niche .metricVal[b-l0rg40o53e] {
    color: #fbbf24;
}

.premium .metricVal[b-l0rg40o53e] {
    color: #a78bfa;
}

.metricKey[b-l0rg40o53e] {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--mutedFaint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.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 ────────────────────── */

.recentPredsBlock[b-l0rg40o53e] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.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;
}

.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;
}

.recentPredSeries:hover[b-l0rg40o53e] {
    border-color: rgba(255,255,255,0.12);
}

.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;
}

.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;
}

.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;
}

/* ── 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;
    overflow: hidden;
    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;
}

.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;
}

.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;
    overflow: hidden;
    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;
}

.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;
}

.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;
}

/* 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: #60cfff;
}

.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;
}

.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);
}

/* Predictions inside recent card */
/* Prediction summary chips (above matchup) */
.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] {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mutedFaint);
    margin-bottom: 8px;
}

.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;
}

/* ── 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: 1024px) {
    .modelStatsGrid[b-l0rg40o53e] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .hero[b-l0rg40o53e] {
        padding: 36px 20px 32px;
    }

    .heroBannerImg[b-l0rg40o53e] {
        max-width: 320px;
    }

    .statsRibbon[b-l0rg40o53e] {
        gap: 12px;
    }

    .statChip[b-l0rg40o53e] {
        padding: 8px 14px;
    }

    .statValue[b-l0rg40o53e] {
        font-size: 1.1rem;
    }

    .section[b-l0rg40o53e] {
        padding: 0 16px;
    }

    .heroCtas[b-l0rg40o53e] {
        flex-direction: column;
        align-items: center;
    }

    .ctaBtn[b-l0rg40o53e] {
        width: 100%;
        max-width: 260px;
        justify-content: center;
    }

    .previewCardGrid[b-l0rg40o53e] {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        padding: 10px 16px 12px;
        margin-bottom: 24px;
        top: 56px;
    }

    .previewCard[b-l0rg40o53e] {
        min-height: 76px;
        padding: 10px 12px;
        gap: 5px;
    }

    .upcomingGrid[b-l0rg40o53e] {
        grid-template-columns: 1fr;
    }

    .upcomingHeader[b-l0rg40o53e] {
        flex-direction: column;
        align-items: flex-start;
    }

    .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;
    }
}

@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) {
    .previewCardGrid[b-l0rg40o53e] {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .previewCard[b-l0rg40o53e] {
        min-height: auto;
        padding: 10px 12px;
        gap: 4px;
    }

    .previewCardTeams[b-l0rg40o53e] {
        font-size: 0.78rem;
    }

    .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 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;
    }
}

.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;
}

/* ── 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;
    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;
}

.lcGoldDiff[b-l0rg40o53e] {
    font-size: 0.72rem;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
}

.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;
}

.lcH2hCenter[b-l0rg40o53e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.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;
}

/* ── 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; }
}

/* ── 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);
}
/* /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;
    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); }

.bcGoldDiff[b-cr1hsptdgd] {
    font-size: 0.72rem;
    font-weight: 800;
    padding: 1px 8px;
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
}

.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;
}

/* ── 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 */
.draftEdgeBanner[b-cr1hsptdgd] {
    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-cr1hsptdgd] {
    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-cr1hsptdgd] {
    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-cr1hsptdgd] {
    background: rgba(148, 163, 184, 0.06);
    border-color: rgba(148, 163, 184, 0.2);
}
.deBannerLabel[b-cr1hsptdgd] {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}
.deBannerValue[b-cr1hsptdgd] {
    font-size: 1.1rem;
    font-weight: 950;
}
.deBannerBlue .deBannerValue[b-cr1hsptdgd] { color: #60a5fa; }
.deBannerRed .deBannerValue[b-cr1hsptdgd] { color: #f87171; }
.deBannerEven .deBannerValue[b-cr1hsptdgd] { color: var(--muted); }
.deBannerSide[b-cr1hsptdgd] {
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 4px;
}
.deBannerBlue .deBannerSide[b-cr1hsptdgd] { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.deBannerRed .deBannerSide[b-cr1hsptdgd] { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.deBannerEven .deBannerSide[b-cr1hsptdgd] { background: rgba(148, 163, 184, 0.1); color: var(--muted); }

/* Lane Row H2H Layout */
.laneRow[b-cr1hsptdgd] { margin-bottom: 4px; border-radius: 8px; overflow: hidden; 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; }
.laneSide.blueSide[b-cr1hsptdgd] { justify-content: flex-start; }
.laneSide.redSide[b-cr1hsptdgd] { justify-content: flex-end; }
.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; }
}
/* /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;
    }
}
/* /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: 700px) {
    .matchHistoryRow[b-qa4wvcklju] {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

.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: 700px) {
    .matchHistoryRow[b-dhksjw38ga] {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

.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/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;
}

.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; }

/* 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);
}

.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);
}

.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: 24px 16px;
    }

    .rankingsHeader[b-u3f053tc9c] {
        flex-direction: column;
    }

    .rankingsControls[b-u3f053tc9c] {
        width: 100%;
    }

    .searchInput[b-u3f053tc9c] {
        flex: 1;
        min-width: 0;
    }

    .statsGrid[b-u3f053tc9c] {
        grid-template-columns: repeat(3, 1fr);
    }

    .statsRibbon[b-u3f053tc9c] {
        gap: 6px;
    }

    .statCard[b-u3f053tc9c] {
        min-width: 60px;
        padding: 4px 8px;
    }

    .leagueGrid[b-u3f053tc9c] {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 12px;
    }

    .leagueDetailHeader[b-u3f053tc9c] {
        flex-direction: column;
        gap: 12px;
        padding: 16px;
    }

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

    .champRoleGrid[b-u3f053tc9c] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .teamTableTitle[b-u3f053tc9c] {
        padding: 14px 16px 8px !important;
    }
}

/* ── 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);
}

.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;
}

/* ── 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 ────────────────────────────────────────── */

.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;
}

.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;
}

.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;
}

.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;
}

.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;
}

.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);
}

/* ── 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);
}

/* ── 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;
    }

    .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;
    }
}
/* /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/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/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/ModelComparisonGrid.razor.rz.scp.css */
/* Compare panel — sits inline where ResultBlock normally is */
.comparePanel[b-mlqmenkex6] {
    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-mlqmenkex6] {
    margin-bottom: 18px;
    text-align: center;
}
.comparePanelTitle[b-mlqmenkex6] {
    display: block;
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -0.02em;
}
.comparePanelSub[b-mlqmenkex6] {
    display: block;
    font-size: 0.82rem;
    color: var(--muted);
    margin-top: 4px;
}

/* Grid layout — 2x2 for breathing room */
.compareGrid[b-mlqmenkex6] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

/* Individual model cards */
.compareCard[b-mlqmenkex6] {
    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-mlqmenkex6]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--border);
}
.compareCard:hover[b-mlqmenkex6] {
    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-mlqmenkex6]::before {
    background: linear-gradient(90deg, #b45309, #f59e0b);
}
.compareCard-niche[b-mlqmenkex6] {
    border-color: rgba(217, 119, 6, 0.3);
}
.compareCard-premium[b-mlqmenkex6]::before {
    background: linear-gradient(90deg, #7c3aed, #a78bfa);
}
.compareCard-premium[b-mlqmenkex6] {
    border-color: rgba(139, 92, 246, 0.3);
}
.compareCard-avg[b-mlqmenkex6]::before,
.compareAverage[b-mlqmenkex6]::before {
    background: linear-gradient(90deg, #a78bfa, #818cf8, #a78bfa);
}
.compareCard-avg[b-mlqmenkex6],
.compareAverage[b-mlqmenkex6] {
    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-mlqmenkex6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-top: 2px;
    gap: 6px;
}
.compareCardHead > span[b-mlqmenkex6] {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.compareModelName[b-mlqmenkex6] {
    font-weight: 900;
    font-size: 1.05rem;
    color: var(--text);
}
.compareModelName.name-basic[b-mlqmenkex6] { color: #60a5fa; }
.compareModelName.name-niche[b-mlqmenkex6] { color: #f59e0b; }
.compareModelName.name-premium[b-mlqmenkex6] { color: #a78bfa; }
.compareModelName.name-avg[b-mlqmenkex6] { color: #c4b5fd; }

.compareTag[b-mlqmenkex6] {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.compareTag.tag-basic[b-mlqmenkex6] {
    background: rgba(59, 130, 246, 0.15);
    color: var(--blueLight);
}
.compareTag.tag-niche[b-mlqmenkex6] {
    background: linear-gradient(135deg, #b45309, #d97706, #f59e0b);
    color: #fff;
}
.compareTag.tag-premium[b-mlqmenkex6] {
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: #fff;
}
.compareTag.tag-avg[b-mlqmenkex6] {
    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-mlqmenkex6] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.compareWinnerBadge[b-mlqmenkex6] {
    font-size: 0.75rem;
    font-weight: 900;
    padding: 5px 12px;
    border-radius: 7px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.compareWinnerBadge.badge-blue[b-mlqmenkex6] {
    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-mlqmenkex6] {
    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-mlqmenkex6] {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 6px;
    letter-spacing: 0.04em;
}
.compareConfBadge.conf-high[b-mlqmenkex6] {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.25);
}
.compareConfBadge.conf-med[b-mlqmenkex6] {
    background: rgba(234, 179, 8, 0.12);
    color: #fbbf24;
    border: 1px solid rgba(234, 179, 8, 0.25);
}
.compareConfBadge.conf-low[b-mlqmenkex6] {
    background: var(--borderSoft);
    color: var(--muted);
    border: 1px solid var(--borderSoft);
}

/* Bars */
.compareBars[b-mlqmenkex6] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

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

.compareTeam[b-mlqmenkex6] {
    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-mlqmenkex6] { color: var(--blue); }
.compareTeam.red[b-mlqmenkex6] { color: var(--red); }

.compareBarWrap[b-mlqmenkex6] {
    flex: 1;
    height: 12px;
    background: var(--hoverGlow);
    border-radius: 6px;
    overflow: hidden;
}

.compareBar[b-mlqmenkex6] {
    height: 100%;
    border-radius: 6px;
    transition: width 0.5s ease;
}
.compareBar.blue[b-mlqmenkex6] {
    background: linear-gradient(90deg, var(--blue), var(--blueLight));
}
.compareBar.red[b-mlqmenkex6] {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

.comparePct[b-mlqmenkex6] {
    font-size: 0.95rem;
    font-weight: 900;
    color: var(--muted);
    min-width: 52px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.comparePct.winner[b-mlqmenkex6] {
    color: var(--text);
}

/* Odds row */
.compareOdds[b-mlqmenkex6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid var(--borderSoft);
    font-size: 0.82rem;
}
.compareOddsLabel[b-mlqmenkex6] {
    color: var(--muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.68rem;
}
.compareOddsValue[b-mlqmenkex6] {
    font-weight: 800;
    font-size: 0.92rem;
}
.compareOddsValue .rdBlue[b-mlqmenkex6] { color: var(--blueLight); }
.compareOddsValue .rdRed[b-mlqmenkex6] { color: #f87171; }
.oddsSep[b-mlqmenkex6] { color: var(--muted); font-weight: 400; margin: 0 1px; }

/* Verdict */
.compareVerdict[b-mlqmenkex6] {
    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-mlqmenkex6] {
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: #4ade80;
}
.verdict-split[b-mlqmenkex6] {
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.25);
    color: #fbbf24;
}
.verdictIcon[b-mlqmenkex6] {
    font-size: 1.2rem;
}

/* Locked / Premium overlay cards */
.compareCard-locked[b-mlqmenkex6] {
    position: relative;
    overflow: hidden;
}

.compareCard-locked .lockedContent[b-mlqmenkex6] {
    filter: blur(8px);
    -webkit-filter: blur(8px);
    pointer-events: none;
    user-select: none;
    opacity: 0.5;
}

.premiumOverlay[b-mlqmenkex6] {
    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-mlqmenkex6] {
    stroke: #a78bfa;
    opacity: 0.9;
}

.premiumOverlayText[b-mlqmenkex6] {
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: var(--text);
}

.premiumOverlayBtn[b-mlqmenkex6] {
    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-mlqmenkex6] {
    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-mlqmenkex6] {
        grid-template-columns: 1fr;
    }
    .compareTeam[b-mlqmenkex6] {
        min-width: 30px;
        max-width: 60px;
    }
}
/* /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;
}
.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) {
    .analysisTab[b-665coccszh] { padding: 8px 12px; font-size: 0.72rem; }
}

/* 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; }

/* 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); }

/* Key Differences */
.keyDifferences[b-665coccszh] { 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-665coccszh] { display: flex; flex-direction: column; gap: 8px; }
.diffRow[b-665coccszh] { 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-665coccszh] { border-color: rgba(37,99,235,.25); background: linear-gradient(90deg, rgba(37,99,235,.08) 0%, transparent 100%); }
.diffRow.diff.neg[b-665coccszh] { border-color: rgba(220,38,38,.25); background: linear-gradient(90deg, rgba(220,38,38,.08) 0%, transparent 100%); }
.diffLabel[b-665coccszh] { display: flex; align-items: center; gap: 8px; flex: 1; font-size: 0.95rem; }
.diffLabel strong[b-665coccszh] { color: var(--text); font-weight: 700; }
.diffFavored[b-665coccszh] { font-size: 0.85rem; font-weight: 600; color: var(--muted); padding: 2px 6px; background: var(--panelDeep); border-radius: 4px; white-space: nowrap; }
.diffValue[b-665coccszh] { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.98rem; min-width: 70px; text-align: right; }
.diff.pos .diffValue[b-665coccszh] { color: var(--blue); }
.diff.neg .diffValue[b-665coccszh] { color: var(--red); }

/* 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);
}

@media (max-width: 700px) {
    .matchHistoryRow[b-665coccszh] {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

.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;
    }
}
/* /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);
}