/*
Theme Name: xstatiq
Theme URI: https://statsight.com/
Author: Statsight
Description: Sports prop aggregator — compare betting odds across FanDuel, Fanatics, Bet365, Caesars, and more.
Version: 9.50
Text Domain: statsight
*/

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

/* =========================================================
   Variables
   ========================================================= */
:root {
    --color-bg:           #0a0c10;
    --color-surface:      #111318;
    --color-surface-2:    #1a1d24;
    --color-surface-3:    #22262f;
    --color-border:       rgba(255, 255, 255, 0.07);
    --color-border-hover: rgba(255, 255, 255, 0.13);

    --color-primary:      #2e7cf6;
    --color-primary-dim:  rgba(46, 124, 246, 0.15);
    --color-primary-glow: rgba(46, 124, 246, 0.25);

    --color-accent:       #00e5ff;
    --color-best:         #00c896;
    --color-best-dim:     rgba(0, 200, 150, 0.12);

    --color-win:          #22c55e;
    --color-win-dim:      rgba(34, 197, 94, 0.12);
    --color-loss:         #e05252;
    --color-loss-dim:     rgba(224, 88, 77, 0.14);

    --color-text:         #f0f2f7;
    --color-text-muted:   rgba(240, 242, 247, 0.60);
    --color-text-dim:     rgba(240, 242, 247, 0.40);

    --font-base: 'Inter', system-ui, -apple-system, sans-serif;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;
    --radius-xl: 20px;

    --shadow-card:  0 1px 3px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.3);
    --shadow-glow:  0 0 24px var(--color-primary-glow);

    --container-width: 1400px;
    --header-height:   57px;
    --spacing-xs:  0.25rem;
    --spacing-sm:  0.5rem;
    --spacing-md:  1rem;
    --spacing-lg:  1.5rem;
    --spacing-xl:  2rem;
    --spacing-2xl: 3rem;
}

/* =========================================================
   Reset / Base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

/* Hide native number spinners globally */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: var(--font-base);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: color 0.15s, text-decoration-color 0.15s, opacity 0.15s, box-shadow 0.15s, border-color 0.15s, background-color 0.15s;
}

a:hover { color: var(--color-primary); text-decoration-color: currentColor; }

/* WP admin bar — reset only typography so theme fonts don't bleed in */
#wpadminbar {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 13px !important;
    line-height: 1 !important;
}

/* Buttons and nav links — never show underline */
.lp-btn,
.lp-btn:hover,
.site-nav a,
.site-nav a:hover,
.site-branding,
.site-branding:hover,
.site-footer__nav a,
.site-footer__nav a:hover,
.site-footer__logo,
.site-footer__logo:hover,
button,
[class*="-btn"],
[class*="-btn"]:hover,
[class*="__btn"],
[class*="__btn"]:hover {
    text-decoration: none !important;
    text-decoration-color: transparent !important;
}

img { max-width: 100%; height: auto; }

/* ── Custom number stepper ─────────────────────────────────────────────────
   Usage: wrap any <input type="number"> in <div class="num-stepper">
   The JS stepper helper wires up the +/- buttons automatically.
   ───────────────────────────────────────────────────────────────────────── */
.num-stepper {
    display: inline-flex;
    align-items: stretch;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color 0.15s;
}

.num-stepper:focus-within {
    border-color: var(--color-primary);
}

.num-stepper input[type="number"] {
    background: transparent;
    border: none;
    color: var(--color-text);
    font-size: 0.9375rem;
    text-align: center;
    padding: 0.45rem 0.5rem;
    width: 7ch;
    outline: none;
    min-width: 0;
}

.num-stepper__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0 0.5rem;
    font-size: 1rem;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
    user-select: none;
}

.num-stepper__btn:hover {
    color: var(--color-text);
    background: var(--color-surface-3);
}

.num-stepper__btn:active {
    background: var(--color-primary-dim);
    color: var(--color-primary);
}

/* =========================================================
   Layout
   ========================================================= */
.site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
}

.site-main {
    flex: 1;
    padding: var(--spacing-xl) 0 var(--spacing-2xl);
}

/* Landing page manages its own section spacing */
.site-main:has(> .lp) {
    padding: 0;
}

/* Suppress double border between lp-cta and footer */
.site-main:has(> .lp) + .site-footer {
    border-top: none;
}

/* =========================================================
   Header
   ========================================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(10, 12, 16, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--color-border);
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    gap: var(--spacing-xl);
}

.site-branding {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    text-decoration: none;
    flex-shrink: 0;
}
.site-branding:hover { text-decoration: none; }

.site-branding__logo {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--color-text);
    line-height: 1;
}

.site-branding__logo em {
    font-style: normal;
    color: var(--color-primary);
}

.site-branding__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 8px var(--color-primary);
    flex-shrink: 0;
}

.site-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
}

.site-nav a {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    transition: color 0.15s;
}

.site-nav a:hover { color: var(--color-text); }

.site-nav .nav-signup-btn {
    display: inline-block;
    padding: 0.35rem 1rem;
    background: transparent;
    color: var(--color-text-muted) !important;
    border: 1px solid var(--color-border-hover);
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: color 0.15s, border-color 0.15s;
}

.site-nav .nav-signup-btn:hover {
    color: var(--color-text) !important;
    border-color: var(--color-text-muted);
}

.site-nav .nav-login-btn {
    display: inline-block;
    padding: 0.35rem 1rem;
    background: var(--color-primary);
    color: #fff !important;
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: opacity 0.15s;
}

.site-nav .nav-login-btn:hover {
    color: #fff;
    opacity: 0.88;
}

.site-nav .current-menu-item > a,
.site-nav .current_page_item > a {
    color: var(--color-text);
    font-weight: 600;
    position: relative;
}

.site-nav .current-menu-item > a::after,
.site-nav .current_page_item > a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-primary);
    border-radius: 1px;
}

/* ── Hamburger button (hidden on desktop) ── */
.nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    flex-shrink: 0;
}

.nav-hamburger__bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-text);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
    transform-origin: center;
}

/* Animate to X when open */
.nav-hamburger.is-open .nav-hamburger__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-hamburger.is-open .nav-hamburger__bar:nth-child(2) {
    opacity: 0;
}
.nav-hamburger.is-open .nav-hamburger__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Mobile nav is a fixed overlay, sibling of header (not inside it),
   so backdrop-filter on the header doesn't create a clipping stacking context. */
.site-nav--mobile {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-bg);
    overflow-y: auto;
    z-index: 200;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    margin: 0;
    padding: 0;
}

.site-nav--mobile.is-open {
    transform: translateX(0);
}

.site-nav--mobile ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin: 0;
    padding: 0;
}

.site-nav--mobile ul li {
    width: 100%;
    border-bottom: 1px solid var(--color-border);
}

.site-nav--mobile a {
    display: block;
    padding: 1.1rem var(--spacing-xl);
    font-size: 1.1rem;
}

.site-nav--mobile .current-menu-item > a,
.site-nav--mobile .current_page_item > a {
    color: var(--color-primary);
}

.site-nav--mobile .nav-login-btn {
    display: block;
    text-align: center;
    margin: 0;
    border-radius: 0;
    padding: 1.1rem var(--spacing-xl);
    font-size: 1.1rem;
}

.site-nav--mobile .current-menu-item > a::after,
.site-nav--mobile .current_page_item > a::after {
    display: none;
}

@media (max-width: 640px) {
    .nav-hamburger {
        display: flex;
    }

    .site-nav--desktop {
        display: none;
    }
}

@media (min-width: 641px) {
    .site-nav--mobile {
        display: none;
    }
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
    background: var(--color-surface);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding: var(--spacing-2xl) 0;
    /* Extra bottom room so compare bar doesn't overlap footer text */
    padding-bottom: calc(var(--spacing-2xl) + 56px);
}

.site-footer .container {
    padding: 0 var(--spacing-xl);
}

.site-footer__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
    align-items: start;
}

/* Brand column */
.site-footer__logo {
    display: inline-block;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--color-text);
    text-decoration: none;
    margin-bottom: var(--spacing-sm);
}
.site-footer__logo em {
    font-style: normal;
    color: var(--color-primary);
}
.site-footer__logo:hover { color: var(--color-text); }

.site-footer__tagline {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0;
    max-width: 220px;
}

.site-footer__social {
    margin-top: 0.75rem;
}

.site-footer__social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.15s;
}

.site-footer__social-link:hover {
    color: var(--color-text);
}

/* Right column: nav above legal */
.site-footer__right {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    align-items: flex-end;
    text-align: right;
}

.site-footer__nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-sm) var(--spacing-lg);
}

.site-footer__nav a {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

.site-footer__nav a:hover {
    color: var(--color-text);
}

/* Legal */
.site-footer__legal {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    max-width: 500px;
}

.site-footer__disclaimer {
    font-size: 0.72rem;
    color: var(--color-text-dim);
    line-height: 1.6;
    margin: 0;
}

.site-footer__copy,
.site-footer__links {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin: 0;
}
.site-footer__copy a,
.site-footer__links a {
    color: var(--color-text-muted);
    text-decoration: underline;
}
.site-footer__copy a:hover,
.site-footer__links a:hover {
    color: var(--color-text);
}

/* ── Legal pages (Privacy Policy, Terms of Service) ────────────────────────── */
.legal-page {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--spacing-2xl) 0;
}
.legal-page__header {
    margin-bottom: var(--spacing-2xl);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--spacing-xl);
}
.legal-page__title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 var(--spacing-sm);
}
.legal-page__meta {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0;
}
.legal-section {
    margin-bottom: var(--spacing-2xl);
}
.legal-section h2 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 var(--spacing-md);
    color: var(--color-text);
}
.legal-section h3 {
    font-size: 0.95rem;
    font-weight: 600;
    margin: var(--spacing-lg) 0 var(--spacing-sm);
    color: var(--color-text);
}
.legal-section p,
.legal-section li {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--color-text-muted);
}
.legal-section ul {
    padding-left: 1.25rem;
    margin: var(--spacing-sm) 0;
}
.legal-section li {
    margin-bottom: var(--spacing-xs);
}
.legal-section a {
    color: var(--color-primary);
}
.legal-section a:hover {
    text-decoration: underline;
}

/* Collapse to single column on mobile */
@media (max-width: 767px) {
    .site-footer__body {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
    .site-footer__right {
        align-items: flex-start;
        text-align: left;
    }
    .site-footer__nav ul {
        justify-content: flex-start;
    }
}

/* =========================================================
   Props Aggregator — Page Header
   ========================================================= */
.props-aggregator {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
}

.props-aggregator__header {
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
}

.props-aggregator__header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-lg);
}

.props-aggregator__header-text {
    flex: 1;
    min-width: 0;
}

.props-aggregator__eyebrow {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 var(--spacing-xs);
}

.props-aggregator__title {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin: 0 0 var(--spacing-xs);
    color: var(--color-text);
    line-height: 1.2;
}

.props-aggregator__subtitle {
    color: var(--color-text-muted);
    margin: 0;
    font-size: 0.85rem;
    font-weight: 400;
    max-width: 560px;
}

/* =========================================================
   League Tabs — Navigation
   ========================================================= */
.league-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--spacing-xs);
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: var(--header-height);
    z-index: 50;
    background: rgba(10, 12, 16, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    min-height: 38px;
}

.league-tabs::-webkit-scrollbar {
    display: none;
}

.league-tab-btn {
    padding: 0.65rem 1.1rem;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: var(--font-base);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--color-text-muted);
    transition: color 0.15s;
    position: relative;
    bottom: -1px;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.league-tab-btn:hover {
    color: var(--color-text);
}

.league-tab-btn.is-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.tab-game-count {
    display: inline-block;
    margin-left: 0.35em;
    padding: 0.1em 0.45em;
    border-radius: 999px;
    background: var(--color-surface-3);
    color: var(--color-text-muted);
    font-size: 0.65rem;
    font-weight: 600;
    vertical-align: middle;
    letter-spacing: 0;
}

.league-tab-btn.is-active .tab-game-count {
    background: var(--color-primary-dim);
    color: var(--color-primary);
}

/* =========================================================
   League Panel
   ========================================================= */
.league-panel {
    display: none;
    padding: var(--spacing-xl) 0 0;
}

.league-panel.is-active {
    display: block;
}

/* ── Panel toolbar (view toggle + search) ──────────────────────────────── */
.panel-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.panel-toolbar[hidden] {
    display: none;
}

.panel-view-toggle {
    display: flex;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex-shrink: 1;
    min-width: 0;
}

@media (max-width: 768px) {
    .panel-view-toggle {
        mask-image: linear-gradient(to right, black calc(100% - 3rem), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, black calc(100% - 3rem), transparent 100%);
    }
}

.panel-view-toggle::-webkit-scrollbar {
    display: none;
}

.panel-view-btn {
    position: relative;
    padding: 0.4rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-dim);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.panel-view-btn.is-active {
    background: var(--color-primary);
    color: #fff;
}

.arb-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25em;
    height: 1.25em;
    padding: 0 0.3em;
    margin-left: 0.4em;
    border-radius: 99px;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    background: var(--color-best);
    color: #000;
    vertical-align: middle;
}

.arb-count-badge--empty {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text-dim);
}

.panel-search-wrap {
    flex: 1;
    min-width: 180px;
    margin-bottom: 0;
}

/* ── Market view controls ──────────────────────────────────────────────── */
.panel-market-controls {
    display: flex;
    gap: 1rem;
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
    align-items: flex-end;
}

.panel-market-controls[hidden] {
    display: none;
}

.panel-market-control-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.panel-market-control-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.panel-market-select,
.panel-market-sort {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text);
    font-size: 0.85rem;
    padding: 0.45rem 0.75rem;
    cursor: pointer;
}

.panel-market-select {
    flex: 1;
    min-width: 180px;
}

/* ── Arb view ──────────────────────────────────────────────────────────── */

.panel-arb-view[hidden] { display: none; }

.arb-view__table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.arb-view__table th:first-child,
.arb-view__table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--color-surface-2);
}

@media (max-width: 768px) {
    .arb-view__table-wrap {
        mask-image: linear-gradient(to right, black calc(100% - 3rem), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, black calc(100% - 3rem), transparent 100%);
    }
    .arb-view__table .arb-col-player {
        max-width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .arb-view__table th:first-child {
        max-width: 90px;
    }
}

.arb-col-pct {
    font-weight: 700;
    color: var(--color-best);
    white-space: nowrap;
}

td.arb-col-player,
td.sharp-col-player {
    cursor: pointer;
    color: var(--color-primary) !important;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 2px;
    transition: text-decoration-color 0.15s;
}

td.arb-col-player:hover,
td.sharp-col-player:hover {
    text-decoration-color: var(--color-primary);
}
.arb-col-market  { font-size: 0.8rem; color: var(--color-text-muted); }
.arb-col-matchup { font-size: 0.75rem; color: var(--color-text-dim); white-space: nowrap; }
.arb-col-line    { text-align: center; }

.arb-col-odds {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.arb-side {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.2rem 0.5rem;
}

.arb-side--over  { border-color: var(--color-best); }
.arb-side--under { border-color: #f05252; }

.arb-side__label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.arb-side--over  .arb-side__label { color: var(--color-best); }
.arb-side--under .arb-side__label { color: #f05252; }

.arb-side__odds { font-weight: 700; }
.arb-side__bk   { font-size: 0.7rem; color: var(--color-text-muted); }
.arb-side__sep  { font-size: 0.75rem; color: var(--color-text-muted); }

.arb-calc-btn {
    padding: 0.25rem 0.65rem;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.arb-calc-row td {
    background: var(--color-surface-2);
    padding: var(--spacing-sm) var(--spacing-md);
}

.arb-calc-wrap {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.arb-calc-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.arb-calc-currency { color: var(--color-text-muted); }

.arb-stake-input {
    width: 80px;
    padding: 0.3rem 0.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-family: var(--font-base);
    font-size: 0.85rem;
    text-align: right;
}

.arb-calc-result {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.8rem;
}

.arb-calc-over,
.arb-calc-under { color: var(--color-text-muted); }

.arb-calc-profit {
    font-weight: 700;
    color: var(--color-best);
}

.arb-empty {
    padding: var(--spacing-xl) 0;
    text-align: center;
}

.arb-empty__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.35rem;
}

.arb-empty__sub {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.arb-upsell {
    padding: var(--spacing-xl) var(--spacing-lg);
    text-align: center;
    max-width: 400px;
    margin: 0 auto;
}

.arb-upsell__icon {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-sm);
}

.arb-upsell__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

.arb-upsell__desc {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin-bottom: var(--spacing-md);
}

.arb-upsell__btn {
    display: inline-block;
    padding: 0.6rem 1.4rem;
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.15s;
}

.arb-upsell__btn:hover {
    opacity: 0.85;
}

/* ── Futures view ──────────────────────────────────────────────────────── */

.panel-futures-view[hidden] { display: none; }

.futures-view__title {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm);
    margin: 0;
}

.futures-view__table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.futures-view__table .futures-col-outcome {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--color-surface-2);
    min-width: 160px;
    font-weight: 600;
}

.futures-view__table th.futures-col-outcome {
    background: var(--color-surface-2);
}

.futures-view__table .futures-col-book {
    text-align: center;
    min-width: 90px;
}

.futures-view__table .futures-col-odds {
    text-align: center;
    font-variant-numeric: tabular-nums;
}


.futures-empty {
    padding: var(--spacing-xl) var(--spacing-md);
    text-align: center;
}

.futures-empty__title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
}

.futures-empty__sub {
    font-size: 0.875rem;
    color: var(--color-muted);
}

@media (max-width: 768px) {
    .futures-view__table-wrap {
        mask-image: linear-gradient(to right, black calc(100% - 3rem), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, black calc(100% - 3rem), transparent 100%);
    }
    .futures-view__table .futures-col-outcome {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ── Sharp Moves view ──────────────────────────────────────────────────── */

.panel-sharp-view[hidden] { display: none; }

.sharp-view__threshold-wrap {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.sharp-view__threshold-label {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.sharp-view__threshold {
    padding: 0.3rem 0.6rem;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-family: var(--font-base);
    font-size: 0.8rem;
    cursor: pointer;
}

.sharp-view__table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.sharp-view__table th:first-child,
.sharp-view__table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--color-surface-2);
}

@media (max-width: 768px) {
    .sharp-view__table-wrap {
        mask-image: linear-gradient(to right, black calc(100% - 3rem), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, black calc(100% - 3rem), transparent 100%);
    }
    .sharp-view__table .sharp-col-player {
        max-width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .sharp-view__table th:first-child {
        max-width: 90px;
    }
}

.sharp-col-move--up   { color: var(--color-best); font-weight: 700; }
.sharp-col-move--down { color: #f05252; font-weight: 700; }

.sharp-col-open,
.sharp-col-current {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-align: center;
}

.sharp-col-market {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.sharp-col-matchup {
    font-size: 0.75rem;
    color: var(--color-text-dim);
    white-space: nowrap;
}

.sharp-empty {
    padding: var(--spacing-xl) 0;
    text-align: center;
}

.sharp-empty__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.35rem;
}

.sharp-empty__sub {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* ── Market view table ─────────────────────────────────────────────────── */
.market-view__table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.props-table--market-view .col-matchup {
    font-size: 0.75rem;
    color: var(--color-text-dim);
    white-space: nowrap;
}


.panel-search {
    width: 100%;
    max-width: 320px;
    padding: 0.5rem 0.85rem 0.5rem 2.1rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 0.65rem center var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-family: var(--font-base);
    font-size: 0.875rem;
    transition: border-color 0.15s;
}

.panel-search:focus {
    outline: none;
    border-color: var(--color-primary);
}

.panel-search::placeholder {
    color: var(--color-text-dim);
}

.panel-search-empty {
    padding: var(--spacing-lg) 0;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.panel-context {
    margin: 0 0 var(--spacing-lg);
    font-size: 0.85rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.league-panel__heading {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-text);
}

.league-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    background: var(--color-primary-dim);
    border: 1px solid rgba(46, 124, 246, 0.25);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--color-primary);
    flex-shrink: 0;
}

/* =========================================================
   Events — Date Label + Loading
   ========================================================= */
.events-date-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin: var(--spacing-2xl) 0 var(--spacing-sm);
    padding: var(--spacing-sm) 0;
}

.events-date-header:first-child { margin-top: 0; }

.events-date-label {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0;
    padding: 0;
}

.events-date-label strong {
    color: var(--color-text);
    font-weight: 700;
}

.events-game-count {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-dim);
    white-space: nowrap;
    flex-shrink: 0;
}

/* =========================================================
   Events Table
   ========================================================= */
.props-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

@media (max-width: 768px) {
    .props-table-wrap {
        mask-image: linear-gradient(to right, black calc(100% - 3rem), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, black calc(100% - 3rem), transparent 100%);
    }
    .col-player {
        max-width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .props-table thead th:first-child,
    .props-table--stepper th:first-child {
        max-width: 90px;
    }
    .props-table td {
        padding: 0.75rem 0.6rem;
    }
    .props-table thead th {
        padding: 0.75rem 0.6rem;
    }
}

.props-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.props-table thead th {
    padding: 0.75rem 1.1rem;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-2);
    white-space: nowrap;
}

.props-table thead th:first-child { border-radius: 0; }
.props-table thead th:last-child  { border-radius: 0; }

.props-table tbody tr {
    border-bottom: 1px solid var(--color-border);
    transition: background 0.12s;
}

.props-table tbody tr:last-child { border-bottom: none; }

.props-table tbody tr:hover { background: var(--color-surface-2); }

.props-table td {
    padding: 0.85rem 1.1rem;
    vertical-align: middle;
    white-space: nowrap;
    color: var(--color-text);
}

.col-player { font-weight: 600; }

/* ── Team Logos ──────────────────────────────────────────────────────────── */

.team-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 0.4em;
    flex-shrink: 0;
}

/* Player name clickable in props rows */
tr[data-player] .col-player {
    cursor: pointer;
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 2px;
    transition: text-decoration-color 0.15s;
}

tr[data-player] .col-player:hover {
    text-decoration-color: var(--color-primary);
}

/* No player modal for sports without ESPN gamelog support */
[data-sport-key^="soccer_"] tr[data-player] .col-player {
    cursor: default;
    color: inherit;
    text-decoration: none;
}

.col-team {
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.col-time {
    color: var(--color-text-muted);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

/* =========================================================
   Empty / Error State
   ========================================================= */
.empty-state {
    text-align: center;
    padding: var(--spacing-2xl) var(--spacing-lg);
    color: var(--color-text-muted);
}

.empty-state__icon {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-md);
    opacity: 0.6;
}

.empty-state__title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 var(--spacing-sm);
    color: var(--color-text);
}

.empty-state__desc {
    font-size: 0.875rem;
    margin: 0;
    color: var(--color-text-muted);
    max-width: 400px;
    margin: 0 auto;
}

/* Loading pulse */
.empty-state--loading .empty-state__title {
    animation: pulse 1.4s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.35; }
}

/* =========================================================
   Error state monospace block
   ========================================================= */
.api-error-block {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.78rem;
    background: rgba(255, 80, 80, 0.08);
    border: 1px solid rgba(255, 80, 80, 0.2);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    text-align: left;
    color: #ff8a8a;
    margin-top: var(--spacing-sm);
}

/* =========================================================
   Panel sub-tabs (Games / Best Value)
   ========================================================= */
.panel-sub-tabs {
    display: flex;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0;
}

.panel-sub-tab {
    padding: 0.55rem 1.1rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-family: var(--font-base);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--color-text-muted);
    cursor: pointer;
    position: relative;
    bottom: -1px;
    transition: color 0.15s;
    white-space: nowrap;
}

.panel-sub-tab:hover { color: var(--color-text); }

.panel-sub-tab.is-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.panel-sub-content { display: none; }
.panel-sub-content.is-active { display: block; }

/* =========================================================
   Best Value — controls bar
   ========================================================= */
.bestvalue-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    flex-wrap: wrap;
}

.bestvalue-filter-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.bestvalue-filter-input-wrap {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-surface-3);
}

.bestvalue-min-edge {
    width: 64px;
    background: none;
    border: none;
    color: var(--color-text);
    font-family: var(--font-base);
    font-size: 0.9rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 0.35rem 0.6rem;
    text-align: center;
    outline: none;
    -moz-appearance: textfield;
    appearance: textfield;
}

.bestvalue-min-edge::-webkit-inner-spin-button,
.bestvalue-min-edge::-webkit-outer-spin-button { -webkit-appearance: none; }

.bestvalue-filter-unit {
    padding: 0 0.5rem 0 0;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-weight: 600;
}

.bestvalue-filter-hint {
    font-size: 0.78rem;
    color: var(--color-text-dim);
    margin: 0;
    flex: 1;
    min-width: 200px;
}

/* =========================================================
   Best Value — rows
   ========================================================= */
.bestvalue-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.bv-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.bv-upgrade-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem var(--spacing-xl);
    gap: 0.75rem;
}

.bv-upgrade-prompt__icon {
    font-size: 2.5rem;
    line-height: 1;
}

.bv-upgrade-prompt__title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

.bv-upgrade-prompt__desc {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    max-width: 420px;
    margin: 0;
    line-height: 1.6;
}

.bv-row {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto auto auto;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color 0.15s;
}

@media (min-width: 1024px) {
    .bv-row {
        gap: var(--spacing-lg);
    }
}

.bv-row__track {
    flex-shrink: 0;
}

.bv-row:hover { border-color: var(--color-border-hover); }

.bv-row__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.bv-row__player {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bv-row__market {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.bv-row__matchup {
    font-size: 0.75rem;
    color: var(--color-text-dim);
}

.bv-row__odds {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    justify-content: flex-end;
}

.bv-odds-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    font-size: 0.78rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.bv-odds-chip strong {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}

.bv-odds-chip--best {
    background: var(--color-best-dim);
    border-color: color-mix(in srgb, var(--color-best) 30%, transparent);
}

.bv-odds-chip--best strong {
    color: var(--color-best);
}

.bv-row__edge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.bv-edge-badge {
    font-size: 1.1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--color-best);
    line-height: 1;
}

.bv-edge-label {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-text-dim);
}

.bv-ev-badge {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--color-text-dim);
}

.bv-ev-badge--pos {
    color: var(--color-best);
}

@media (max-width: 900px) {
    .bv-row {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto auto;
        gap: var(--spacing-sm);
    }
    .bv-row__edge  { grid-column: 1; grid-row: 1; align-self: center; align-items: flex-start; }
    .bv-row__track { grid-column: 2; grid-row: 1; align-self: center; }
    .bv-row__meta  { grid-column: 1 / -1; grid-row: 2; }
    .bv-row__odds  { grid-column: 1 / -1; grid-row: 3; justify-content: flex-start; }
}

/* =========================================================
   Game row — clickable
   ========================================================= */
.game-row {
    cursor: pointer;
    transition: background 0.12s, box-shadow 0.12s;
    border-left: 3px solid transparent;
}

.game-row:hover {
    background: var(--color-surface-2);
    border-left-color: var(--color-primary);
}

.game-row:hover .game-row__cta {
    color: var(--color-primary);
    opacity: 1;
}

.col-cta { text-align: right; }

.game-row__cta {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-muted);
    opacity: 0.5;
    transition: color 0.15s, opacity 0.15s;
    white-space: nowrap;
}

/* =========================================================
   Game Detail View
   ========================================================= */
.game-detail {
    animation: fadeIn 0.18s ease;
}

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

.game-detail__controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.game-detail__controls[hidden] {
    display: none;
}

.game-detail__search {
    flex: 1;
    min-width: 0;
    max-width: 320px;
    padding: 0.35rem 0.7rem 0.35rem 2.1rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 0.65rem center var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-family: var(--font-base);
    font-size: 0.8rem;
    transition: border-color 0.15s;
}

.game-detail__search::placeholder {
    color: var(--color-text-muted);
}

.game-detail__search:focus {
    outline: none;
    border-color: var(--color-primary);
}

.game-detail__sort-label {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.game-detail__sort {
    padding: 0.35rem 0.7rem;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-family: var(--font-base);
    font-size: 0.8rem;
    cursor: pointer;
    transition: border-color 0.15s;
}

.game-detail__sort:focus {
    outline: none;
    border-color: var(--color-primary);
}

.game-detail__breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.game-detail__bc-btn {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-base);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-primary);
    cursor: pointer;
    transition: opacity 0.15s;
}

.game-detail__bc-btn:hover {
    opacity: 0.75;
}

.game-detail__bc-sep {
    color: var(--color-text-dim);
    font-size: 0.85rem;
    user-select: none;
}

.game-detail__bc-current {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
}

.game-detail__time {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

/* =========================================================
   Category Sub-Tabs
   ========================================================= */
.game-detail__cat-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
}

.game-detail__cat-tabs[hidden] {
    display: none;
}

.cat-tab-btn {
    padding: 0.5rem 1rem;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    font-family: var(--font-base);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
    position: relative;
    bottom: -1px;
}

.cat-tab-btn:hover {
    color: var(--color-text);
}

.cat-tab-btn.is-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* Sticky first column in props tables (player name) */
.props-table--stepper th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--color-surface-2);
}

.props-table--stepper td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--color-surface);
}

/* =========================================================
   AI Analysis Card
   ========================================================= */

.ai-analysis-card {
    margin-bottom: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface-2);
}

.ai-analysis-card.is-open {
    border-color: rgba(46, 124, 246, 0.3);
}

.ai-analysis-card__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-text);
    font-family: var(--font-base);
    font-size: 0.875rem;
    font-weight: 600;
    text-align: left;
    transition: background 0.15s;
}

.ai-analysis-card__toggle:hover {
    background: var(--color-surface-3);
}

.ai-analysis-card__icon {
    color: var(--color-primary);
    font-size: 0.75rem;
}

.ai-analysis-card__label {
    flex: 1;
}

.ai-analysis-card__badge {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    background: var(--color-primary-dim);
    color: var(--color-primary);
    text-transform: uppercase;
}

.ai-analysis-card__chevron {
    color: var(--color-text-muted);
    font-size: 1rem;
    transition: transform 0.2s;
    display: inline-block;
}

.ai-analysis-card.is-open .ai-analysis-card__chevron {
    transform: rotate(90deg);
}

.ai-analysis-card__body {
    padding: 0 1rem 1rem;
    border-top: 1px solid var(--color-border);
}

.ai-analysis-card__toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0 0.5rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0.25rem;
}

.ai-analysis-card__book-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.ai-analysis-card__book-select,
.ai-analysis-card__risk-select {
    font-size: 0.78rem;
    background: var(--color-surface-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    padding: 0.2rem 0.5rem;
    cursor: pointer;
}

.ai-analysis-card__disclaimer {
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--color-primary);
    background: rgba(46, 124, 246, 0.08);
    border: 1px solid rgba(46, 124, 246, 0.2);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.75rem;
    margin: 0.75rem 0 0;
}

.ai-analysis-card__content {
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--color-text);
    padding-top: 0.75rem;
}

.ai-analysis-card__content p {
    margin: 0 0 0.75rem;
}

.ai-analysis-card__content p:last-child {
    margin-bottom: 0;
}

.ai-analysis-card__loading {
    color: var(--color-text-muted);
    font-style: italic;
}

.ai-analysis-card__dots::after {
    content: '';
    animation: ai-dots 1.2s steps(3, end) infinite;
}

@keyframes ai-dots {
    0%   { content: ''; }
    33%  { content: '.'; }
    66%  { content: '..'; }
    100% { content: '...'; }
}

.ai-analysis-card__cursor {
    animation: ai-blink 0.8s step-end infinite;
    color: var(--color-primary);
    margin-left: 1px;
}

@keyframes ai-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

.ai-analysis-card__error {
    color: var(--color-text-muted);
    font-style: italic;
}

.ai-analysis-card__error a {
    color: var(--color-text);
}

.ai-analysis-card__error a:hover {
    color: var(--color-primary);
}

/* AI Pick Cards */
.ai-pick-cards__heading {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 1.25rem 0 0.5rem;
}

.ai-pick-cards {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ai-pick-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
}

.ai-pick-card__info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
}

.ai-pick-card__player {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-pick-card__market {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.ai-pick-card__line {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text);
    background: rgba(255,255,255,0.07);
    border-radius: 3px;
    padding: 1px 5px;
}

.ai-pick-card__odds {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-positive, #4ade80);
}

.ai-pick-card__book {
    font-size: 0.7rem;
    color: var(--color-text-muted);
}

.ai-pick-card__watch {
    flex-shrink: 0;
}

/* =========================================================
   Category Panels
   ========================================================= */
.cat-panel { display: none; }
.cat-panel.is-active { display: block; }


/* =========================================================
   Market Section (one per stat type within a category)
   ========================================================= */
.market-section {
    margin-bottom: var(--spacing-2xl);
}

.market-section:last-child { margin-bottom: 0; }

.market-section__title {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-text);
    margin: 0 0 var(--spacing-sm);
}

/* =========================================================
   Team Sections (per-team prop tables)
   ========================================================= */

.team-section {
    margin-bottom: var(--spacing-xl);
}

.team-section:last-child { margin-bottom: 0; }

.team-section__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: var(--spacing-md);
}

.team-section__name {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-text);
}

.team-logo--section {
    width: 1.4rem;
    height: 1.4rem;
    object-fit: contain;
}

/* =========================================================
   Props Table — odds columns
   ========================================================= */
.odds-col {
    text-align: center !important;
    border-left: 1px solid var(--color-border);
    font-size: 0.72rem;
    letter-spacing: 0.5px;
    padding: 0.55rem 1rem !important;
    white-space: nowrap;
}

.odds-cell {
    position: relative;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
    border-left: 1px solid rgba(255,255,255,0.03);
    transition: background 0.15s;
    white-space: nowrap;
    min-width: 80px;
}

.odds-cell.odds-best {
    background: var(--color-best-dim);
    position: relative;
}

.odds-badge--best {
    color: var(--color-best);
    font-weight: 700;
}

.odds-na {
    color: var(--color-text-dim);
    font-size: 0.8rem;
}

/* ── Stale Data Notice ──────────────────────────────────────────────────── */

.stale-notice {
    margin: 0 0 1rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm, 4px);
    background: rgba(240, 180, 0, 0.08);
    border: 1px solid rgba(240, 180, 0, 0.25);
    color: #f0b400;
    font-size: 0.8rem;
}

.blowout-notice {
    margin: 0.25rem 0 1rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm, 4px);
    background: rgba(240, 180, 0, 0.08);
    border: 1px solid rgba(240, 180, 0, 0.25);
    color: #f0b400;
    font-size: 0.8rem;
}

.blowout-notice--crunch {
    background: rgba(99, 179, 237, 0.08);
    border-color: rgba(99, 179, 237, 0.25);
    color: #63b3ed;
}

/* ── Odds Trend Arrows ──────────────────────────────────────────────────── */

.odds-trend {
    display: inline-block;
    font-size: 0.6rem;
    margin-left: 3px;
    vertical-align: middle;
    opacity: 0.85;
    cursor: default;
}

.odds-trend--up {
    color: var(--color-best); /* green — odds improved for bettor */
}

.odds-trend--down {
    color: #f05252; /* red — odds worsened for bettor */
}

.odds-trend:hover {
    opacity: 1;
}

/* Outlier line badge — shown in book cell when line deviates from consensus */

/* =========================================================
   Line Stepper
   ========================================================= */
.col-line-stepper {
    white-space: nowrap;
    padding: 0.5rem 0.75rem;
}

.col-line-stepper--hidden {
    display: none;
}

.line-stepper {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-surface-2);
}

.line-stepper__btn {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1;
    width: 28px;
    height: 32px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-base);
    flex-shrink: 0;
}

.line-stepper__btn:hover:not(:disabled) {
    background: var(--color-primary-dim);
    color: var(--color-primary);
}

.line-stepper__btn:disabled {
    opacity: 0.25;
    cursor: default;
}

.props-aggregator[data-plan="free"] .line-stepper {
    visibility: hidden;
}

.props-aggregator[data-plan="free"] .col-line-stepper > .line-stepper__val {
    border-left: none;
    border-right: none;
}

.line-stepper__val {
    min-width: 38px;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    padding: 0 2px;
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    line-height: 32px;
}

/* =========================================================
   Standard Page / Post Templates
   ========================================================= */
.page-content,
.entry-content {
    max-width: 780px;
    margin: 0 auto;
    background: var(--color-surface);
    padding: var(--spacing-2xl);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}


/* Shop, account & checkout — strip the page-content card wrapper */
.woocommerce-shop .page-content,
.woocommerce-shop .entry-content,
.post-type-archive-product .page-content,
.post-type-archive-product .entry-content,
.woocommerce-account .page-content,
.woocommerce-account .entry-content,
.woocommerce-checkout .page-content,
.woocommerce-checkout .entry-content {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
}

/* Checkout — restore container padding */
.woocommerce-checkout .container {
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
}

.woocommerce-checkout .entry-header {
    margin-bottom: var(--spacing-lg);
}

/* Checkout — dark theme only, let WooCommerce handle layout */
.wc-block-checkout__main {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--spacing-xl) !important;
}

/* Strip nested card on order summary product item */
.wc-block-components-order-summary-item {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}


.entry-header { margin-bottom: var(--spacing-xl); }

.entry-title {
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 var(--spacing-sm);
    letter-spacing: -0.5px;
}

/* =========================================================
   404 Page
   ========================================================= */
.error-404 {
    text-align: center;
    padding: var(--spacing-2xl) var(--spacing-lg);
}

.error-404__code {
    font-size: 7rem;
    font-weight: 900;
    color: var(--color-primary);
    line-height: 1;
    margin: 0;
    letter-spacing: -4px;
    opacity: 0.7;
}

.error-404__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: var(--spacing-md) 0 var(--spacing-sm);
}

.error-404__desc {
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-xl);
    font-size: 0.9rem;
}

.btn {
    display: inline-block;
    padding: 0.65rem 1.5rem;
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.875rem;
    transition: background 0.15s, box-shadow 0.15s;
}

.btn:hover {
    background: #1a66e0;
    box-shadow: var(--shadow-glow);
    color: #fff;
}

/* =========================================================
   Live Badge
   ========================================================= */

.injury-tag {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.1em 0.4em;
    border-radius: 3px;
    margin-left: 0.4em;
    vertical-align: middle;
    cursor: default;
}

.injury-tag--out          { background: rgba(229, 62, 62, 0.15);  color: #e53e3e; }
.injury-tag--dtd          { background: rgba(255, 180, 0, 0.15);   color: #ffb400; }
.injury-tag--questionable { background: rgba(150, 150, 150, 0.15); color: #aaa; }


.rest-tag {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.1em 0.4em;
    border-radius: 3px;
    margin-left: 0.4em;
    vertical-align: middle;
}

.rest-tag--b2b {
    background: rgba(229, 62, 62, 0.15);
    color: #e53e3e;
}

.rest-tag--short {
    background: rgba(234, 179, 8, 0.15);
    color: #ca8a04;
}

.live-badge {
    display: inline-block;
    background: #e53e3e;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.15em 0.45em;
    border-radius: 3px;
    margin-left: 0.4em;
    vertical-align: middle;
    animation: live-pulse 1.8s ease-in-out infinite;
}

@keyframes live-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.55; }
}

.game-row--live {
    background: rgba(229, 62, 62, 0.05);
}

.ended-badge {
    display: inline-block;
    background: var(--color-surface-3);
    color: var(--color-text-muted);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.15em 0.45em;
    border-radius: 3px;
    margin-left: 0.4em;
    vertical-align: middle;
}

.game-row--ended {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

/* Inline live stat chip on player rows */
.live-stat {
    display: inline-block;
    margin-left: 0.5em;
    padding: 0.1em 0.45em;
    border-radius: 3px;
    background: rgba(229, 62, 62, 0.15);
    border: 1px solid rgba(229, 62, 62, 0.3);
    color: #fc8181;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    vertical-align: middle;
    animation: live-pulse 1.8s ease-in-out infinite;
}

/* Hit rate chip on player rows (stamped after modal load) */
.hit-rate-chip {
    display: inline-block;
    margin-left: 0.5em;
    padding: 0.1em 0.45em;
    border-radius: 3px;
    font-size: 0.68rem;
    font-weight: 700;
    vertical-align: middle;
    cursor: help;
}

.hit-rate-chip--skeleton {
    width: 56.59px;
    height: 21.28px;
    visibility: hidden;
}

.chip-fade-in {
    animation: chip-fade-in 0.3s ease forwards;
}

@keyframes chip-fade-in {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hit-rate-chip--high {
    background: var(--color-best-dim);
    border: 1px solid color-mix(in srgb, var(--color-best) 30%, transparent);
    color: var(--color-best);
}

.hit-rate-chip--mid {
    background: rgba(240, 240, 240, 0.07);
    border: 1px solid rgba(240, 240, 240, 0.15);
    color: var(--color-text-dim);
}

.hit-rate-chip--low {
    background: rgba(240, 82, 82, 0.1);
    border: 1px solid rgba(240, 82, 82, 0.25);
    color: #fc8181;
}


/* Season average badge */

/* Score chip on game rows */
.game-score {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-text);
    margin-left: 0.4em;
    vertical-align: middle;
    letter-spacing: 0.02em;
}

.game-period {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    margin-left: 0.3em;
    vertical-align: middle;
}

/* Score display in game detail header */
.game-detail__score {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    flex-wrap: wrap;
}

.game-detail__score-line {
    font-size: 1rem;
    color: var(--color-text);
}

.game-detail__score-line strong {
    font-size: 1.2rem;
    font-weight: 800;
}

.game-detail__score-sep {
    margin: 0 0.3em;
    color: var(--color-text-dim);
}

.game-detail__score-period {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-left: auto;
}

/* =========================================================
   Player Stats Modal
   ========================================================= */

.player-modal__dialog {
    width: min(760px, 94vw);
}

.player-modal__header {
    gap: 0.75rem;
}

.player-modal__headshot {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top center;
    background: var(--color-surface-3);
    flex-shrink: 0;
}

.player-modal__body {
    padding: 0 1.5rem 1.5rem;
}

.player-modal__loading,
.player-modal__error,
.player-modal__empty-msg,
.compare-modal__loading {
    padding: 2rem 0;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.player-modal__loading,
.compare-modal__loading {
    animation: pulse 1.4s ease-in-out infinite;
}

.player-modal__error {
    color: #f05252;
}

.modal-upgrade-btn {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.5em 1.2em;
    border-radius: var(--radius-md);
    background: var(--color-primary);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.15s;
}
.modal-upgrade-btn:hover {
    opacity: 0.85;
    color: #fff;
}

.player-modal__section {
    margin-top: 1.5rem;
}

/* Position blurb */
.player-position-blurb {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4em 0.6em;
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    margin-bottom: 1rem;
}

.player-position-blurb__badge {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--color-primary);
    color: #fff;
    padding: 0.15em 0.55em;
    border-radius: 3px;
    flex-shrink: 0;
}

.player-position-blurb__label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-text);
    flex-shrink: 0;
}

.player-position-blurb__text {
    width: 100%;
    margin: 0.25rem 0 0;
    font-size: 0.8rem;
    color: var(--color-text-dim);
    line-height: 1.5;
}

.def-rank-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.def-rank-label {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.def-rank-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2em 0.6em;
    border-radius: 4px;
    cursor: default;
}

.def-rank--good { background: var(--color-best-dim); color: var(--color-best); } /* tough defense */
.def-rank--mid  { background: rgba(255, 180, 0, 0.15);  color: #ffb400; }
.def-rank--bad  { background: rgba(229, 62, 62, 0.15);  color: #e53e3e; } /* weak defense */


/* ── Combo Breakdown Modal ───────────────────────────────────────────────── */
.combo-breakdown-modal__dialog { max-width: 520px; }
.combo-breakdown-modal__body   { padding: 1rem 1.25rem 1.25rem; }

.combo-breakdown-btn {
    position: absolute;
    top: 3px;
    right: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.15em 0.2em;
    background: rgba(99, 179, 237, 0.12);
    border: 1px solid rgba(99, 179, 237, 0.3);
    border-radius: 3px;
    color: #63b3ed;
    cursor: pointer;
    line-height: 1;
    transition: background 0.15s, border-color 0.15s;
}
.combo-breakdown-btn:hover {
    background: rgba(99, 179, 237, 0.22);
    border-color: rgba(99, 179, 237, 0.5);
}

.cbd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-bottom: 0.9rem;
}
.cbd-table th {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
    padding: 0 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    text-align: left;
}
.cbd-table td {
    padding: 0.6rem 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    vertical-align: middle;
}
.cbd-table tr:last-child td { border-bottom: none; }

.cbd-col-legs { color: var(--color-text); width: 100%; }
.cbd-col-odds { color: var(--color-text-dim); white-space: nowrap; text-align: right; padding-left: 1.5rem; }

.player-modal__section-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-muted);
    margin: 0 0 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hit-rate {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15em 0.5em;
    border-radius: 3px;
    letter-spacing: 0;
    text-transform: none;
}

.hit-rate--high  { background: var(--color-best-dim); color: var(--color-best); }
.hit-rate--mid   { background: rgba(255, 180, 0, 0.15);  color: #ffb400; }
.hit-rate--low   { background: rgba(229, 62, 62, 0.15);  color: #e53e3e; }

.player-modal__table {
    font-size: 0.8rem;
}

.player-modal__table th {
    font-size: 0.7rem;
}

.player-modal__date,
.player-modal__opp {
    color: var(--color-text-muted);
    white-space: nowrap;
}

.player-modal__result--w { color: var(--color-best); font-weight: 700; }
.player-modal__result--l { color: #f05252; font-weight: 700; }

.player-modal__averages-row td {
    background: var(--color-surface-3);
    font-weight: 700;
    border-top: 1px solid var(--color-border);
}

.player-modal__season-row td {
    opacity: 0.7;
    font-style: italic;
    border-top: none;
}

.player-modal__avg-label {
    color: var(--color-text-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.player-modal__live-row td {
    background: rgba(229, 62, 62, 0.08);
}

.player-modal__final-row td {
    background: var(--color-surface-3);
}

/* Live game stats row above the chart */
.player-modal__gamelog-wrap {
    margin-bottom: 1rem;
}

/* Minutes comparison bar — basketball live games only */
.player-modal__minutes-bar {
    margin-top: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.65rem 0.9rem;
    background: var(--color-surface-2);
    border-radius: var(--radius);
    border-left: 3px solid var(--color-accent, #f59e0b);
}

.player-modal__minutes-values {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.player-modal__minutes-label {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.player-modal__minutes-nums {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    font-size: 0.9rem;
}

.player-modal__minutes-nums strong {
    font-size: 1rem;
    color: var(--color-text);
}

.player-modal__minutes-sep {
    color: var(--color-text-muted);
}

.player-modal__minutes-avg {
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.player-modal__minutes-note {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.player-modal__minutes-note svg {
    flex-shrink: 0;
    margin-top: 0.1rem;
    opacity: 0.7;
}

/* Chart canvas */
.player-modal__chart-wrap {
    position: relative;
    width: 100%;
    height: 200px;
    margin-bottom: 1rem;
}

/* Override Chart.js inline dimension styles */
.player-modal__chart-wrap canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Averages strip below chart */
.player-modal__avgs-strip {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.6rem 0.75rem;
    background: var(--color-surface-3);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

.player-modal__avgs-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.player-modal__avgs-group-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    white-space: nowrap;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--color-border);
    text-align: center;
}

.player-modal__avgs-group-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.player-modal__avg-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
}

.player-modal__avg-item-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

.player-modal__avg-item-val {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-text);
}

/* =========================================================
   Odds History Modal
   ========================================================= */

.odds-cell:not(.odds-na) {
    cursor: pointer;
}

.odds-cell:not(.odds-na):hover {
    background: var(--color-surface-3);
}

.odds-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.odds-modal[hidden] {
    display: none;
}

.odds-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
}

.odds-modal__dialog {
    position: relative;
    z-index: 1;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    width: min(640px, 92vw);
    max-height: 85vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.odds-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid var(--color-border);
    gap: 1rem;
}

.odds-modal__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    line-height: 1.4;
    text-transform: capitalize;
}

.odds-modal__close {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    transition: color 0.15s;
}

.odds-modal__close:hover {
    color: var(--color-text);
}

.odds-modal__body {
    padding: 1.5rem;
}

.odds-modal__empty {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin: 0;
}
.odds-modal__empty--loading {
    animation: pulse 1.4s ease-in-out infinite;
}

/* Over/Under chart toggle */
.odds-chart-toggle {
    display: flex;
    gap: 0;
    margin-bottom: 0.75rem;
}
.odds-chart-toggle[hidden] { display: none; }

.odds-chart-toggle__btn {
    flex: 1;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.odds-chart-toggle__btn:first-child {
    border-radius: var(--radius) 0 0 var(--radius);
    border-right: none;
}

.odds-chart-toggle__btn:last-child {
    border-radius: 0 var(--radius) var(--radius) 0;
}

.odds-chart-toggle__btn--active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* EV / implied probability bar in odds modal */
.odds-ev-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: 0.6rem 1rem;
    margin-bottom: 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    flex-wrap: wrap;
}

.odds-ev-bar__item {
    display: flex;
    flex-direction: column;
    gap: 0.1em;
}

.odds-ev-bar__item--note {
    flex: 1;
    min-width: 160px;
}

.odds-ev-bar__label {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--color-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.odds-ev-bar__val {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
}

.odds-ev-bar__val--win {
    color: var(--color-best);
}

.odds-ev-bar__stake-wrap {
    display: flex;
    align-items: center;
    gap: 0.2em;
}

.odds-ev-bar__stake-prefix {
    font-size: 0.85rem;
    color: var(--color-text-dim);
}

.odds-ev-bar__stake-input {
    width: 5rem;
    padding: 0.2rem 0.4rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 0.88rem;
    font-family: var(--font-base);
    font-weight: 600;
}

.odds-ev-bar__stake-input:focus {
    outline: none;
    border-color: var(--color-accent);
}

.odds-ev-bar__note {
    font-size: 0.75rem;
    color: var(--color-text-dim);
    line-height: 1.4;
}

body.odds-modal-open {
    overflow: hidden;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 768px) {
    .container { padding: 0 var(--spacing-md); }

    .props-aggregator { padding: 0 var(--spacing-md); }

    .site-header .container { height: 56px; gap: var(--spacing-md); }
    .league-tabs { top: 56px; }

    .site-branding__logo { font-size: 1.1rem; }

    .site-nav ul { gap: var(--spacing-md); }

    .props-aggregator__title { font-size: 1.35rem; }

    .props-aggregator__header-row {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .league-tab-btn {
        padding: 0.55rem 0.8rem;
        font-size: 0.75rem;
    }

    .league-panel { padding-top: var(--spacing-lg); }

    .props-table td,
    .props-table thead th { padding: 0.65rem 0.75rem; }

    .props-table td:last-child,
    .props-table thead th:last-child { padding-right: 3.5rem; }

    .events-date-header { margin-top: var(--spacing-xl); }
}

/* =========================================================
   Roster Modal
   ========================================================= */
.roster-modal__dialog {
    width: min(94vw, 480px);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.roster-modal__header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.roster-modal__logo {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
    flex-shrink: 0;
}

.roster-modal__body {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    padding-top: 0;
}


.roster-section__title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin: var(--spacing-lg) 0 var(--spacing-sm);
}

.roster-section__count {
    font-weight: 400;
    color: var(--color-text-muted);
}

/* Player photo in roster table */
.roster-player__photo-cell {
    width: 2.4rem;
    padding-right: 0 !important;
}

.roster-player__photo {
    display: block;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-surface-3);
}

.roster-player__photo--placeholder {
    display: block;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--color-surface-3);
}

.roster-table__name { font-weight: 500; }

.roster-player__mins {
    margin-left: 0.5rem;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-text-muted);
}

.matchup-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-text);
    font: inherit;
    cursor: pointer;
    text-align: left;
    text-decoration: underline;
}

.matchup-link:hover { opacity: 0.75; }

.roster-table__status {
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

/* Clickable team header */
.team-section__header--clickable {
    cursor: pointer;
    transition: opacity 0.15s;
}

.team-section__header--clickable:hover {
    opacity: 0.75;
}

.team-section__header--clickable:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}


/* =========================================================
   Bet Log open button (header)
   ========================================================= */
.bet-log-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 0.2rem;
    padding: 0.45rem 1rem;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.bet-log-open-btn:hover {
    background: var(--color-surface-3);
    border-color: var(--color-border-hover);
    color: var(--color-text);
}

/* =========================================================
   EV% column
   ========================================================= */
.col-ev-header,
.col-ev {
    width: 4rem;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.col-ev--pos { color: var(--color-best); }
.col-ev--neg { color: #f05252; }

/* =========================================================
   Track Bet button on player rows
   ========================================================= */
.col-track {
    padding: 0 0.4rem !important;
    border-left: 1px solid var(--color-border) !important;
}

@media (max-width: 768px) {
    .col-track {
        padding: 0 3rem !important;
    }
}
.col-track-header {
    width: 2rem;
    border-left: 1px solid var(--color-border) !important;
}

/* ── Watchlist toggle button (on prop rows) ──────────────────────────────── */
@keyframes wl-heart-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.45); }
    70%  { transform: scale(0.9); }
    100% { transform: scale(1); }
}

.track-bet-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.track-bet-btn svg {
    transition: fill 0.2s, color 0.2s;
}

.track-bet-btn:hover {
    background: rgba(251, 113, 133, 0.12);
    border-color: rgba(251, 113, 133, 0.5);
    color: #fb7185;
}

.track-bet-btn--watching {
    background: rgba(251, 113, 133, 0.12);
    border-color: rgba(251, 113, 133, 0.5);
    color: #fb7185;
}

.track-bet-btn--mismatch {
    background: transparent;
    border-color: rgba(251, 113, 133, 0.4);
    color: #fb7185;
}

.track-bet-btn--pop svg {
    animation: wl-heart-pop 0.35s ease-out forwards;
}

/* Alert bell button */
.alert-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.alert-btn:hover {
    background: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.5);
    color: #fbbf24;
}

.alert-btn--active {
    background: rgba(251, 191, 36, 0.12);
    border-color: rgba(251, 191, 36, 0.6);
    color: #fbbf24;
}

.alert-btn--filled {
    background: rgba(251, 191, 36, 0.2);
    border-color: #fbbf24;
    color: #fbbf24;
}

.alert-btn--filled svg {
    fill: #fbbf24;
}

/* =========================================================
   Game Poll Card
   ========================================================= */

.poll-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.poll-card__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.poll-card__label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-dim);
}

.poll-card__result {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 20px;
}

.poll-card__result--over   { background: var(--color-best-dim); color: var(--color-best); }
.poll-card__result--under  { background: rgba(239, 68, 68, 0.15);  color: #f87171; }
.poll-card__result--locked { background: var(--color-surface-3);   color: var(--color-text-dim); }

.poll-card__question {
    font-size: 0.875rem;
    color: var(--color-text);
    margin: 0 0 0.875rem;
    line-height: 1.5;
}

.poll-card__odds {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin: -0.375rem 0 0.875rem;
}

.poll-card__odds strong {
    color: var(--color-text);
    font-weight: 600;
}

.poll-card__book {
    color: var(--color-text-dim);
    font-size: 0.7rem;
}

.poll-card__actions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.poll-card__btn {
    flex: 1;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.poll-card__btn:hover:not(:disabled) {
    background: var(--color-surface-3);
    color: var(--color-text);
    border-color: var(--color-border-hover);
}

.poll-card__btn--over.is-chosen,
.poll-card__btn--over.is-winner {
    background: var(--color-best-dim);
    border-color: var(--color-best);
    color: var(--color-best);
}

.poll-card__btn--under.is-chosen,
.poll-card__btn--under.is-winner {
    background: rgba(239, 68, 68, 0.12);
    border-color: #f87171;
    color: #f87171;
}

.poll-card__btn.is-loser {
    opacity: 0.4;
}

.poll-card__btn:disabled { cursor: default; }

.poll-card__bar-wrap { margin-bottom: 0.5rem; }

.poll-card__bar {
    display: flex;
    height: 4px;
    border-radius: 2px;
    overflow: hidden;
    background: var(--color-surface-3);
    margin-bottom: 0.375rem;
}

.poll-card__bar-fill {
    height: 100%;
    transition: width 0.4s ease;
}

.poll-card__bar-fill--over  { background: var(--color-best); }
.poll-card__bar-fill--under { background: #f87171; }

.poll-card__bar-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.poll-card__bar-label--over  strong { color: var(--color-best); }
.poll-card__bar-label--under strong { color: #f87171; }

.poll-card__count {
    font-size: 0.7rem;
    color: var(--color-text-dim);
    margin: 0;
    text-align: center;
}

.poll-card__hint {
    font-size: 0.75rem;
    color: var(--color-text-dim);
    margin: 0;
    text-align: center;
}

.poll-card__loading {
    font-size: 0.8rem;
    color: var(--color-text-dim);
    margin: 0;
    text-align: center;
    animation: pulse 1.4s ease-in-out infinite;
}

.consensus-badge {
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text-muted);
    pointer-events: none;
    white-space: nowrap;
}


/* Alert popover */
.alert-popover {
    position: fixed;
    z-index: 1100;
    width: 280px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

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

.alert-popover__title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text);
}

.alert-popover__close {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.alert-popover__close:hover { color: var(--color-text); }

.alert-popover__player {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin: 0 0 0.75rem;
}

.alert-popover__row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.alert-popover__label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.alert-popover__select,
.alert-popover__odds-input {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 0.85rem;
    padding: 0.35rem 0.5rem;
    width: 100%;
}

.alert-popover__odds-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alert-popover__odds-input {
    width: 90px;
    flex-shrink: 0;
}

.alert-popover__odds-unit {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.alert-popover__actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.alert-popover__save {
    flex: 1;
    padding: 0.4rem 0.75rem;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.alert-popover__save:hover { background: #1a6ae0; }

.alert-popover__delete {
    padding: 0.4rem 0.75rem;
    background: transparent;
    color: #f87171;
    border: 1px solid rgba(248, 113, 113, 0.3);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.alert-popover__delete:hover {
    background: rgba(248, 113, 113, 0.1);
    border-color: rgba(248, 113, 113, 0.6);
}

/* =========================================================
   Watchlist Page
   ========================================================= */
.wl-page {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: var(--spacing-lg) var(--spacing-xl);
}

.wl-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--spacing-lg);
}

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

.wl-page-subtitle {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0;
}

.wl-filter-bar {
    margin-bottom: var(--spacing-lg);
}

.wl-filter-input {
    width: 100%;
    max-width: 400px;
    padding: 0.5rem 0.85rem 0.5rem 2.1rem;
    font-size: 0.875rem;
    font-family: var(--font-base);
    color: var(--color-text);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 0.65rem center var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color 0.15s;
}

.wl-filter-input:focus {
    border-color: var(--color-primary);
}

.wl-filter-input::placeholder {
    color: var(--color-text-dim);
}

.wl-row--hidden {
    display: none;
}

.wl-game-group--hidden {
    display: none;
}

.wl-filter-empty {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-top: var(--spacing-md);
}

/* =========================================================
   WooCommerce Auth (My Account login/register)
   ========================================================= */
.woocommerce-MyAccount-content .ss-auth-wrap,
.ss-auth-wrap {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: calc(100vh - var(--header-height));
    padding: 4rem 1rem;
}

.ss-auth-panel {
    width: 100%;
    max-width: 400px;
    background: var(--color-surface);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.3);
}

.ss-auth-logo {
    text-align: center;
    margin-bottom: 1.5rem;
}

.ss-auth-logo a {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: lowercase;
    text-decoration: none;
    color: var(--color-text);
}

.ss-auth-logo a span,
.ss-auth-logo a em {
    color: var(--color-primary);
    font-style: normal;
}

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

.ss-auth-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1rem;
}

.ss-auth-field label {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.ss-auth-field input[type="text"],
.ss-auth-field input[type="email"],
.ss-auth-field input[type="password"] {
    background: var(--color-surface-2) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 8px !important;
    color: var(--color-text) !important;
    font-family: var(--font-base) !important;
    font-size: 0.95rem !important;
    padding: 0.6rem 0.85rem !important;
    width: 100% !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.15s !important;
}

.ss-auth-field input[type="text"]:focus,
.ss-auth-field input[type="email"]:focus,
.ss-auth-field input[type="password"]:focus {
    border-color: var(--color-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(46, 124, 246, 0.15) !important;
}

.ss-auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.ss-auth-remember {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    cursor: pointer;
}

.ss-auth-remember input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 1rem;
    height: 1rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 3px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
    position: relative;
}

.ss-auth-remember input[type="checkbox"]:checked {
    background: rgba(99, 179, 237, 0.15);
    border-color: var(--color-primary);
}

.ss-auth-remember input[type="checkbox"]:checked::after {
    content: '';
    display: block;
    width: 4px;
    height: 7px;
    border: 2px solid var(--color-primary);
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
    position: absolute;
    top: 0px;
    left: 4px;
}

.ss-auth-lost-pw {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.15s;
}

.ss-auth-lost-pw:hover {
    color: var(--color-primary);
}

.ss-auth-btn {
    width: 100% !important;
    padding: 0.65rem 1.25rem !important;
    background: var(--color-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-family: var(--font-base) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-shadow: none !important;
    box-shadow: none !important;
    transition: opacity 0.15s !important;
    display: block !important;
}

.ss-auth-btn:hover {
    opacity: 0.88 !important;
    background: var(--color-primary) !important;
    color: #fff !important;
}

.ss-auth-switch {
    text-align: center;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 1.25rem 0 0;
}

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

.ss-auth-switch-link:hover {
    text-decoration: underline;
}

.ss-auth-hint {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0 0 1rem;
}

/* WooCommerce My Account — logged out: strip page chrome, match wp-login.php feel */
.woocommerce-account:not(.logged-in) .entry-title,
.woocommerce-account:not(.logged-in) .entry-header {
    display: none;
}

.woocommerce-account:not(.logged-in) .page-content,
.woocommerce-account:not(.logged-in) .entry-content,
.woocommerce-account:not(.logged-in) .woocommerce,
.woocommerce-account:not(.logged-in) article {
    max-width: 100% !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.woocommerce-account:not(.logged-in) .woocommerce form.login,
.woocommerce-account:not(.logged-in) .woocommerce form.register,
.woocommerce-account:not(.logged-in) .woocommerce form.checkout_coupon {
    border: none !important;
    box-shadow: none !important;
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.woocommerce-account:not(.logged-in) .site-main > .container {
    max-width: 100%;
    padding: 0;
}

/* Auth panel — WooCommerce error/success notices */
.ss-auth-panel .woocommerce-error,
.ss-auth-panel .woocommerce-message,
.ss-auth-panel .woocommerce-info {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    line-height: 1.5;
    border: none;
    box-shadow: none;
    background: var(--color-surface-2);
    border-left: 3px solid var(--color-border);
    color: var(--color-text-muted);
}

.ss-auth-panel .woocommerce-error {
    border-left-color: var(--color-danger, var(--color-loss));
    color: var(--color-danger, var(--color-loss));
    background: rgba(224, 82, 82, 0.08);
}

.ss-auth-panel .woocommerce-message {
    border-left-color: var(--color-primary);
    color: var(--color-text);
    background: var(--color-surface-2);
}

.ss-auth-panel .woocommerce-info {
    border-left-color: var(--color-primary);
    color: var(--color-text-muted);
    background: var(--color-surface-2);
}

.ss-auth-panel .woocommerce-error::before,
.ss-auth-panel .woocommerce-message::before,
.ss-auth-panel .woocommerce-info::before,
.ss-auth-panel .woocommerce-error li::before,
.ss-auth-panel .woocommerce-message li::before,
.ss-auth-panel .woocommerce-info li::before {
    display: none !important;
}

.ss-auth-panel .woocommerce-error li,
.ss-auth-panel .woocommerce-message li,
.ss-auth-panel .woocommerce-info li {
    margin: 0;
    padding: 0;
}

.ss-auth-panel .woocommerce-error a,
.ss-auth-panel .woocommerce-message a,
.ss-auth-panel .woocommerce-info a {
    color: inherit;
    text-decoration: underline;
}

.ss-auth-panel .woocommerce-error a:hover,
.ss-auth-panel .woocommerce-message a:hover,
.ss-auth-panel .woocommerce-info a:hover {
    opacity: 0.8;
}

/* Global WC notices — dark-themed so they don't flash white on any page */
.woocommerce-notices-wrapper {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0.75rem var(--container-pad);
}
.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    background: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-top-color: var(--color-primary) !important;
    border-radius: 0 0 var(--radius) var(--radius) !important;
    padding: 0.75rem 1rem 0.75rem 3rem !important;
    margin: 0 0 0.5rem !important;
    list-style: none !important;
    box-shadow: none !important;
}
.woocommerce-error { border-top-color: #e05252 !important; }
.woocommerce-message::before { color: var(--color-primary) !important; }
.woocommerce-error::before   { color: #e05252 !important; }

.woocommerce-message .button,
.woocommerce-info .button {
    background: var(--color-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    padding: 0.35rem 1rem !important;
    font-size: 0.85rem !important;
    float: right !important;
    margin-top: -0.2rem !important;
}

/* WooCommerce My Account — logged-in: all account pages get full-width treatment */
.woocommerce-account.logged-in .entry-title,
.woocommerce-account.logged-in .entry-header {
    display: none !important;
}

.woocommerce-account.logged-in .page-content,
.woocommerce-account.logged-in .entry-content,
.woocommerce-account.logged-in article,
.woocommerce-account.logged-in .woocommerce {
    max-width: 100% !important;
    width: 100% !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    float: none !important;
}
.woocommerce-account.logged-in .site-main > .container {
    max-width: 100% !important;
    width: 100% !important;
    background: none !important;
    border: none !important;
    margin: 0 !important;
    box-shadow: none !important;
    float: none !important;
}

/* Dashboard only: hide WC navigation sidebar (sub-endpoints keep it) */
.woocommerce-account.logged-in:not(.woocommerce-orders):not(.woocommerce-edit-account):not(.woocommerce-edit-address):not(.woocommerce-downloads):not(.woocommerce-view-order):not(.woocommerce-view-subscription):not(.woocommerce-payment-methods) .woocommerce-MyAccount-navigation {
    display: none !important;
}

.woocommerce-account.logged-in .woocommerce-MyAccount-content {
    padding: 0 !important;
    width: 100% !important;
    float: none !important;
}

/* ── WC sub-account pages layout (orders, edit-account, addresses, etc.) ── */
.woocommerce-account.logged-in .woocommerce-MyAccount-navigation {
    width: 200px;
    min-width: 160px;
    flex-shrink: 0;
}

/* Outer wrapper: nav sidebar + content side by side */
.woocommerce-account.logged-in .woocommerce {
    display: flex !important;
    gap: 2rem !important;
    align-items: flex-start !important;
    padding: 2rem var(--container-pad) !important;
    max-width: var(--container-max) !important;
    margin: 0 auto !important;
    float: none !important;
}

/* Dashboard: no sidebar, so remove wrapper gap/padding — acct-body handles spacing */
.woocommerce-account.logged-in:not(.woocommerce-orders):not(.woocommerce-edit-account):not(.woocommerce-edit-address):not(.woocommerce-downloads):not(.woocommerce-view-order):not(.woocommerce-view-subscription):not(.woocommerce-payment-methods) .woocommerce {
    gap: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* ── View Subscription detail page ── */
.woocommerce-view-subscription .woocommerce-MyAccount-content h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}

.shop_table.subscription_details,
.shop_table.order_details,
.woocommerce-view-subscription .shop_table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 2rem;
}

.shop_table.subscription_details th,
.shop_table.subscription_details td,
.woocommerce-view-subscription .shop_table th,
.woocommerce-view-subscription .shop_table td {
    padding: 0.85rem 1.25rem;
    font-size: 0.9rem;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: middle;
}

.shop_table.subscription_details tr:last-child th,
.shop_table.subscription_details tr:last-child td,
.woocommerce-view-subscription .shop_table tr:last-child th,
.woocommerce-view-subscription .shop_table tr:last-child td {
    border-bottom: none;
}

.shop_table.subscription_details thead th,
.woocommerce-view-subscription .shop_table thead th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(240, 242, 247, 0.45);
}

.shop_table.subscription_details tfoot th,
.shop_table.subscription_details tfoot td {
    font-weight: 600;
}

/* Action buttons (Cancel, Change payment) */
.woocommerce-view-subscription .button,
.subscription-details-table .button {
    display: inline-block;
    padding: 0.4rem 1rem;
    border-radius: var(--radius);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    margin-right: 0.5rem;
    transition: opacity 0.15s;
    cursor: pointer;
    border: none;
}

.woocommerce-view-subscription .button.cancel {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text);
}

.woocommerce-view-subscription .button.cancel:hover {
    border-color: #ef4444;
    color: #ef4444;
}

.woocommerce-view-subscription .button:not(.cancel) {
    background: var(--color-primary);
    color: #fff;
}

.woocommerce-view-subscription .button:not(.cancel):hover {
    opacity: 0.85;
    color: #fff;
}

/* Addresses page: billing + shipping side by side — override WC float/clearfix */
.woocommerce-edit-address .u-columns {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
    width: 100% !important;
    float: none !important;
    overflow: visible !important;
}
.woocommerce-edit-address .u-columns::before,
.woocommerce-edit-address .u-columns::after {
    display: none !important;
}
.woocommerce-edit-address .u-column1,
.woocommerce-edit-address .u-column2 {
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
.woocommerce-edit-address .woocommerce-Address {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    padding: 1.5rem !important;
}
.woocommerce-edit-address .woocommerce-Address-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 1rem !important;
    padding-bottom: 0.75rem !important;
    border-bottom: 1px solid var(--color-border) !important;
}
.woocommerce-edit-address .woocommerce-Address-title::before,
.woocommerce-edit-address .woocommerce-Address-title::after,
.woocommerce-account .addresses .title::before,
.woocommerce-account .addresses .title::after {
    display: none !important;
}
.woocommerce-edit-address .woocommerce-Address-title h2 {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
    color: var(--color-text) !important;
}
.woocommerce-edit-address .woocommerce-Address address {
    color: var(--color-text-muted) !important;
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
    font-style: normal !important;
}
.woocommerce-edit-address p {
    color: var(--color-text-muted) !important;
    font-size: 0.875rem !important;
    margin-bottom: 1.5rem !important;
}
@media (max-width: 640px) {
    .woocommerce-edit-address .u-columns {
        grid-template-columns: 1fr !important;
    }
}

/* WC sidebar nav */
.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden !important;
    background: var(--color-surface) !important;
}
.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li {
    border-bottom: 1px solid var(--color-border) !important;
    margin: 0 !important;
}
.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li:last-child {
    border-bottom: none !important;
}
.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a {
    display: block !important;
    padding: 0.65rem 1rem !important;
    color: var(--color-text-muted) !important;
    font-size: 0.875rem !important;
    text-decoration: none !important;
    transition: color 0.15s, background 0.15s !important;
}
.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li.is-active a {
    color: var(--color-text) !important;
    background: var(--color-surface-2) !important;
}

/* WC form fields — dark inputs */
.woocommerce-account .woocommerce-form-row,
.woocommerce-account .form-row {
    margin-bottom: 1.25rem !important;
}
.woocommerce-account .woocommerce-form-row label,
.woocommerce-account .form-row label,
.woocommerce-account fieldset legend {
    display: block !important;
    color: var(--color-text-muted) !important;
    font-size: 0.8rem !important;
    margin-bottom: 0.4rem !important;
}
.woocommerce-account .woocommerce-Input,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.woocommerce-account input[type="tel"],
.woocommerce-account select,
.woocommerce-account textarea {
    background: var(--color-surface-2) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-sm) !important;
    padding: 0.6rem 0.85rem !important;
    width: 100% !important;
    font-size: 0.95rem !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
}
.woocommerce-account .woocommerce-Input:focus,
.woocommerce-account input[type="text"]:focus,
.woocommerce-account input[type="email"]:focus,
.woocommerce-account input[type="password"]:focus,
.woocommerce-account input[type="tel"]:focus,
.woocommerce-account select:focus,
.woocommerce-account textarea:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--color-primary-dim) !important;
}

/* Password-change fieldset */
.woocommerce-account fieldset {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    padding: 1.25rem !important;
    margin-bottom: 1.5rem !important;
    background: var(--color-surface) !important;
}
.woocommerce-account fieldset legend {
    padding: 0 0.5rem !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--color-text-dim) !important;
}

/* All WC account buttons — primary blue */
.woocommerce-account .woocommerce-Button,
.woocommerce-account .button,
.woocommerce-account a.button,
.woocommerce-account button[type="submit"],
.woocommerce-account input[type="submit"] {
    background: var(--color-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    padding: 0.65rem 1.5rem !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: opacity 0.15s !important;
}
.woocommerce-account .woocommerce-Button:hover,
.woocommerce-account .button:hover,
.woocommerce-account a.button:hover,
.woocommerce-account button[type="submit"]:hover,
.woocommerce-account input[type="submit"]:hover {
    opacity: 0.85 !important;
    color: #fff !important;
}

/* Two-col name row on edit-account form */
.woocommerce-edit-account .col2-set,
.woocommerce-account .woocommerce-form .col2-set {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
}
@media (max-width: 640px) {
    .woocommerce-edit-account .col2-set,
    .woocommerce-account .woocommerce-form .col2-set {
        grid-template-columns: 1fr !important;
    }
    .woocommerce-account.logged-in .woocommerce {
        flex-direction: column !important;
    }
    .woocommerce-account.logged-in .woocommerce-MyAccount-navigation {
        width: 100% !important;
    }
}

/* Password show/hide toggle — override black SVG fill with light version */
.woocommerce form .show-password-input::before,
.woocommerce-page form .show-password-input::before {
    background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.3 3.3C16.9 2.9 16.2 2.9 15.7 3.3L13.3 5.7C12.2437 5.3079 11.1267 5.1048 10 5.1C6.2 5.2 2.8 7.2 1 10.5C1.2 10.9 1.5 11.3 1.8 11.7C2.6 12.8 3.6 13.7 4.7 14.4L3 16.1C2.6 16.5 2.5 17.2 3 17.7C3.4 18.1 4.1 18.2 4.6 17.7L17.3 4.9C17.7 4.4 17.7 3.7 17.3 3.3ZM6.7 12.3L5.4 13.6C4.2 12.9 3.1 11.9 2.3 10.7C3.5 9 5.1 7.8 7 7.2C5.7 8.6 5.6 10.8 6.7 12.3ZM10.1 9C9.6 8.5 9.7 7.7 10.2 7.2C10.7 6.8 11.4 6.8 11.9 7.2L10.1 9ZM18.3 9.5C17.8 8.8 17.2 8.1 16.5 7.6L15.5 8.6C16.3 9.2 17 9.9 17.6 10.8C15.9 13.4 13 15 9.9 15H9.1L8.1 16C8.8 15.9 9.4 16 10 16C13.3 16 16.4 14.4 18.3 11.7C18.6 11.3 18.8 10.9 19.1 10.5C18.8 10.2 18.6 9.8 18.3 9.5ZM14 10L10 14C12.2 14 14 12.2 14 10Z" fill="%23a0a8b8"/></svg>') !important;
}
.woocommerce form .show-password-input.display-password::before,
.woocommerce-page form .show-password-input.display-password::before {
    background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.3 9.49999C15 4.89999 8.50002 3.79999 3.90002 7.19999C2.70002 8.09999 1.70002 9.29999 0.900024 10.6C1.10002 11 1.40002 11.4 1.70002 11.8C5.00002 16.4 11.3 17.4 15.9 14.2C16.8 13.5 17.6 12.8 18.3 11.8C18.6 11.4 18.8 11 19.1 10.6C18.8 10.2 18.6 9.79999 18.3 9.49999ZM10.1 7.19999C10.6 6.69999 11.4 6.69999 11.9 7.19999C12.4 7.69999 12.4 8.49999 11.9 8.99999C11.4 9.49999 10.6 9.49999 10.1 8.99999C9.60003 8.49999 9.60003 7.69999 10.1 7.19999ZM10 14.9C6.90002 14.9 4.00002 13.3 2.30002 10.7C3.50002 8.99999 5.10002 7.79999 7.00002 7.19999C6.30002 7.99999 6.00002 8.89999 6.00002 9.89999C6.00002 12.1 7.70002 14 10 14C12.2 14 14.1 12.3 14.1 9.99999V9.89999C14.1 8.89999 13.7 7.89999 13 7.19999C14.9 7.79999 16.5 8.99999 17.7 10.7C16 13.3 13.1 14.9 10 14.9Z" fill="%23a0a8b8"/></svg>') !important;
}

/* WC .input-text fields (address edit form uses this class) */
.woocommerce-account .input-text {
    background: var(--color-surface-2) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-sm) !important;
    padding: 0.6rem 0.85rem !important;
    width: 100% !important;
    font-size: 0.95rem !important;
    box-shadow: none !important;
    outline: none !important;
}
.woocommerce-account .input-text:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--color-primary-dim) !important;
}

/* Address edit form: first/last name side by side */
.woocommerce-address-fields__field-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 1rem !important;
}
.woocommerce-address-fields__field-wrapper .form-row-wide {
    grid-column: 1 / -1 !important;
}
.woocommerce-address-fields__field-wrapper .form-row-first,
.woocommerce-address-fields__field-wrapper .form-row-last {
    float: none !important;
    width: 100% !important;
}
@media (max-width: 640px) {
    .woocommerce-address-fields__field-wrapper {
        grid-template-columns: 1fr !important;
    }
}

/* Select2 dark theme */
.woocommerce-account .select2-container--default .select2-selection--single {
    background: var(--color-surface-2) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-sm) !important;
    height: auto !important;
    padding: 0.6rem 2rem 0.6rem 0.85rem !important;
}
.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--color-text) !important;
    padding: 0 !important;
    line-height: normal !important;
}
.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 0.6rem !important;
}
.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--color-text-muted) transparent transparent !important;
}
.woocommerce-account .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--color-text-muted) !important;
}
.select2-dropdown {
    background: var(--color-surface-2) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-sm) !important;
}
.select2-search--dropdown .select2-search__field {
    background: var(--color-surface) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-sm) !important;
    padding: 0.4rem 0.6rem !important;
}
.select2-results__option {
    color: var(--color-text-muted) !important;
    padding: 0.5rem 0.75rem !important;
}
.select2-results__option--highlighted {
    background: var(--color-primary) !important;
    color: #fff !important;
}

/* Hide noscript country update button */
.woocommerce-account noscript button,
.woocommerce-account .woocommerce-input-wrapper noscript {
    display: none !important;
}

/* Hide WP admin bar search form — causes overflow on account pages */
#adminbarsearch {
    display: none !important;
}

/* form-row label styling */
.woocommerce-account .form-row label {
    display: block !important;
    color: var(--color-text-muted) !important;
    font-size: 0.8rem !important;
    margin-bottom: 0.4rem !important;
}
.woocommerce-account .form-row .required {
    color: var(--color-loss) !important;
}

/* Description text under display name field */
.woocommerce-account .woocommerce-form-row em,
.woocommerce-account .form-row em {
    display: block !important;
    color: var(--color-text-dim) !important;
    font-size: 0.78rem !important;
    margin-top: 0.3rem !important;
    font-style: italic !important;
}

.wl-gate {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-text-muted);
}

.wl-gate-btn {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.6rem 1.5rem;
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
}

.wl-gate-btn:hover { background: #1a6ae0; }

.wl-loading {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    animation: pulse 1.4s ease-in-out infinite;
}

.wl-empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--color-text-muted);
}

.wl-empty-hint {
    font-size: 0.85rem;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3em;
}

.wl-section {
    margin-bottom: 2.5rem;
}

.wl-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
}

.wl-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 1rem;
}

.wl-section-header__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.wl-build-btn {
    padding: 0.4rem 1rem;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.wl-build-btn:hover { background: #1a6ae0; }

.wl-build-btn--active { background: #1a6ae0; }

.wl-clear-ended-btn {
    padding: 0.4rem 1rem;
    background: transparent;
    color: var(--color-text-muted);
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.15s;
}

.wl-clear-ended-btn:hover {
    color: var(--color-text);
}

.wl-parlay-builder {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-md);
}

.wl-parlay-name {
    flex: 1;
    min-width: 200px;
    padding: 0.4rem 0.7rem;
    background: var(--color-surface-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 0.85rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
}

.wl-parlay-name:focus { border-color: var(--color-primary); }

.wl-parlay-save-btn,
.wl-parlay-cancel-btn {
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.wl-parlay-save-btn {
    background: var(--color-primary);
    color: #fff;
    border: none;
}

.wl-parlay-save-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.wl-parlay-save-btn:hover:not(:disabled) { background: #1a6ae0; }

.wl-parlay-cancel-btn {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
}

.wl-parlay-cancel-btn:hover { color: var(--color-text); }

.wl-parlay-hint {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin: 0;
    width: 100%;
}

.wl-parlay-error {
    font-size: 0.8125rem;
    color: var(--color-danger, var(--color-loss));
    margin: 0;
    width: 100%;
}

/* Watchlist table */
.wl-table .wl-col-check  { width: 2rem; text-align: center; }
.wl-table .wl-col-odds   { text-align: right; font-variant-numeric: tabular-nums; }
.wl-table .wl-col-remove { width: 2rem; text-align: center; }
.wl-table .wl-col-matchup--sm { font-size: 0.78rem; color: var(--color-text-muted); }

.wl-row--selected td { background: rgba(99, 179, 237, 0.06); }

.wl-row--ended td { opacity: 0.5; }

.wl-status-badge {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.15em 0.45em;
    border-radius: 3px;
    vertical-align: middle;
}

.wl-status-badge--final {
    background: var(--color-surface-3);
    color: var(--color-text-muted);
}

.wl-status-badge--live {
    background: #e53e3e;
    color: #fff;
    animation: live-pulse 1.8s ease-in-out infinite;
}

.wl-result-badge {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.15em 0.45em;
    border-radius: 3px;
    vertical-align: middle;
}

.wl-result-badge--hit {
    background: var(--color-win-dim);
    color: var(--color-win);
}

.wl-result-badge--miss {
    background: var(--color-loss-dim);
    color: var(--color-loss);
}

/* Feature 1 — live progress badge */
.wl-result-badge--progress {
    background: rgba(232, 179, 57, 0.14);
    color: #e8b339;
}

.wl-result-badge--push {
    background: rgba(160, 160, 160, 0.12);
    color: var(--color-text-muted);
}

/* Settlement result badges (win / loss / push from cron) */
.wl-result-badge--win {
    background: var(--color-win-dim);
    color: var(--color-win);
}

.wl-result-badge--loss {
    background: var(--color-loss-dim);
    color: var(--color-loss);
}

/* Feature 2 — odds trend arrow */
.wl-trend {
    display: inline-block;
    margin-left: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    vertical-align: middle;
}
.wl-trend--up   { color: var(--color-loss); } /* line moved against you (worse odds) */
.wl-trend--down { color: var(--color-win); } /* line moved in your favor (better odds) */

/* Feature 3 — EV% / CLV column */
.wl-col-ev { text-align: right; width: 5rem; }

.wl-clv {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.15em 0.4em;
    border-radius: 3px;
    vertical-align: middle;
}
.wl-clv--pos { background: var(--color-win-dim); color: var(--color-win); }
.wl-clv--neg { background: var(--color-loss-dim);  color: var(--color-loss); }
.wl-clv--mid { background: rgba(160, 160, 160, 0.10); color: var(--color-text-muted); }

.wl-ev {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15rem 0.35rem;
    border-radius: 3px;
}
.wl-ev--pos { background: var(--color-win-dim); color: var(--color-win); }
.wl-ev--mid { background: rgba(255,255,255,0.06);   color: var(--color-text-muted); }
.wl-ev--neg { background: var(--color-loss-dim);  color: var(--color-loss); }

/* Feature 4 — game group header row */
.wl-groups {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.wl-game-group {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.wl-game-header {
    padding: 0.6rem 1.1rem;
    background: var(--color-surface-2);
    border-bottom: 1px solid var(--color-border);
    font-size: 0.78rem;
}

.wl-game-group .props-table-wrap {
    border-radius: 0;
}

.wl-game-group .props-table {
    border-radius: 0;
    border: none;
}
.wl-game-header__inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wl-game-header__logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

.wl-game-header__logo--placeholder {
    width: 20px;
    height: 20px;
    display: inline-block;
}

.wl-game-header__matchup {
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.wl-game-header__sep {
    color: var(--color-text-dim);
    font-weight: 400;
    margin: 0 0.15rem;
}

.wl-select-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    min-height: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 3px;
    background: transparent;
    color: var(--color-primary);
    cursor: pointer;
    overflow: hidden;
    transition: background 0.15s, border-color 0.15s;
}

.wl-select-btn--on {
    background: rgba(99, 179, 237, 0.15);
    border-color: var(--color-primary);
}

.wl-select-btn svg {
    display: block;
    flex-shrink: 0;
}

.wl-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: 50%;
    transition: color 0.15s, background 0.15s;
}

.wl-remove-btn:hover {
    color: var(--color-danger, var(--color-loss));
    background: var(--color-loss-dim);
}

.wl-table .wl-col-remove {
    white-space: nowrap;
    text-align: right;
}

.wl-expand-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: 50%;
    transition: color 0.15s, transform 0.2s;
    vertical-align: middle;
}

.wl-expand-btn:hover { color: var(--color-text); }

.wl-expand-btn--open svg { transform: rotate(180deg); }

.wl-book-row td {
    padding: 0.85rem 1.1rem;
    background: var(--color-surface-2);
    border-bottom: none;
    font-size: inherit;
    color: var(--color-text-muted);
}

.wl-book-row:last-of-type td { border-bottom: 1px solid var(--color-border); }

/* Parlay cards */
.wl-parlays {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.wl-parlay {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.wl-parlay__header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0.6rem 1rem;
    background: var(--color-surface-3);
    border-bottom: 1px solid var(--color-border);
}

.wl-parlay__name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-text);
    flex: 1;
}

.wl-parlay__count {
    font-size: 0.75rem;
    color: var(--color-text);
    background: var(--color-surface);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
}

.wl-parlay__delete {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 0.25rem;
    transition: color 0.15s;
}

.wl-parlay__delete:hover { color: var(--color-danger, var(--color-loss)); }

.wl-parlay__legs {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wl-parlay-leg {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0.55rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 0.85rem;
}

.wl-parlay-leg:last-child { border-bottom: none; }

.wl-parlay-leg__player { font-weight: 600; color: var(--color-text); flex: 1; }
.wl-parlay-leg__line   { font-weight: 400; color: var(--color-text-muted); white-space: nowrap; }
.wl-parlay-leg__market { font-weight: 400; color: var(--color-text-muted); white-space: nowrap; }
.wl-parlay-leg__odds   { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--color-text); white-space: nowrap; margin-left: 1rem; }
.wl-parlay-leg__book   { font-size: 0.75rem; color: var(--color-text-muted); white-space: nowrap; }

/* Bet cards */
.bet-log-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.bet-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--color-border);
    transition: border-color 0.15s;
}

.bet-card--won  { border-left-color: var(--color-success, var(--color-win)); }
.bet-card--lost { border-left-color: var(--color-danger, var(--color-loss)); }
.bet-card--push { border-left-color: var(--color-text-muted, #888); }

.bet-card__main { flex: 1; min-width: 0; }

.bet-card__player {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bet-card__meta {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-top: 0.15rem;
}

.bet-card__info {
    font-size: 0.75rem;
    color: var(--color-text-muted, #888);
    margin-top: 0.1rem;
}

.bet-card__matchup,
.bet-card__notes {
    font-size: 0.72rem;
    color: var(--color-text-muted, #888);
    margin-top: 0.1rem;
    font-style: italic;
}

.bet-card__outcome { flex-shrink: 0; }

.bet-outcome-select {
    padding: 0.3rem 0.5rem;
    background: var(--color-surface-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-family: inherit;
    cursor: pointer;
    outline: none;
}

.bet-outcome-select:focus { border-color: var(--color-primary); }


/* Compare button on player rows */
.compare-btn {
    margin-left: 0.25em;
    padding: 0.15em 0.4em;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-dim);
    font-size: 0.78rem;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    vertical-align: middle;
}

.compare-btn:hover,
.compare-btn--active {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-dim);
}

/* Compare bar (sticky bottom strip) */
.compare-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 990;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: 0.6rem 1.5rem;
    padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
}

.compare-bar__slots {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 1;
}

.compare-bar__slot {
    display: flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px dashed var(--color-border);
    min-width: 140px;
}

.compare-bar__name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
}

.compare-bar__remove {
    background: none;
    border: none;
    color: var(--color-text-dim);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0;
    line-height: 1;
}

.compare-bar__remove:hover {
    color: #fc8181;
}

.compare-bar__vs {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.compare-bar__go {
    padding: 0.4rem 1.1rem;
    border-radius: var(--radius-sm);
    border: none;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s;
}

.compare-bar__go:disabled {
    opacity: 0.4;
    cursor: default;
}

.compare-bar__clear {
    padding: 0.35rem 0.8rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-dim);
    font-size: 0.82rem;
    cursor: pointer;
}

@media (max-width: 640px) {
    .compare-bar {
        flex-wrap: wrap;
        padding: 0.5rem 0.75rem;
        gap: 0.4rem;
    }

    .compare-bar__slots {
        flex: 1 1 100%;
        gap: 0.35rem;
    }

    .compare-bar__slot {
        flex: 1;
        min-width: 0;
        padding: 0.2rem 0.5rem;
    }

    .compare-bar__name {
        font-size: 0.78rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 90px;
    }

    .compare-bar__vs {
        font-size: 0.7rem;
    }

    .compare-bar__go {
        flex: 1;
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
    }

    .compare-bar__clear {
        padding: 0.4rem 0.6rem;
        font-size: 0.78rem;
    }
}

/* Compare modal */
.compare-modal__dialog {
    max-width: 820px;
    width: 96vw;
}

.compare-modal__body {
    padding: 1.5rem;
}

.compare-grid {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    gap: 1.5rem;
    align-items: start;
}

.compare-divider {
    background: var(--color-border);
    height: 100%;
    min-height: 200px;
}

@media (max-width: 560px) {
    .compare-modal__body {
        padding: 1rem;
    }
    .compare-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .compare-divider {
        height: 1px;
        min-height: 0;
        width: 100%;
        margin: 1rem 0;
    }
    .compare-player__name {
        font-size: 0.9rem;
    }
}

.compare-player__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.compare-player__headshot {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-surface);
}

.compare-player__name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
}

.compare-player__market {
    font-size: 0.78rem;
    color: var(--color-text-dim);
    text-transform: capitalize;
    margin-top: 0.1em;
}

.compare-stats__line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.compare-stats__label {
    font-size: 0.78rem;
    color: var(--color-text-dim);
}

.compare-stats__label--section {
    display: block;
    margin-top: 0.75rem;
    margin-bottom: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-dim);
}

.compare-stats__val {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text);
}

.compare-games {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.compare-game {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    font-size: 0.82rem;
}

.compare-game--hit {
    background: var(--color-best-dim);
    color: var(--color-best);
}

.compare-game--miss {
    background: rgba(240, 82, 82, 0.08);
    color: #fc8181;
}

.compare-game__opp {
    font-weight: 500;
}

.compare-game__val {
    font-weight: 700;
}

.compare-no-data,
.compare-error {
    color: var(--color-text-dim);
    font-size: 0.85rem;
    padding: 1rem 0;
    text-align: center;
}

/* Back to top */
.back-to-top {
    position: fixed;
    bottom: 5rem;
    right: 1.75rem;
    z-index: 999;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, border-color 0.15s, background 0.15s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

@media (max-width: 767px) {
    .back-to-top {
        bottom: 6rem;
    }
}

.back-to-top--visible {
    opacity: 1;
    pointer-events: auto;
}

.back-to-top:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-dim);
}

/* =========================================================
   Best Value Page
   ========================================================= */
.bv-page {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.bv-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
}

.bv-page-title {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.4px;
    margin: 0 0 var(--spacing-xs);
    color: var(--color-text);
}

.bv-page-subtitle {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0;
}

.bv-page-header__right {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-shrink: 0;
}

.bv-refresh-status {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.bv-refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.45rem 1rem;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.bv-refresh-btn:hover:not(:disabled) {
    background: var(--color-surface-3);
    border-color: var(--color-border-hover);
    color: var(--color-text);
}

.bv-refresh-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Sport filter tabs */
.bv-sport-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 1px solid var(--color-border);
}

.bv-sport-tab {
    padding: 0.5rem 1rem;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    font-family: var(--font-base);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}

.bv-sport-tab:hover { color: var(--color-text); }

.bv-sport-tab.is-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* Controls bar */
.bv-controls-wrap {
    margin-bottom: var(--spacing-md);
}

.bv-controls-toolbar {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.bv-filter-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text-muted);
    font-family: var(--font-base);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s;
    flex-shrink: 0;
}

.bv-filter-toggle:hover,
.bv-filter-toggle[aria-expanded="true"] {
    border-color: var(--color-primary);
    color: var(--color-text);
}

.bv-filter-toggle.has-filters {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.bv-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--color-primary);
    color: #fff;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
}

.bv-filter-drawer {
    display: none;
}

.bv-filter-drawer.is-open {
    display: block;
}

.bv-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.bv-control-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bv-control-group--search { flex: 1; min-width: 200px; }

.bv-controls-toolbar .bv-search-input { flex: 1; }

.bv-control-label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

.bv-sort-select {
    padding: 0.4rem 0.7rem;
    background: var(--color-surface-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-family: var(--font-base);
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.15s;
}

.bv-search-input {
    padding: 0.4rem 0.7rem 0.4rem 2.1rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 0.65rem center var(--color-surface-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-family: var(--font-base);
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.15s;
}

.bv-sort-select:focus,
.bv-search-input:focus { border-color: var(--color-primary); }

.bv-number-input-wrap {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.bv-number-input {
    width: 15ch;
    padding: 0.4rem 0.5rem;
    background: var(--color-surface-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-family: var(--font-base);
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.15s;
    -moz-appearance: textfield;
    appearance: textfield;
}

.bv-number-input:focus { border-color: var(--color-primary); }

.bv-number-input::-webkit-inner-spin-button,
.bv-number-input::-webkit-outer-spin-button { -webkit-appearance: none; }

.bv-number-unit {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* Results meta */
.bv-results-meta {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    padding: 0 2px;
}

/* Row additions for sport tag */
.bv-row__top {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.bv-row__sport-tag {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.15em 0.5em;
    border-radius: 3px;
    background: var(--color-primary-dim);
    border: 1px solid rgba(46, 124, 246, 0.2);
    color: var(--color-primary);
    white-space: nowrap;
}

@media (min-width: 769px) {
    .bv-filter-toggle { display: none; }
    .bv-filter-drawer { display: block !important; }
}

@media (max-width: 768px) {
    .bv-page { padding: 0 var(--spacing-md); }
    .bv-page-header { flex-direction: column; gap: var(--spacing-sm); }
    .bv-page-header__right { align-self: flex-start; }
    .bv-controls { gap: var(--spacing-sm); }
}

/* =========================================================
   Landing Page
   ========================================================= */

/* ── Shared ── */
.lp {
    overflow-x: hidden;
}

.lp-section-title {
    margin: 0 0 1.75rem;
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text);
    text-align: center;
    letter-spacing: -0.02em;
}

.lp-section-sub {
    margin: 0 0 var(--spacing-2xl);
    color: var(--color-text-muted);
    text-align: center;
    font-size: 1.05rem;
}

.lp-eyebrow {
    display: inline-block;
    margin: 0 0 var(--spacing-md);
    padding: 0.25em 0.75em;
    border-radius: 999px;
    background: var(--color-primary-dim);
    border: 1px solid rgba(46, 124, 246, 0.3);
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Buttons */
.lp-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.7em 1.6em;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.15s, box-shadow 0.15s, color 0.15s, border-color 0.15s;
    cursor: pointer;
}

.lp-btn--primary {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 2px 12px var(--color-primary-glow);
}

.lp-btn--primary:hover {
    opacity: 0.88;
    color: #fff;
    box-shadow: 0 4px 20px var(--color-primary-glow);
}

.lp-btn--ghost {
    background: transparent;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border-hover);
}

.lp-btn--ghost:hover {
    color: var(--color-text);
    border-color: rgba(255, 255, 255, 0.25);
}

.lp-btn--outline {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border-hover);
}

.lp-btn--outline:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.lp-btn--full { width: 100%; justify-content: center; text-align: center; }

/* ── Animations ── */

@keyframes lp-fade-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes lp-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Hero — plays on load */
.lp-eyebrow {
    animation: lp-fade-up 0.6s ease both;
    animation-delay: 0.05s;
}
.lp-hero__headline {
    animation: lp-fade-up 0.6s ease both;
    animation-delay: 0.15s;
}
.lp-hero__sub {
    animation: lp-fade-up 0.6s ease both;
    animation-delay: 0.25s;
}
.lp-hero__ctas {
    animation: lp-fade-up 0.6s ease both;
    animation-delay: 0.35s;
}
.lp-proof-chip:nth-child(1) { animation: lp-fade-up 0.5s ease both; animation-delay: 0.45s; }
.lp-proof-chip:nth-child(2) { animation: lp-fade-up 0.5s ease both; animation-delay: 0.55s; }
.lp-proof-chip:nth-child(3) { animation: lp-fade-up 0.5s ease both; animation-delay: 0.65s; }

/* Scroll-triggered elements — hidden until .is-visible is added by JS */
.lp-animate {
    opacity: 0;
    transition: opacity 0.8s ease;
}
.lp-animate.is-visible {
    opacity: 1;
}

.lp-animate-child {
    opacity: 0;
    transition: opacity 0.8s ease;
}
.lp-animate-child.is-visible {
    opacity: 1;
}

/* ── Hero ── */
.lp-hero {
    position: relative;
    padding: 7rem 0 5rem;
    text-align: center;
    overflow: hidden;
}

.lp-hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.lp-hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.35;
}

.lp-hero__glow--1 {
    width: 600px;
    height: 400px;
    background: var(--color-primary);
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
}

.lp-hero__glow--2 {
    width: 400px;
    height: 300px;
    background: var(--color-accent);
    top: 60px;
    right: 10%;
    opacity: 0.15;
}

.lp-hero__inner {
    position: relative;
    z-index: 1;
}

.lp-hero__headline {
    margin: 0 0 var(--spacing-lg);
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--color-text);
}

.lp-hero__headline em {
    font-style: normal;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.lp-hero__sub {
    max-width: 580px;
    margin: 0 auto var(--spacing-xl);
    color: var(--color-text-muted);
    font-size: 1.1rem;
    line-height: 1.7;
}

.lp-hero__ctas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-xl);
}

.lp-hero__proof {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.lp-proof-chip {
    padding: 0.3em 0.8em;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 500;
}

/* ── Features ── */
.lp-features {
    padding: 5rem 0;
}

.lp-features__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

.lp-feature-card {
    padding: var(--spacing-xl);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color 0.2s, transform 0.2s, opacity 0.8s ease;
}

.lp-feature-card:hover {
    border-color: var(--color-border-hover);
    transform: translateY(-2px);
}

.lp-feature-card__icon {
    font-size: 1.8rem;
    margin-bottom: var(--spacing-md);
    line-height: 1;
}

.lp-feature-card__title {
    margin: 0 0 var(--spacing-sm);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text);
}

.lp-feature-card__desc {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.65;
}

/* ── Teaser ── */
.lp-teaser {
    padding: 5rem 0;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.lp-teaser__table-wrap {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.lp-teaser__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.lp-teaser__table thead th {
    padding: 0.75rem 1rem;
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.lp-teaser__table tbody td {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-muted);
}

.lp-teaser__table tbody tr:last-child td {
    border-bottom: none;
}

.lp-teaser__table tbody tr:nth-child(1) td:first-child,
.lp-teaser__table tbody tr:nth-child(2) td:first-child,
.lp-teaser__table tbody tr:nth-child(3) td:first-child,
.lp-teaser__table tbody tr:nth-child(4) td:first-child,
.lp-teaser__table tbody tr:nth-child(5) td:first-child {
    color: transparent;
    text-shadow: 0 0 10px var(--color-text-muted);
    user-select: none;
}

.lp-edge-badge {
    display: inline-block;
    padding: 0.2em 0.6em;
    border-radius: var(--radius-sm);
    background: var(--color-best-dim);
    color: var(--color-best);
    font-weight: 700;
    font-size: 0.85em;
}

.lp-teaser__lock {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, transparent 0%, rgba(10, 12, 16, 0.75) 25%, rgba(10, 12, 16, 0.97) 55%);
    backdrop-filter: blur(2px);
}

.lp-teaser__lock-inner {
    text-align: center;
    padding: var(--spacing-xl);
}

.lp-teaser__lock-icon {
    font-size: 2rem;
    margin-bottom: var(--spacing-md);
}

.lp-teaser__lock-title {
    margin: 0 0 var(--spacing-sm);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-text);
}

.lp-teaser__lock-sub {
    margin: 0 0 var(--spacing-lg);
    color: var(--color-text-muted);
    max-width: 380px;
    font-size: 0.9rem;
}

/* ── Pricing ── */
.lp-pricing {
    padding: 5rem 0;
}

.lp-pricing-hero {
    padding: 4rem 0 0;
    text-align: center;
}

.lp-pricing--page {
    padding-top: 2.5rem;
}

.lp-pricing__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    align-items: stretch;
}

.lp-plan {
    position: relative;
    padding: var(--spacing-xl);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
}

.lp-plan--featured {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-glow);
    background: linear-gradient(160deg, rgba(46, 124, 246, 0.07) 0%, var(--color-surface) 60%);
}

.lp-plan__badge {
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.2em 0.85em;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.lp-plan__header {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
}

.lp-plan__name {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
}

.lp-plan__price {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-bottom: 0.4rem;
}

.lp-plan__amount {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-text);
    letter-spacing: -0.03em;
}

.lp-plan__cents {
    font-size: 1.1rem;
    font-weight: 700;
    vertical-align: super;
    letter-spacing: 0;
}

.lp-plan__period {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.lp-plan__tagline {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.lp-plan__features {
    list-style: none;
    margin: 0 0 var(--spacing-xl);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1;
}

.lp-plan__features li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--color-text);
}

.lp-plan__features li::before {
    content: '✓';
    flex-shrink: 0;
    width: 1.2em;
    color: var(--color-best);
    font-weight: 700;
}

.lp-plan__feature--locked {
    color: var(--color-text-muted) !important;
}

.lp-plan__feature--locked::before {
    content: '✕' !important;
    color: var(--color-text-dim) !important;
}

/* ── Footer CTA ── */
.lp-cta {
    padding: 5rem 0;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    text-align: center;
}

.lp-cta__title {
    margin: 0 0 var(--spacing-md);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.lp-cta__sub {
    margin: 0 0 var(--spacing-xl);
    color: var(--color-text-muted);
    font-size: 1rem;
}

/* ── Responsive ── */
@media (max-width: 960px) {
    .lp-features__grid { grid-template-columns: repeat(2, 1fr); }
    .lp-pricing__grid  { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
}

@media (max-width: 600px) {
    .lp-hero { padding: 4rem 0 3rem; }
    .lp-hero__headline { font-size: 2rem; }
    .lp-features__grid { grid-template-columns: 1fr; }
    .lp-hero__ctas { flex-direction: column; align-items: stretch; }
    .lp-hero__ctas .lp-btn { justify-content: center; }
    .lp-teaser__table thead { display: none; }
    .lp-section-title { font-size: 1.5rem; }
}

/* =========================================================
   MMA Fighter Modal
   ========================================================= */

/* Win-method breakdown strip */
.mma-method-strip {
    display: flex;
    gap: 0.75rem;
    margin: 0.75rem 0;
    flex-wrap: wrap;
}

.mma-method-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.6rem 1rem;
    border-radius: var(--radius);
    min-width: 72px;
}

.mma-method--ko {
    background: rgba(252, 129, 129, 0.12);
    border: 1px solid rgba(252, 129, 129, 0.3);
}

.mma-method--sub {
    background: rgba(100, 170, 252, 0.12);
    border: 1px solid rgba(100, 170, 252, 0.3);
}

.mma-method--dec {
    background: rgba(160, 160, 160, 0.12);
    border: 1px solid rgba(160, 160, 160, 0.3);
}

.mma-method-val {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-text);
    line-height: 1;
}

.mma-method-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-muted);
}

/* Fight history table */
.mma-fight-history-table .mma-opponent {
    font-weight: 600;
}

.mma-result-badge {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 700;
}

.mma-result--win {
    background: rgba(72, 187, 120, 0.2);
    color: #48bb78;
}

.mma-result--loss {
    background: rgba(252, 129, 129, 0.2);
    color: #fc8181;
}

.mma-result--nc {
    background: rgba(160, 160, 160, 0.15);
    color: var(--color-text-muted);
}

/* =========================================================
   Support Page — split panel layout
   ========================================================= */

/* Override site-main padding so we can go edge-to-edge */
.page-template-page-support .site-main {
    padding: 0;
}

.support-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: calc(100vh - var(--header-height));
}

/* ── Left panel ── */
.support-split__left {
    position: relative;
    overflow: hidden;
    background: var(--color-surface);
    display: flex;
    align-items: center;
    padding: var(--spacing-2xl);
    border-right: 1px solid var(--color-border);
}

.support-split__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}

.support-split__glow--1 {
    width: 500px;
    height: 350px;
    background: var(--color-primary);
    opacity: 0.2;
    top: -80px;
    left: -60px;
}

.support-split__glow--2 {
    width: 300px;
    height: 250px;
    background: var(--color-accent);
    opacity: 0.08;
    bottom: 0;
    right: -40px;
}

.support-split__left-inner {
    max-width: 460px;
}

.support-split__eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    background: var(--color-primary-dim);
    border: 1px solid rgba(46, 124, 246, 0.25);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    margin-bottom: var(--spacing-lg);
}

.support-split__headline {
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--color-text);
    margin: 0 0 var(--spacing-lg);
}

.support-split__sub {
    font-size: 1rem;
    color: var(--color-text-muted);
    line-height: 1.65;
    margin: 0 0 var(--spacing-2xl);
    max-width: 380px;
}

.support-split__reasons {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.support-split__reason {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
}

.support-split__reason-icon {
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.support-split__reason div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.support-split__reason strong {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-text);
}

.support-split__reason span {
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

/* ── Right panel ── */
.support-split__right {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl);
    background: var(--color-bg);
}

.support-split__right-inner {
    width: 100%;
    max-width: 480px;
}

.support-split__form-title {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-text);
    margin: 0 0 var(--spacing-xl);
}

/* ── CF7 overrides ── */
.support-split__right-inner .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Name + Email side by side on desktop */
.support-split__right-inner .wpcf7-form .support-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

@media (max-width: 600px) {
    .support-split__right-inner .wpcf7-form .support-row {
        grid-template-columns: 1fr;
    }
}

.support-split__right-inner .wpcf7-form p {
    margin: 0;
}

/* Labels wrap their inputs — stack label text above the field */
.support-split__right-inner .wpcf7-form label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-muted);
}

.support-split__right-inner .wpcf7-form input[type="text"],
.support-split__right-inner .wpcf7-form input[type="email"],
.support-split__right-inner .wpcf7-form select,
.support-split__right-inner .wpcf7-form textarea {
    width: 100%;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-family: var(--font-base);
    font-size: 0.9rem;
    padding: 0.7rem 1rem;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}

.support-split__right-inner .wpcf7-form input[type="text"]:focus,
.support-split__right-inner .wpcf7-form input[type="email"]:focus,
.support-split__right-inner .wpcf7-form select:focus,
.support-split__right-inner .wpcf7-form textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-dim);
}

.support-split__right-inner .wpcf7-form select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(240,242,247,0.4)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
    cursor: pointer;
}

.support-split__right-inner .wpcf7-form textarea {
    resize: vertical;
    min-height: 130px;
    height: 130px;
}

.support-split__right-inner .wpcf7-submit {
    width: 100%;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-base);
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.85rem 1.5rem;
    cursor: pointer;
    transition: opacity 0.15s, box-shadow 0.15s;
    letter-spacing: 0.01em;
}

.support-split__right-inner .wpcf7-submit:hover {
    opacity: 0.88;
    box-shadow: var(--shadow-glow);
}

.support-split__right-inner .wpcf7-not-valid-tip {
    font-size: 0.76rem;
    color: #fc8181;
    margin-top: 0.15rem;
}

.support-split__right-inner .wpcf7-response-output {
    margin: 0;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .support-split {
        grid-template-columns: 1fr;
    }

    .support-split__left {
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        padding: var(--spacing-xl) var(--spacing-lg);
    }

    .support-split__left-inner {
        max-width: 100%;
    }

    .support-split__sub {
        max-width: 100%;
    }

    .support-split__reasons {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--spacing-md);
    }

    .support-split__reason {
        flex: 1 1 calc(50% - var(--spacing-md));
        min-width: 180px;
    }

    .support-split__right {
        padding: var(--spacing-xl) var(--spacing-lg);
        align-items: flex-start;
    }
}

/* =========================================================
   Account Page
   ========================================================= */

/* ── Hero ── */
.acct-hero {
    padding-top: var(--spacing-md);
    padding-bottom: 0;
}


.acct-hero__inner {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    width: 100%;
    padding: var(--spacing-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.acct-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-primary-dim);
    border: 2px solid var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
    flex-shrink: 0;
}

.acct-hero__meta {
    flex: 1;
    min-width: 0;
}

.acct-hero__name-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-bottom: 0.2rem;
}

.acct-hero__name {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    color: var(--color-text);
}

.acct-hero__email {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin: 0;
}

.acct-signout-btn {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.15s;
}

.acct-signout-btn:hover {
    color: var(--color-text);
}

/* ── Plan badge ── */
.acct-plan-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.acct-plan-badge--free {
    background: var(--color-surface-3);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}

.acct-plan-badge--pro {
    background: rgba(46, 124, 246, 0.15);
    color: var(--color-primary);
    border: 1px solid rgba(46, 124, 246, 0.3);
}

.acct-plan-badge--sharp {
    background: var(--color-primary-dim);
    color: var(--color-primary);
    border: 1px solid rgba(46, 124, 246, 0.3);
}



/* ── Body layout ── */
.acct-body {
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-2xl);
}

.acct-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: start;
}

.acct-col {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

/* ── Cards ── */
.acct-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
}

.acct-card--danger {
    border-color: rgba(239, 68, 68, 0.25);
}


.acct-card__title {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 var(--spacing-xs);
    color: var(--color-text);
}


.acct-card__sub {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0 0 var(--spacing-lg);
}

.acct-card__sub a { color: var(--color-primary); text-decoration: underline; }
.acct-card__sub a:hover { color: var(--color-primary); opacity: 0.8; }

/* ── Plan card ── */
.acct-plan-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.acct-plan-desc {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0;
}

.acct-plan-actions {
    margin-top: var(--spacing-lg);
}

.acct-coming-soon-wrap {
    position: relative;
    display: inline-block;
}

.acct-coming-soon-wrap:hover::after {
    content: 'Coming soon';
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-surface-3);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.75rem;
    white-space: nowrap;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-sm);
    pointer-events: none;
}

.acct-plan-features {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
}

.acct-feature-list {
    list-style: none;
    margin: var(--spacing-sm) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--spacing-xs) var(--spacing-lg);
}

.acct-feature-list li {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.acct-feature-list li::first-letter {
    color: var(--color-best);
}

/* ── Account info grid ── */
.acct-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.acct-info-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.acct-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-dim);
}

.acct-muted {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0;
}

.acct-loading {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0;
    animation: pulse 1.4s ease-in-out infinite;
}

.prop-alerts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    margin-top: 0.75rem;
}

.prop-alerts-table thead th {
    text-align: left;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-dim);
    padding: 0 0.5rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
}

.prop-alerts-table thead th:last-child {
    width: 2rem;
}

.prop-alerts-table tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.prop-alerts-table tbody tr:last-child {
    border-bottom: none;
}

.prop-alerts-table tbody td {
    padding: 0.6rem 0.5rem;
    vertical-align: middle;
    color: var(--color-text);
}

.prop-alerts-table tbody td:first-child {
    font-weight: 600;
}

.prop-alerts-table tbody td:nth-child(4) {
    color: var(--color-primary);
    font-weight: 600;
}

.prop-alerts-table tbody td:nth-child(5) {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.prop-alert-remove-btn {
    background: none;
    border: none;
    color: var(--color-text-dim);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    line-height: 1;
    display: block;
    margin: 0 auto;
    transition: color 0.15s;
}

.prop-alert-remove-btn:hover { color: #f87171; }

.acct-value {
    font-size: 0.9375rem;
    color: var(--color-text);
}

/* ── Notification rule builder ── */
.notif-rules {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.notif-empty {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    padding: var(--spacing-lg) 0;
    text-align: center;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
}

.notif-empty p { margin: 0; }

.notif-rule {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    animation: notif-rule-in 0.15s ease;
}

@keyframes notif-rule-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.notif-rule--removing {
    animation: notif-rule-out 0.15s ease forwards;
}

@keyframes notif-rule-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-4px); }
}

.notif-rule__summary {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.notif-rule__field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.notif-rule__field--type {
    flex: 1;
    min-width: 200px;
}

.notif-rule__field-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-dim);
}

.notif-rule__select,
.notif-rule__input {
    background: var(--color-surface-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 0.875rem;
    padding: 0.4rem 0.6rem;
    outline: none;
    transition: border-color 0.15s;
    width: 6rem;
}

.notif-rule__select:focus,
.notif-rule__input:focus {
    border-color: var(--color-primary);
}

.notif-rule__select {
    width: 100%;
}

.notif-rule__input-wrap {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.notif-rule__unit {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.notif-rule__remove {
    background: none;
    border: none;
    color: var(--color-text-dim);
    cursor: pointer;
    font-size: 0.875rem;
    padding: 0.35rem;
    border-radius: var(--radius-sm);
    margin-left: auto;
    flex-shrink: 0;
    align-self: flex-end;
    transition: color 0.15s, background 0.15s;
    line-height: 1;
}

.notif-rule__remove:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

.notif-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: 0.875rem;
    padding: 0.5rem var(--spacing-md);
    cursor: pointer;
    width: 100%;
    justify-content: center;
    transition: border-color 0.15s, color 0.15s;
}

.notif-add-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.acct-form-footer {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding-top: var(--spacing-lg);
}

.acct-save-status {
    font-size: 0.875rem;
}

.acct-save-status--ok  { color: var(--color-best); }
.acct-save-status--err { color: #ef4444; }

/* ── Sportsbook preferences ── */
.book-prefs {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.book-prefs__all {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--color-border);
}

.book-prefs__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.5rem;
}

.book-prefs__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-text);
    cursor: pointer;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    transition: border-color 0.15s, background 0.15s;
}

.book-prefs__item:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary-dim);
}

.book-prefs__item input,
.book-prefs__all input {
    accent-color: var(--color-primary);
    cursor: pointer;
}

/* ── Danger zone ── */
.acct-danger-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.acct-danger-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 0.25rem;
}

.acct-danger-desc {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0;
    max-width: 480px;
}

/* ── Buttons ── */
.acct-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1.25rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s, background 0.15s;
    white-space: nowrap;
}

.acct-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.acct-btn--primary {
    background: var(--color-primary);
    color: #fff;
}

.acct-btn--primary:hover:not(:disabled) {
    opacity: 0.88;
    color: #fff;
}

.acct-btn--ghost {
    background: transparent;
    color: var(--color-text-muted);
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.acct-btn--ghost:hover:not(:disabled) {
    border-color: var(--color-primary);
    color: var(--color-text);
}

.acct-btn--danger {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.acct-btn--danger:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.2);
}

/* ── Delete modal ── */
.acct-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.acct-modal-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.acct-modal {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    width: 100%;
    max-width: 440px;
    transform: translateY(12px);
    transition: transform 0.2s;
}

.acct-modal-overlay.is-open .acct-modal {
    transform: translateY(0);
}

.acct-modal__title {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 var(--spacing-md);
    color: var(--color-text);
}

.acct-modal__body {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 0 0 var(--spacing-lg);
    line-height: 1.6;
}

.acct-modal__confirm-label {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0 0 var(--spacing-sm);
}

.acct-modal__input {
    width: 100%;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: 0.9375rem;
    padding: 0.6rem 0.875rem;
    margin-bottom: var(--spacing-lg);
    outline: none;
    transition: border-color 0.15s;
}

.acct-modal__input:focus {
    border-color: var(--color-primary);
}

.acct-modal__actions {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: flex-end;
}

.acct-modal__error {
    font-size: 0.875rem;
    color: #ef4444;
    margin: var(--spacing-sm) 0 0;
    text-align: right;
}

/* ── Mobile tabs ── */
.acct-tabs {
    display: none;
}

@media (max-width: 899px) {
    .acct-tabs {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 0;
    }

    .acct-tab {
        flex: 1;
        padding: 0.5rem 0.75rem;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        color: var(--color-text-muted);
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.15s, color 0.15s, border-color 0.15s;
    }

    .acct-tab--active {
        background: var(--color-primary-dim);
        border-color: var(--color-primary);
        color: var(--color-primary);
    }
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .acct-grid {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xl);
        margin-top: var(--spacing-xl);
    }

    .acct-col {
        display: contents;
    }

    .acct-card {
        width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 640px) {
    .acct-hero__inner {
        gap: var(--spacing-md);
    }

    .acct-card,
    .acct-hero__inner {
        padding: var(--spacing-md);
    }

    .acct-danger-row {
        flex-direction: column;
    }

    .acct-form-footer {
        flex-wrap: wrap;
    }

    .acct-modal__actions {
        flex-direction: column-reverse;
    }

    .acct-modal__actions .acct-btn {
        width: 100%;
    }

    .acct-signout-btn {
        width: 100%;
        margin-top: var(--spacing-xs);
        padding-top: var(--spacing-sm);
        border-top: 1px solid var(--color-border);
        text-align: left;
    }
}

/* ── Push notification toggle (my-account.php) ─────────────────────────── */

.push-toggle-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: var(--spacing-lg);
}

.push-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.2rem;
    background: var(--color-primary-dim);
    border: 1px solid var(--color-primary);
    border-radius: 6px;
    color: var(--color-primary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    align-self: flex-start;
}

.push-toggle-btn::before {
    content: '🔔';
    font-size: 1rem;
}

.push-toggle-btn:hover {
    background: rgba(46, 124, 246, 0.25);
}

.push-toggle-btn--active {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.4);
    color: #ef4444;
}

.push-toggle-btn--active:hover {
    background: rgba(239, 68, 68, 0.2);
}

.push-toggle-status {
    font-size: 0.8rem;
    color: var(--color-text-muted, rgba(240, 242, 247, 0.5));
    margin: 0;
    min-height: 1.2em;
}

/* =========================================================
   Account — public watchlist toggle
   ========================================================= */

.acct-toggle-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.acct-toggle {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
    user-select: none;
}

.acct-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.acct-toggle__track {
    position: relative;
    width: 36px;
    height: 20px;
    background: var(--color-surface-3);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    transition: background 0.2s, border-color 0.2s;
    flex-shrink: 0;
}

.acct-toggle input:checked + .acct-toggle__track {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.acct-toggle__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}

.acct-toggle input:checked + .acct-toggle__track .acct-toggle__thumb {
    transform: translateX(16px);
}

.acct-toggle__label {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.acct-privacy-rows {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.acct-privacy-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--color-border);
}

.acct-privacy-row:last-child {
    border-bottom: none;
}

.acct-privacy-row__info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.acct-privacy-row__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
}

.acct-privacy-row__desc {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.acct-privacy-row__control {
    position: relative;
    flex-shrink: 0;
}

.acct-privacy-row__control .acct-save-status {
    position: absolute;
    right: 0;
    top: calc(100% + 2px);
    font-size: 0.7rem;
    white-space: nowrap;
}

/* ── My Account — pick record card ── */

.acct-record {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.acct-record__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
}

.acct-record__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 3rem;
}

.acct-record__num {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-text);
}

.acct-record__num--win  { color: var(--color-win); }
.acct-record__num--loss { color: var(--color-loss); }

.acct-record__stat .acct-record__label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
    margin-top: 0.15rem;
}

.acct-record__tier {
    display: flex;
    align-items: center;
}

.acct-record__hint {
    font-size: 0.8rem;
    color: var(--color-muted);
    margin: 0;
}

/* ── Tier progress ── */
.acct-tier-progress {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.acct-tier-progress__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: var(--color-muted);
}

.acct-tier-progress__pct {
    font-weight: 600;
    color: var(--color-text);
}

.acct-tier-progress__bar {
    height: 5px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.acct-tier-progress__fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: 3px;
    transition: width 0.4s ease;
}

.acct-tier-progress__reqs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.78rem;
    color: var(--color-muted);
}

.acct-tier-progress__reqs .req--met {
    color: var(--color-win);
}

/* ── Sport breakdown ── */
.acct-sport-breakdown {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 0.75rem;
}

.acct-sport-breakdown__toggle {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-muted);
    cursor: pointer;
    list-style: none;
    user-select: none;
    padding: 0.25rem 0;
}

.acct-sport-breakdown__toggle::-webkit-details-marker { display: none; }

.acct-sport-breakdown[open] .acct-sport-breakdown__toggle {
    color: var(--color-text);
}

.acct-sport-breakdown__toggle::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 0.3rem;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.2s;
    transform: rotate(0deg);
}

.acct-sport-breakdown[open] .acct-sport-breakdown__toggle::after {
    transform: rotate(180deg);
}

.acct-sport-breakdown__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    margin-top: 0.5rem;
}

.acct-sport-breakdown__table th {
    text-align: left;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
    padding: 0.25rem 0.5rem 0.35rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.acct-sport-breakdown__table td {
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--color-text);
}

.acct-sport-breakdown__table .sport-w { color: var(--color-win); font-weight: 600; }
.acct-sport-breakdown__table .sport-l { color: var(--color-loss); font-weight: 600; }
.acct-sport-breakdown__table .sport-roi--pos { color: var(--color-win); }
.acct-sport-breakdown__table .sport-roi--neg { color: var(--color-loss); }

/* ── Watchlist tabs ── */
.wl-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 1.5rem;
}

.wl-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-muted);
    cursor: pointer;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}

.wl-tab:hover { color: var(--color-text); }

.wl-tab--active {
    color: var(--color-text);
    border-bottom-color: var(--color-primary);
}

/* ── History table ── */
.wl-history-wrap { overflow-x: auto; }

.wl-history-table .wl-hist-sport  { width: 4rem; font-size: 0.75rem; color: var(--color-muted); }
.wl-history-table .wl-hist-odds   { text-align: right; font-variant-numeric: tabular-nums; }
.wl-history-table .wl-hist-actual { text-align: right; font-variant-numeric: tabular-nums; }
.wl-history-table .wl-hist-date   { white-space: nowrap; font-size: 0.78rem; color: var(--color-muted); }
.wl-history-table .wl-hist-result { white-space: nowrap; }
.wl-history-table .wl-hist-clv    { white-space: nowrap; font-size: 0.78rem; }

.wl-history-footer {
    text-align: center;
    margin-top: 1.5rem;
}

.wl-history-end {
    font-size: 0.8rem;
    color: var(--color-muted);
    text-align: center;
    margin: 1rem 0;
}

/* ── Pick record breakdown ───────────────────────────────── */
.wl-breakdown {
    margin-bottom: 2.5rem;
}

.wl-breakdown__title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-muted);
    margin: 0 0 1rem;
}

.wl-breakdown__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1rem;
}

.wl-breakdown__card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.25rem 1rem;
    overflow: hidden;
    min-width: 0;
}

.wl-breakdown__card-label {
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text);
    text-align: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.wl-breakdown-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
}

.wl-breakdown-table thead th,
.wl-breakdown-table tbody td {
    padding: 0.5rem 0.75rem;
    text-align: right;
    white-space: nowrap;
    width: 1%;
}

.wl-breakdown-table thead th {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
    padding-top: 0;
    padding-bottom: 0.5rem;
}

.wl-breakdown-table thead th:first-child,
.wl-breakdown-table tbody td:first-child {
    text-align: left;
    padding-left: 0;
    width: auto;
}

.wl-breakdown-table thead th:last-child,
.wl-breakdown-table tbody td:last-child {
    padding-right: 0;
}

.wl-breakdown-table tbody tr + tr td {
    border-top: 1px solid var(--color-border);
}

.wl-breakdown-table td {
    font-variant-numeric: tabular-nums;
}

.wl-breakdown-label {
    text-align: left !important;
    font-weight: 500;
    color: var(--color-text);
    padding-right: 1rem !important;
    white-space: normal;
    width: auto !important;
    word-break: break-word;
}

.wl-breakdown-record { color: var(--color-text-muted); }

.wl-breakdown-pos { color: var(--color-win);  font-weight: 600; }
.wl-breakdown-neg { color: var(--color-loss); font-weight: 600; }

/* =========================================================
   Community page
   ========================================================= */

.community-page {
    padding-bottom: 4rem;
}

.community-header {
    padding-top: 2.5rem;
    padding-bottom: 1.5rem;
}

.community-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
    color: var(--color-text);
}

.community-subtitle {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    margin: 0;
}

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

.community-tab-btn {
    background: none;
    border: none;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}

.community-tab-btn.is-active {
    color: var(--color-text);
    border-bottom-color: var(--color-primary);
}

.community-panel { display: none; }
.community-panel.is-active { display: block; }

.community-loading {
    color: var(--color-text-dim);
    font-size: 0.875rem;
    animation: pulse 1.4s ease-in-out infinite;
}

/* ── Profile collections ── */

.profile-collections {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.profile-collection {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: 0.5rem;
    overflow: hidden;
}

.profile-collection__header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    background: var(--color-surface-2);
    cursor: pointer;
    color: inherit;
    font-size: 0.875rem;
    transition: background 0.1s;
    user-select: none;
}

.profile-collection__header:hover { background: var(--color-surface-3, var(--color-surface-2)); }

.profile-collection__name {
    font-weight: 600;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-collection__count {
    font-size: 0.75rem;
    color: var(--color-text-dim);
    flex-shrink: 0;
}

.profile-collection__share {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0.2rem 0.35rem;
    color: var(--color-text-dim);
    cursor: pointer;
    border-radius: var(--radius);
    font-size: 0.7rem;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}

.profile-collection__share:hover {
    color: var(--color-text);
    background: var(--color-surface-3);
}

.profile-collection__chevron {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.2s;
}

.profile-collection__header[aria-expanded="true"] .profile-collection__chevron {
    transform: rotate(180deg);
}

.profile-collection__legs {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
    border-top: 1px solid var(--color-border);
}

.profile-collection__leg {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.85rem;
    font-size: 0.8125rem;
    border-bottom: 1px solid var(--color-border);
}

.profile-collection__leg:last-child { border-bottom: none; }

.profile-collection__leg-player {
    font-weight: 600;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-collection__leg-line {
    color: var(--color-text-dim);
    font-size: 0.775rem;
    flex-shrink: 0;
}

.profile-collection__leg-odds {
    font-weight: 600;
    font-size: 0.8rem;
    flex-shrink: 0;
    min-width: 3rem;
    text-align: right;
}

.community-empty {
    padding: 2rem 0;
    color: var(--color-text-muted);
    font-size: 0.9375rem;
}

.community-empty p { margin: 0 0 0.5rem; }

.community-inline-tab-btn {
    background: none;
    border: none;
    color: var(--color-primary);
    cursor: pointer;
    padding: 0;
    font-size: inherit;
    text-decoration: underline;
}

.community-gate {
    padding: 2rem 0;
    color: var(--color-text-muted);
}

.community-load-more[hidden] { display: none; }
.community-load-more {
    display: block;
    margin: 1.5rem auto 0;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: var(--color-text-muted);
    padding: 0.5rem 1.5rem;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 0.875rem;
    transition: border-color 0.15s, color 0.15s;
}

.community-load-more:hover {
    border-color: var(--color-primary);
    color: var(--color-text);
}

/* ── Feed items ── */

.feed-item {
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--color-border);
}

.feed-item:last-child { border-bottom: none; }

.feed-item__user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}

.feed-item__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
}

.feed-item__time {
    font-size: 0.75rem;
    color: var(--color-text-dim);
    margin-left: auto;
}

.feed-item__prop {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem 0.625rem;
    font-size: 0.875rem;
    padding-left: 2rem;
}

.feed-item__player {
    font-weight: 600;
    color: var(--color-text);
}

.feed-item__market { color: var(--color-text-muted); }
.feed-item__line   { color: var(--color-text); }

.feed-item__odds {
    font-weight: 600;
    color: var(--color-primary);
}

.feed-item__book {
    font-size: 0.75rem;
    color: var(--color-text-dim);
}

.feed-item__save-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.feed-item__save-btn svg {
    transition: fill 0.2s, color 0.2s;
}

.feed-item__save-btn:hover:not(:disabled) {
    background: rgba(251, 113, 133, 0.12);
    border-color: rgba(251, 113, 133, 0.5);
    color: #fb7185;
}

.feed-item__save-btn.is-saved {
    background: rgba(251, 113, 133, 0.12);
    border-color: rgba(251, 113, 133, 0.5);
    color: #fb7185;
}

.feed-item__save-btn--pop svg {
    animation: wl-heart-pop 0.35s ease-out forwards;
}

.feed-item__matchup {
    font-size: 0.75rem;
    color: var(--color-text-dim);
    padding-left: 2rem;
    margin-top: 0.125rem;
}

/* ── Discover cards ── */

.discover-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--color-border);
    gap: 1rem;
}

.discover-card:last-child { border-bottom: none; }

.discover-card__left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.discover-card__info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.discover-card__name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
}

.discover-card__meta {
    font-size: 0.75rem;
    color: var(--color-text-dim);
}

.discover-card__recent {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.discover-card__follow-btn {
    flex-shrink: 0;
    padding: 0.375rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: var(--radius);
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.discover-card__follow-btn:hover:not(:disabled) {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: transparent;
}

.discover-card__follow-btn.is-following {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #fff;
}

.discover-card__follow-btn.is-following:hover:not(:disabled) {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #fff;
}

/* ── Profile header ── */

.acct-following-search {
    margin-bottom: 0.75rem;
}

.acct-following-search__input {
    width: 100%;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: 0.875rem;
    padding: 0.4rem 0.75rem;
    outline: none;
    transition: border-color 0.15s;
}

.acct-following-search__input:focus { border-color: var(--color-primary); }
.acct-following-search__input::placeholder { color: var(--color-text-dim); }

.acct-following-toggle {
    margin-top: 0.625rem;
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

.acct-following-toggle:hover { color: var(--color-text); }

.acct-following-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
    gap: 1rem;
}

.acct-following-row:last-child { border-bottom: none; }

.acct-following-row__name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
}

.acct-following-row__name:hover {
    color: var(--color-text);
    text-decoration: underline;
}

.acct-muted a {
    color: var(--color-text-muted);
    text-decoration: underline;
}

.acct-muted a:hover {
    color: var(--color-text);
}

.acct-btn--sm {
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
}

.community-back {
    display: inline-block;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    text-decoration: none;
    margin-bottom: 0.75rem;
    transition: color 0.15s;
}

.community-back:hover { color: var(--color-text); }

.community-profile-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.community-profile-header .community-title { margin: 0 0 0.25rem; }

/* ── Pick record badge ── */

.pick-record {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.pick-record__stat {
    font-variant-numeric: tabular-nums;
}

.pick-record__rate {
    font-weight: 600;
    color: var(--color-text);
}

.pick-record__tier {
    display: inline-block;
    padding: 0.1em 0.5em;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pick-record__tier--sharp    { background: rgba(250,204,21,0.15); color: #facc15; }
.pick-record__tier--solid    { background: var(--color-win-dim);  color: var(--color-win); }
.pick-record__tier--trending { background: rgba(59,130,246,0.12); color: #60a5fa; }
.pick-record__tier--rookie   { background: rgba(148,163,184,0.1); color: #94a3b8; }

/* Profile page — pick record sits below the name */
#profile-pick-record { margin-bottom: 0.5rem; }
#profile-pick-record .pick-record { font-size: 0.85rem; }
#profile-pick-record .pick-record__tier { font-size: 0.75rem; }

/* Feed — chip sits between name and timestamp, doesn't grow */
.feed-item__user .pick-record { flex-shrink: 0; }

/* ── Search ── */

.community-search {
    margin-bottom: 1rem;
}

.community-search__input {
    width: 100%;
    max-width: 320px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 0.65rem center var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: 0.875rem;
    padding: 0.5rem 0.85rem 0.5rem 2.1rem;
    outline: none;
    transition: border-color 0.15s;
}

.community-search__input:focus {
    border-color: var(--color-primary);
}

.community-search__input::placeholder {
    color: var(--color-text-dim);
}

/* ── Discover card — left side as link ── */

.discover-card__left {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.15s;
}

.discover-card__left:hover { opacity: 0.8; }

/* ── Feed item — user link ── */

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

.feed-item__user-link:hover .feed-item__name {
    text-decoration: underline;
}

/* ── Leaderboard ── */

.leaderboard-header {
    display: grid;
    grid-template-columns: 2rem 1fr auto auto auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.4rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-dim);
    border-bottom: 1px solid var(--color-border);
}

.leaderboard-rows {
    display: flex;
    flex-direction: column;
}

.leaderboard-row {
    display: grid;
    grid-template-columns: 2rem 1fr auto auto auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    transition: background 0.1s;
    text-decoration: none;
    color: inherit;
}

.leaderboard-row:last-child { border-bottom: none; }

.leaderboard-row:hover { background: var(--color-surface-2); }

.leaderboard-row--gold   { background: rgba(250,204,21,0.06); }
.leaderboard-row--silver { background: rgba(148,163,184,0.06); }
.leaderboard-row--bronze { background: rgba(194,120,66,0.06); }

.leaderboard-row__rank {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-dim);
    text-align: center;
}

.leaderboard-row--gold   .leaderboard-row__rank { color: #facc15; }
.leaderboard-row--silver .leaderboard-row__rank { color: #94a3b8; }
.leaderboard-row--bronze .leaderboard-row__rank { color: #c27842; }

.leaderboard-row__user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.leaderboard-row__name {
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leaderboard-row__record {
    font-size: 0.8rem;
    color: var(--color-text-dim);
    white-space: nowrap;
}

.leaderboard-row__rate {
    font-size: 0.875rem;
    font-weight: 700;
    white-space: nowrap;
    min-width: 3.5rem;
    text-align: right;
}

.leaderboard-note {
    font-size: 0.75rem;
    color: var(--color-text-dim);
    text-align: center;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--color-border);
}

/* ── Shared avatar ── */

.community-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-primary-dim);
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.community-avatar--lg {
    width: 52px;
    height: 52px;
    font-size: 1.25rem;
}

/* =========================================================
   Blog — archive + single
   ========================================================= */

/* Archive */
.blog-archive {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--spacing-2xl) 0;
}

.blog-archive__header {
    margin-bottom: var(--spacing-2xl);
}

.blog-archive__title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 var(--spacing-sm);
}

.blog-archive__desc {
    color: var(--color-text-muted);
    margin: 0;
}

.blog-archive__empty {
    color: var(--color-text-muted);
}

.blog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.blog-filter-btn {
    padding: 0.35rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid var(--color-border);
    border-radius: 2rem;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.blog-filter-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.blog-filter-btn.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.blog-archive__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.blog-card {
    overflow: hidden;
    transition: transform 0.15s ease;
    display: flex;
    flex-direction: column;
}
.blog-card[hidden] { display: none; }

.blog-card:hover {
    transform: translateY(-2px);
}

.blog-card__thumb {
    display: block;
    overflow: hidden;
    height: 190px;
    flex-shrink: 0;
}

.blog-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.blog-card:hover .blog-card__thumb img {
    transform: scale(1.03);
}

.blog-card__link {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none;
    color: inherit;
}

.blog-card__link:hover {
    color: inherit;
}

.blog-card__body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog-card__cat {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-primary);
    margin-bottom: 0.4rem;
}

.blog-card__meta {
    font-size: 0.75rem;
    color: var(--color-text-dim);
    margin: 0 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.blog-card__title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.6rem;
    line-height: 1.35;
}


.blog-card__excerpt {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    flex: 1;
    margin-bottom: 1rem;
}

.blog-card__excerpt p { margin: 0; }

.blog-card__read-more {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-primary);
    align-self: flex-start;
}

.blog-card__arrow {
    display: inline-block;
    transition: transform 0.2s ease;
}

.blog-card__link:hover .blog-card__arrow {
    transform: translateX(4px);
}

/* Pagination */
.blog-pagination {
    margin-top: var(--spacing-2xl);
}

.blog-pagination .nav-links {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.blog-pagination .page-numbers {
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--color-text-muted);
    text-decoration: none;
    border: 1px solid var(--color-border);
    transition: border-color 0.15s ease, color 0.15s ease;
}

.blog-pagination .page-numbers:hover,
.blog-pagination .page-numbers.current {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Single post */
.blog-post {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing-2xl) 0;
}

.blog-post__header {
    margin-bottom: var(--spacing-2xl);
}

.blog-post__meta {
    font-size: 0.8rem;
    color: var(--color-text-dim);
    margin: 0 0 var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.blog-post__meta-sep {
    opacity: 0.4;
}

.blog-post__title {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 var(--spacing-lg);
}

.blog-post__thumb {
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-top: var(--spacing-lg);
}

.blog-post__thumb img {
    width: 100%;
    height: auto;
    display: block;
}

/* Post content typography */
.blog-post__content {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--color-text);
}

.blog-post__content h2,
.blog-post__content h3,
.blog-post__content h4 {
    margin: var(--spacing-2xl) 0 var(--spacing-md);
    line-height: 1.3;
}

.blog-post__content h2 { font-size: 1.5rem; }
.blog-post__content h3 { font-size: 1.2rem; }
.blog-post__content h4 { font-size: 1rem; font-weight: 700; }

.blog-post__content p {
    margin: 0 0 var(--spacing-lg);
}

.blog-post__content ul,
.blog-post__content ol {
    margin: 0 0 var(--spacing-lg);
    padding-left: var(--spacing-xl);
}

.blog-post__content li {
    margin-bottom: var(--spacing-sm);
}

.blog-post__content a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.blog-post__content a:hover {
    color: var(--color-accent);
}

.blog-post__content blockquote {
    border-left: 3px solid var(--color-primary);
    margin: var(--spacing-xl) 0;
    padding: var(--spacing-sm) var(--spacing-lg);
    color: var(--color-text-muted);
    font-style: italic;
}

.blog-post__content code {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.1em 0.4em;
    font-size: 0.875em;
}

.blog-post__content pre {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    overflow-x: auto;
    margin: 0 0 var(--spacing-lg);
}

.blog-post__content pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.875rem;
}

.blog-post__content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin: var(--spacing-lg) 0;
}

.blog-post__footer {
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--color-border);
}

.blog-post__back {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

.blog-post__back:hover {
    color: var(--color-text);
}

/* Blog responsive */
@media (max-width: 1023px) {
    .blog-archive__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .blog-archive__grid {
        grid-template-columns: 1fr;
    }
    .blog-post__title {
        font-size: 1.5rem;
    }
}

/* =========================================================
   Prop Score — modal confidence block
   ========================================================= */

#odds-prop-score {
    margin-bottom: var(--spacing-md);
}

.prop-score {
    position: relative;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
}

.prop-score__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    color: var(--color-text);
}

.prop-score__toggle:hover {
    background: var(--color-surface-3);
    border-radius: var(--radius-md);
}

.prop-score__toggle[aria-expanded="true"]:hover {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.prop-score__label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}

.prop-score__score-group {
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin-left: auto;
}

.prop-score__value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.prop-score__denom {
    font-size: 0.8rem;
    color: var(--color-text-dim);
}

.prop-score__chevron {
    font-size: 0.7rem;
    color: var(--color-text-dim);
    transition: transform 0.2s ease;
    margin-left: var(--spacing-xs);
}

.prop-score__details {
    padding: 0 var(--spacing-lg) var(--spacing-md);
}

.prop-score__signals {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.prop-score__signal {
    display: grid;
    grid-template-columns: 90px 1fr;
    grid-template-rows: auto auto;
    gap: 2px var(--spacing-sm);
    align-items: center;
}

.prop-score__signal-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.prop-score__signal-display {
    font-size: 0.75rem;
    color: var(--color-text-dim);
    text-align: right;
}

.prop-score__pips {
    grid-column: 1 / -1;
    display: flex;
    gap: 3px;
}

.prop-score__pip {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--color-surface-3);
}

.prop-score__pip--on {
    background: var(--color-primary);
}

.prop-score__missing {
    margin: var(--spacing-sm) 0 0;
    font-size: 0.7rem;
    color: var(--color-text-dim);
    font-style: italic;
}

/* Skeleton loading state */
@keyframes prop-score-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

.prop-score--loading .prop-score__toggle {
    cursor: default;
    pointer-events: none;
}

.prop-score__skeleton-bar {
    display: inline-block;
    width: 56px;
    height: 1.1rem;
    border-radius: var(--radius);
    background: linear-gradient(
        90deg,
        var(--color-bg-3) 25%,
        var(--color-bg-2) 50%,
        var(--color-bg-3) 75%
    );
    background-size: 200% 100%;
    animation: prop-score-shimmer 1.4s ease infinite;
    vertical-align: middle;
}

/* Header row */
.prop-score__header {
    display: flex;
    align-items: center;
}

.prop-score__header .prop-score__toggle {
    flex: 1;
}


.prop-score__info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: none;
    border: 1px solid var(--color-text-dim);
    color: var(--color-text-dim);
    font-size: 0.6rem;
    font-style: normal;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.15s, border-color 0.15s;
}

.prop-score__info-btn:hover {
    color: var(--color-text);
    border-color: var(--color-text);
}

/* Popover overlays the whole .prop-score container */
.prop-score__info-popover {
    position: absolute;
    inset: 0;
    z-index: 200;
    flex-direction: column;
    background: var(--color-surface-3);
    border: 1px solid var(--color-border-hover);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
    overflow-y: auto;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.prop-score__info-popover:not([hidden]) {
    display: flex;
}

.prop-score__info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 var(--spacing-sm);
}

.prop-score__info-title {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text);
    margin: 0;
}

.prop-score__info-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    background: none;
    border: none;
    color: var(--color-text-dim);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s;
    flex-shrink: 0;
}

.prop-score__info-close:hover {
    color: var(--color-text);
}

.prop-score__info-list {
    flex: 1;
    margin: 0 0 var(--spacing-sm);
    padding: 0 0 0 var(--spacing-md);
    font-size: 0.72rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

.prop-score__info-list li {
    margin-bottom: 2px;
}

.prop-score__info-list strong {
    color: var(--color-text-muted);
}

.prop-score__info-disclaimer {
    margin: 0;
    font-size: 0.64rem;
    color: var(--color-text-dim);
    line-height: 1.4;
    border-top: 1px solid var(--color-border);
    padding-top: var(--spacing-sm);
    font-style: italic;
}

/* =========================================================
   WooCommerce Blocks checkout — dark mode
   ========================================================= */
.wc-block-checkout__main input[type="text"],
.wc-block-checkout__main input[type="email"],
.wc-block-checkout__main input[type="tel"],
.wc-block-checkout__main input[type="number"],
.wc-block-checkout__main input[type="password"],
.wc-block-checkout__main select,
.wc-block-checkout__main textarea,
.wc-block-components-text-input input,
.wc-block-components-select select,
.wc-block-components-select__container select {
    background: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.wc-block-checkout__main input::placeholder,
.wc-block-components-text-input input::placeholder {
    color: var(--color-muted) !important;
}

.wc-block-checkout__main input:focus,
.wc-block-checkout__main select:focus,
.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus {
    border-color: var(--color-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px var(--color-primary-dim) !important;
}

.wc-block-components-text-input label,
.wc-block-components-select label,
.wc-block-checkout__main label {
    color: var(--color-muted) !important;
}

/* Order summary, headings, body text */
.wc-block-checkout,
.wp-block-woocommerce-checkout {
    color: var(--color-text) !important;
}


.wc-block-checkout__sidebar,
.wc-block-components-order-summary {
    background: transparent !important;
    border: none !important;
}

.wp-block-woocommerce-checkout-order-summary-block {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.wp-block-woocommerce-checkout-order-summary-block > * {
    padding-left: var(--spacing-lg) !important;
    padding-right: var(--spacing-lg) !important;
}

.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title {
    border-top: none !important;
    border-bottom: none !important;
}

@container (max-width: 699px) {
    .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title {
        margin-top: 0 !important;
    }
}

.wc-block-components-checkout-order-summary__content.is-open {
    border-bottom: none !important;
}

/* Password strength indicator — dark themed */
.woocommerce-password-strength {
    border-radius: var(--radius) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: var(--color-text) !important;
    text-align: center !important;
    padding: 0.35rem 0.75rem !important;
}

.woocommerce-password-strength.short {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: #f87171 !important;
}

.woocommerce-password-strength.bad {
    background: rgba(249, 115, 22, 0.15) !important;
    border-color: rgba(249, 115, 22, 0.4) !important;
    color: #fb923c !important;
}

.woocommerce-password-strength.good {
    background: rgba(234, 179, 8, 0.15) !important;
    border-color: rgba(234, 179, 8, 0.4) !important;
    color: #facc15 !important;
}

.woocommerce-password-strength.strong {
    background: rgba(34, 197, 94, 0.15) !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
    color: #4ade80 !important;
}

/* Checkout error/warning notices — dark themed */
.wc-block-components-validation-error,
.wc-block-store-notice,
.wc-block-store-notice.is-error,
.wc-block-components-notice-banner,
.wc-block-components-notice-banner.is-error {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: var(--color-text) !important;
    border-radius: var(--radius) !important;
}

.wc-block-components-notice-banner__content,
.wc-block-store-notice__dismiss-link,
.wc-block-components-notice-banner p {
    color: var(--color-text) !important;
}

/* Checkbox */
.wc-block-components-checkbox input[type="checkbox"] {
    accent-color: var(--color-accent, #2e7cf6);
}

.wc-block-checkout a:hover,
.wc-block-components-checkout-step a:hover {
    color: var(--color-primary) !important;
    text-decoration: underline !important;
}

/* Free trial label on checkout */
.wc-block-components-product-details__free-trial {
    font-weight: 700 !important;
}

/* Cart item quantity badge — white text on dark circle */
.wc-block-components-order-summary-item__quantity {
    background-color: var(--color-surface-3) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border) !important;
}

/* =========================================================
   WooCommerce Order Confirmation (thank you page)
   ========================================================= */

.woocommerce-order {
    max-width: 680px;
    margin: 0 auto;
    padding: 2rem 0;
}

/* "Thank you. Your order has been received." */
.woocommerce-thankyou-order-received {
    font-size: 1rem;
    color: rgba(240, 242, 247, 0.6);
    margin-bottom: 2rem;
}

/* Order meta row (number, date, email, payment) */
.woocommerce-order-overview.woocommerce-thankyou-order-details {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    list-style: none;
    padding: 1.25rem 1.5rem;
    margin: 0 0 2rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.woocommerce-order-overview li {
    font-size: 0.8rem;
    color: rgba(240, 242, 247, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.woocommerce-order-overview li strong {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    text-transform: none;
    letter-spacing: 0;
    margin-top: 0.2rem;
}

/* Section headings */
.woocommerce-order h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 2rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}

/* Order details table */
.woocommerce-table--order-details {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
    padding: 0.85rem 1.25rem;
    font-size: 0.9rem;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}

.woocommerce-table--order-details thead th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(240, 242, 247, 0.45);
    background: transparent;
}

.woocommerce-table--order-details tfoot tr:last-child td,
.woocommerce-table--order-details tfoot tr:last-child th {
    border-bottom: none;
    font-weight: 700;
}

.woocommerce-table--order-details a {
    color: var(--color-primary);
}

/* Related subscriptions table */
.woocommerce-orders-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.woocommerce-orders-table th,
.woocommerce-orders-table td {
    padding: 0.85rem 1.25rem;
    font-size: 0.9rem;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}

.woocommerce-orders-table thead th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(240, 242, 247, 0.45);
    background: transparent;
}

.woocommerce-orders-table tr:last-child td {
    border-bottom: none;
}

.woocommerce-orders-table .button,
.woocommerce-orders-table .woocommerce-button {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.15s;
}

.woocommerce-orders-table .button:hover {
    opacity: 0.85;
    color: #fff;
}

/* Active subscription status badge */
.woocommerce-orders-table .order-status {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #22c55e;
}

/* "View the status of your subscription" notice */
.woocommerce-order p {
    color: rgba(240, 242, 247, 0.6);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.woocommerce-order p a {
    color: var(--color-primary);
}

/* =========================================================
   WooCommerce Shop / Product Archive
   ========================================================= */

/* Strip the nested card wrappers from page.php */
.shop-archive {
    max-width: 700px;
    margin: 0 auto;
    padding: 3rem var(--container-pad);
}

.shop-archive .woocommerce-notices-wrapper,
.shop-archive > .woocommerce {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Hide sort and result count */
.woocommerce-ordering,
.woocommerce-result-count {
    display: none !important;
}

/* Page title */
.shop-archive h1.page-title,
.shop-archive .woocommerce-products-header__title {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: 2rem;
}

/* Two-column grid on tablet+ */
ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.5rem !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
    width: 100% !important;
}

ul.products::before,
ul.products::after {
    display: none !important;
}

ul.products li.product {
    clear: none !important;
}

@media (max-width: 640px) {
    ul.products {
        grid-template-columns: 1fr !important;
    }
}

ul.products li.product {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex !important;
    flex-direction: column !important;
    transition: border-color 0.15s;
    margin: 0 !important;
    float: none !important;
    width: auto !important;
}

ul.products li.product:hover {
    border-color: var(--color-primary);
}

ul.products li.product a img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    border-bottom: 1px solid var(--color-border);
}

ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text) !important;
    padding: 1.1rem 1.5rem 0.35rem !important;
    margin: 0 !important;
}

ul.products li.product a {
    text-decoration: none;
    color: var(--color-text);
}

ul.products li.product .price {
    display: block;
    font-size: 0.875rem;
    color: #f0f2f7 !important;
    padding: 0 1.5rem 1rem;
    margin: 0;
}

ul.products li.product .price span,
ul.products li.product .price bdi {
    display: inline !important;
    color: #f0f2f7 !important;
}

ul.products li.product .price ins {
    text-decoration: none;
}

ul.products li.product .button,
ul.products li.product .add_to_cart_button {
    display: block !important;
    margin: auto 1.5rem 1.5rem !important;
    padding: 0.65rem 1rem !important;
    background: var(--color-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: opacity 0.15s !important;
}

ul.products li.product .button:hover {
    opacity: 0.85 !important;
    color: #fff !important;
}