/*
Theme Name: OddsForge
Theme URI: https://oddsforge.com
Author: OddsForge
Author URI: https://oddsforge.com
Description: OddsForge sportsbook affiliate, AI predictions and odds comparison theme.
Version: 5.1.0
License: GPL-2.0-or-later
Text Domain: oddsforge
*/

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

@font-face {
    font-family: 'OddsForge Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/roboto.woff2') format('woff2');
}
@font-face {
    font-family: 'OddsForge Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('assets/fonts/roboto.woff2') format('woff2');
}
@font-face {
    font-family: 'OddsForge Display';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('assets/fonts/montserrat.woff2') format('woff2');
}

:root {
    /* === Purple Primary (Cloudbet-inspired dark palette) === */
    --of-gold-50: #1a161d;
    --of-gold-100: #211c25;
    --of-gold-300: #cca6ff;
    --of-gold-400: #a78bfa;
    --of-gold-500: #8346d4;
    --of-gold-600: #8346d4;
    --of-gold-700: #7c3aed;
    --of-gold-800: #6d28d9;
    --of-gold-900: #5b21b6;

    /* === Purple alias === */
    --of-purple-600: #8346d4;

    /* === Lime-Green CTA (Cloudbet signature) === */
    --of-cyan-400: #e4ff5a;
    --of-cyan-500: #dffd51;
    --of-cyan-600: #c8e447;

    /* === Dark Backgrounds === */
    --of-dark: #141114;
    --of-dark-raised: #1a161d;
    --of-panel: #211c25;
    --of-panel-2: #26202b;
    --of-panel-3: #2c2532;

    /* === Backward-compatible aliases === */
    --of-primary: #dffd51;
    --of-primary-light: #e4ff5a;
    --of-blue: #8346d4;
    --of-cyan: #dffd51;
    --of-yellow: #dffd51;
    --of-gold: #8346d4;

    /* === Text (light on dark) === */
    --of-text: #ffffff;
    --of-text-primary: #ffffff;
    --of-text-secondary: #a6a6a6;
    --of-muted: #a6a6a6;

    /* === Semantic === */
    --of-danger: #EF4444;
    --of-success: #6bc98c;

    /* === Borders (dark, subtle) === */
    --of-border: #2c2532;
    --of-border-subtle: #211c25;
    --of-border-gold: rgba(131,70,212,0.2);
    --of-border-gold-strong: rgba(131,70,212,0.45);

    /* === Radius === */
    --of-radius-card: 12px;
    --of-radius-pill: 9999px;
    --of-radius-btn: 9999px;
    --of-radius-lg: 16px;

    /* === Shadows (dark theme - subtle glows) === */
    --of-shadow-card: 0 1px 3px rgba(0,0,0,0.3);
    --of-shadow-card-hover: 0 4px 12px rgba(0,0,0,0.4);
    --of-shadow-cta: 0 2px 12px rgba(223,253,81,0.15);
    --of-shadow-glow-gold: 0 0 15px rgba(131,70,212,0.15);
    --of-shadow-glow-cyan: 0 0 15px rgba(223,253,81,0.1);

    /* === Gradients === */
    --of-gradient-cta: linear-gradient(135deg, #e4ff5a 0%, #dffd51 50%, #c8e447 100%);
    --of-gradient-cta-hover: linear-gradient(135deg, #f0ff8a 0%, #e4ff5a 50%, #dffd51 100%);
    --of-gradient-surface: linear-gradient(180deg, #141114 0%, #1a161d 100%);
    --of-gradient-gold-border: linear-gradient(135deg, #cca6ff, #8346d4, #6d28d9, #8346d4, #cca6ff);
    --of-gradient-card: #211c25;
    --of-gradient-hero-mesh: none;

    /* === Glass Morphism (dark) === */
    --of-glass-bg: rgba(20,17,20,0.92);
    --of-glass-border: rgba(255,255,255,0.06);
    --of-glass-blur: 16px;

    /* === Odds === */
    --of-odds-bg: #26202b;
    --of-odds-highlight: rgba(223,253,81,0.1);

    /* === Card system === */
    --of-card-bg: #211c25;
    --of-card-border: var(--of-border);
    --of-card-hover-glow: 0 0 20px rgba(131,70,212,0.1);
    --of-accent-glow: 0 0 12px rgba(131,70,212,0.2);
    --of-success-glow: 0 0 12px rgba(107,201,140,0.15);
    --of-input-focus: rgba(131,70,212,0.5);
}

/* === Premium Keyframes === */
@keyframes of-glow-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}
@keyframes of-gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes of-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes of-card-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ========================================================================
   APP SHELL — 3-column grid (Cloudbet-style web-app layout)
   ======================================================================== */
:root {
    --of-sidebar-left-w: 60px;
    --of-sidebar-right-w: 280px;
    --of-topbar-h: 50px;
}

.of-app-shell {
    display: grid;
    grid-template-columns: var(--of-sidebar-left-w) 1fr var(--of-sidebar-right-w);
    min-height: 100vh;
    transition: grid-template-columns 0.2s ease;
    max-width: 100%;
    overflow-x: hidden;
}
.of-app-main {
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* ===== LEFT SIDEBAR ===== */
.of-sidebar-left {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--of-dark-raised);
    border-right: 1px solid var(--of-border);
    z-index: 20;
    width: var(--of-sidebar-left-w);
    transition: width 0.22s cubic-bezier(.4,0,.2,1);
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: var(--of-border) transparent;
}
.of-sidebar-left::-webkit-scrollbar { width: 4px; }
.of-sidebar-left::-webkit-scrollbar-thumb { background: var(--of-border); border-radius: 4px; }
.of-sidebar-left::-webkit-scrollbar-track { background: transparent; }

/* Hover expand — desktop only */
@media (min-width: 781px) {
    .of-sidebar-left:hover,
    .of-sidebar-left.is-pinned {
        width: 220px;
    }
    .of-sidebar-left:hover ~ .of-app-main,
    .of-sidebar-left.is-pinned ~ .of-app-main {
        /* grid handles this — no extra rule needed */
    }
}

/* Brand area */
.of-sidebar-brand {
    padding: 12px 10px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--of-border);
    min-height: 50px;
    flex-shrink: 0;
}
.of-sidebar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
}
.of-sidebar-logo-icon {
    flex-shrink: 0;
}
.of-sidebar-wordmark {
    font-family: 'OddsForge Display', 'Montserrat', system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    white-space: nowrap;
}
.of-sidebar-wordmark-bet {
    color: var(--of-primary);
}
.of-sidebar-left:hover .of-sidebar-wordmark,
.of-sidebar-left.is-pinned .of-sidebar-wordmark {
    opacity: 1;
    transform: translateX(0);
}

/* Sidebar navigation */
.of-sidebar-nav {
    flex: 1;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.of-sidebar-section {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0 6px;
}
.of-sidebar-heading {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--of-muted);
    padding: 8px 10px 4px;
    opacity: 0;
    transition: opacity 0.18s ease;
    white-space: nowrap;
    overflow: hidden;
}
.of-sidebar-left:hover .of-sidebar-heading,
.of-sidebar-left.is-pinned .of-sidebar-heading {
    opacity: 1;
}
.of-sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 8px;
    color: var(--of-text-secondary);
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    transition: background 0.15s ease, color 0.15s ease;
}
.of-sidebar-link:hover {
    background: rgba(124, 58, 237, 0.08);
    color: var(--of-text);
}
.of-sidebar-link.is-active {
    background: rgba(124, 58, 237, 0.14);
    color: var(--of-primary-light);
}
.of-sidebar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 1.1rem;
    flex-shrink: 0;
    text-align: center;
}
.of-sidebar-label {
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.16s ease, transform 0.16s ease;
    white-space: nowrap;
}
.of-sidebar-left:hover .of-sidebar-label,
.of-sidebar-left.is-pinned .of-sidebar-label {
    opacity: 1;
    transform: translateX(0);
}

/* Sub-navigation (football leagues) */
.of-sidebar-sub {
    display: none;
    flex-direction: column;
    gap: 1px;
    padding: 2px 0 2px 46px;
}
.of-sidebar-left:hover .of-sidebar-sub,
.of-sidebar-left.is-pinned .of-sidebar-sub {
    display: flex;
}
.of-sidebar-sub a {
    display: block;
    padding: 5px 10px;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--of-muted);
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.12s ease, color 0.12s ease;
}
.of-sidebar-sub a:hover {
    background: rgba(124, 58, 237, 0.06);
    color: var(--of-text);
}

/* Sidebar divider */
.of-sidebar-divider {
    border: none;
    border-top: 1px solid var(--of-border);
    margin: 4px 14px;
}

/* Sidebar toggle (pin) button */
.of-sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px;
    border: none;
    border-top: 1px solid var(--of-border);
    background: transparent;
    color: var(--of-muted);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
}
.of-sidebar-toggle:hover {
    color: var(--of-text);
    background: rgba(124, 58, 237, 0.06);
}
.of-sidebar-left:hover .of-sidebar-toggle,
.of-sidebar-left.is-pinned .of-sidebar-toggle {
    display: flex;
}
.of-sidebar-left.is-pinned .of-sidebar-toggle svg {
    transform: rotate(180deg);
}

/* ===== SLIM TOP BAR ===== */
.of-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 15 !important;
    height: var(--of-topbar-h);
    background: var(--of-panel) !important;
    border-bottom: 1px solid var(--of-border) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    width: 100%;
    max-width: 100%;
    overflow: visible;
}
.of-topbar-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    padding: 0 16px;
    max-width: 100%;
    box-sizing: border-box;
}
.of-mobile-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--of-border);
    border-radius: 8px;
    background: transparent;
    color: var(--of-text);
    cursor: pointer;
    transition: background 0.15s ease;
    flex-shrink: 0;
}
.of-mobile-menu-btn:hover {
    background: rgba(124, 58, 237, 0.08);
}
.of-topbar-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}
.of-topbar-logo-svg {
    height: 28px;
    width: auto;
}
.of-topbar-logo-img {
    height: 36px;
    width: 180px;
    object-fit: cover;
    object-position: center 42%;
    display: block;
}
.of-sidebar-logo-img {
    height: 36px;
    width: 120px;
    object-fit: cover;
    object-position: center 42%;
    display: block;
}
.of-topbar-spacer {
    flex: 1;
}
.of-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Country selector */
.of-country-selector {
    position: relative;
    flex-shrink: 0;
    margin-right: 4px;
}
.of-country-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--of-border);
    border-radius: var(--of-radius-pill);
    background: var(--of-panel);
    color: var(--of-text);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    white-space: nowrap;
}
.of-country-toggle:hover {
    border-color: var(--of-gold-700);
    background: var(--of-panel-2);
}
.of-country-flag {
    font-size: 1.1rem;
    line-height: 1;
}
.of-country-chevron {
    opacity: 0.5;
    transition: transform 0.2s;
}
.of-country-toggle[aria-expanded="true"] .of-country-chevron {
    transform: rotate(180deg);
}
.of-country-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    background: var(--of-panel);
    border: 1px solid var(--of-border);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    z-index: 1000;
    padding: 6px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s, visibility 0.15s, transform 0.15s;
}
.of-country-dropdown[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.of-country-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    color: var(--of-text-secondary);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
    border-left: 3px solid transparent;
}
.of-country-option:hover {
    background: var(--of-dark-raised);
    color: var(--of-text);
}
.of-country-option.is-active {
    color: var(--of-text);
    border-left-color: var(--of-gold-700);
    font-weight: 700;
}
.of-country-opt-flag {
    font-size: 1.15rem;
    line-height: 1;
}
@media (max-width: 768px) {
    .of-country-label { display: none; }
    .of-country-toggle { padding: 5px 8px; gap: 4px; }
    .of-country-dropdown {
        position: fixed;
        top: 52px;
        right: 8px;
        left: auto;
        min-width: 180px;
        max-width: calc(100vw - 16px);
        max-height: 70vh;
        overflow-y: auto;
    }
}

/* Auth buttons in topbar */
.of-topbar-btn {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    border-radius: var(--of-radius-pill);
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.of-topbar-btn-ghost {
    color: var(--of-text-secondary);
    border: 1px solid var(--of-border);
    background: transparent;
}
.of-topbar-btn-ghost:hover {
    color: var(--of-text);
    border-color: rgba(124, 58, 237, 0.4);
    background: rgba(124, 58, 237, 0.06);
}
.of-topbar-btn-cta {
    color: #141114;
    background: var(--of-gradient-cta);
    border: none;
    box-shadow: var(--of-shadow-cta);
}
.of-topbar-btn-cta:hover {
    background: var(--of-gradient-cta-hover);
    box-shadow: 0 4px 20px rgba(223,253,81,0.25);
    transform: translateY(-1px);
}

/* User avatar in topbar */
.of-topbar-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--of-border);
    background: var(--of-panel-2);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.2s ease;
    padding: 0;
}
.of-topbar-avatar:hover {
    border-color: rgba(124, 58, 237, 0.5);
}
.of-topbar-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.of-topbar-avatar-fallback {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--of-text);
}

/* User dropdown from topbar */
.of-user-menu {
    position: relative;
}
.of-user-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 160px;
    background: var(--of-panel);
    border: 1px solid var(--of-border);
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    z-index: 30;
}
.of-user-dropdown[aria-hidden="false"] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.of-user-dropdown a {
    display: block;
    padding: 8px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--of-text-secondary);
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.12s ease, color 0.12s ease;
}
.of-user-dropdown a:hover {
    background: rgba(124, 58, 237, 0.08);
    color: var(--of-text);
}

/* ===== RIGHT SIDEBAR ===== */
.of-sidebar-right {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--of-dark-raised);
    border-left: 1px solid var(--of-border);
}
.of-rsb-inner {
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* Promo Banner */
.of-rsb-promo {
    background: linear-gradient(135deg, #2d1a45 0%, #1a1025 100%);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    position: relative;
}
.of-rsb-promo-badge {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--of-primary, #b4f472);
    color: #0d0d0d;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 10px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.of-rsb-promo-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 8px;
    margin: 8px auto 6px;
    display: block;
}
.of-rsb-promo-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--of-text);
    margin: 4px 0 2px;
}
.of-rsb-promo-bonus {
    font-size: 0.78rem;
    color: var(--of-primary, #b4f472);
    font-weight: 600;
    margin: 0 0 6px;
}
.of-rsb-promo-rating {
    font-size: 0.75rem;
    color: #F59E0B;
    margin-bottom: 10px;
}
.of-rsb-promo-rating span:last-child {
    color: var(--of-muted);
    margin-left: 4px;
}
.of-rsb-stars {
    letter-spacing: 1px;
}
.of-rsb-promo-cta {
    display: block;
    background: var(--of-primary, #b4f472);
    color: #0d0d0d;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    text-align: center;
    transition: opacity 0.12s ease;
}
.of-rsb-promo-cta:hover {
    opacity: 0.85;
}
/* Widget container */
.of-rsb-widget {
    background: var(--of-panel);
    border: 1px solid var(--of-border);
    border-radius: 10px;
    padding: 14px;
}
.of-rsb-widget-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--of-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--of-border);
}
/* Top Sportsbooks list */
.of-rsb-sb-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.of-rsb-sb-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--of-border);
}
.of-rsb-sb-item:last-child {
    border-bottom: none;
}
.of-rsb-sb-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}
.of-rsb-sb-placeholder {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--of-panel-2, #1a1520);
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--of-muted);
    flex-shrink: 0;
}
.of-rsb-sb-name {
    flex: 1;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--of-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.of-rsb-sb-rating {
    font-size: 0.68rem;
    font-weight: 700;
    color: #F59E0B;
    white-space: nowrap;
}
.of-rsb-sb-cta {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--of-primary, #b4f472);
    text-decoration: none;
    padding: 3px 8px;
    border: 1px solid rgba(180, 244, 114, 0.3);
    border-radius: 4px;
    white-space: nowrap;
    transition: background 0.12s ease;
}
.of-rsb-sb-cta:hover {
    background: rgba(180, 244, 114, 0.08);
}
/* Bonus cards */
.of-rsb-bonus-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.of-rsb-bonus-card {
    background: var(--of-panel-2, #1a1520);
    border-radius: 6px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.of-rsb-bonus-title {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--of-text);
}
.of-rsb-bonus-value {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--of-primary, #b4f472);
}
.of-rsb-bonus-code {
    font-size: 0.68rem;
    color: var(--of-muted);
    font-family: 'Courier New', monospace;
}
.of-rsb-bonus-cta {
    align-self: flex-start;
    font-size: 0.68rem;
    font-weight: 700;
    color: #0d0d0d;
    background: var(--of-primary, #b4f472);
    padding: 3px 10px;
    border-radius: 4px;
    text-decoration: none;
    margin-top: 3px;
    transition: opacity 0.12s ease;
}
.of-rsb-bonus-cta:hover {
    opacity: 0.85;
}
/* Quick Links */
.of-rsb-links {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.of-rsb-links a {
    display: block;
    font-size: 0.76rem;
    color: var(--of-muted);
    text-decoration: none;
    padding: 6px 0;
    border-bottom: 1px solid var(--of-border);
    transition: color 0.12s ease;
}
.of-rsb-links a:last-child {
    border-bottom: none;
}
.of-rsb-links a:hover {
    color: var(--of-primary, #b4f472);
}

/* ===== GLOBAL OVERRIDES — Remove old max-width constraints ===== */
.site-content {
    min-height: 60vh;
    /* No max-width — fills flexible center column */
}
.of-breadcrumbs {
    padding: 10px 24px;
    font-size: 0.82rem;
    max-width: none;
    margin: 0;
}

/* Hide old nav elements that are now in sidebar */
.site-nav,
.nav-toggle,
.nav-backdrop,
.sport-nav,
.header-topline,
.of-header-collapse-toggle,
.site-header .of-theme-profile-wrap {
    display: none !important;
}

/* Override old .site-header — now .of-topbar handles it */
.site-header {
    position: static !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}
.site-header .header-inner {
    display: none !important;
}

/* Remove max-width from inner containers — content fills center column */
.of-hub-inner,
.of-article-layout,
.of-page-full,
.footer-inner,
.footer-legal {
    max-width: none !important;
}

/* ===== MOBILE SIDEBAR DRAWER (<780px) ===== */
@media (max-width: 780px) {
    .of-app-shell {
        grid-template-columns: 1fr;
    }
    .of-sidebar-left {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 260px !important;
        transform: translateX(-100%);
        transition: transform 0.25s cubic-bezier(.4,0,.2,1);
        z-index: 1200;
        will-change: transform;
    }
    .of-sidebar-left.is-mobile-open {
        transform: translateX(0);
    }
    /* Show all labels immediately on mobile (no hover) */
    .of-sidebar-left .of-sidebar-wordmark,
    .of-sidebar-left .of-sidebar-heading,
    .of-sidebar-left .of-sidebar-label {
        opacity: 1;
        transform: none;
    }
    .of-sidebar-left .of-sidebar-sub {
        display: flex;
    }
    .of-sidebar-left .of-sidebar-toggle {
        display: none !important; /* pin button is desktop only */
    }
    /* Backdrop */
    body.of-sidebar-mobile-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 1199;
    }
    /* Show hamburger in topbar */
    .of-mobile-menu-btn {
        display: inline-flex;
    }
    /* Hide right sidebar on mobile */
    .of-sidebar-right {
        display: none !important;
    }
    /* Topbar logo: show mobile version */
    .of-topbar-logo-svg {
        height: 24px;
    }
    .of-topbar-logo-img {
        height: 28px;
        width: 140px;
    }
    /* Phase 8: Content padding tighter on tablet/mobile */
    .of-single-wrap,
    .of-page-full {
        padding: 16px 16px 32px;
    }
    .of-odds-landing,
    .of-sb-landing,
    .of-predictions-landing {
        padding: 0 16px 32px !important;
    }
    /* Match table: slightly tighter cells */
    .of-mtr {
        grid-template-columns: 70px 1fr 48px 48px 48px 46px;
        font-size: 0.82rem;
    }
    .of-mtr-odd { font-size: 0.78rem; padding: 4px 2px; }
    .of-mtr-bet { font-size: 0.68rem; padding: 4px 6px; min-width: 40px; }
    /* Archive grid: 2 columns */
    .of-archive-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

/* === Glass Morphism Utility === */
.of-glass {
    background: var(--of-glass-bg);
    backdrop-filter: blur(var(--of-glass-blur));
    -webkit-backdrop-filter: blur(var(--of-glass-blur));
    border: 1px solid var(--of-glass-border);
}

/* === Gradient Border Utility === */
.of-gradient-border { position: relative; }
.of-gradient-border::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: var(--of-gradient-gold-border);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}
.of-gradient-border:hover::before { opacity: 1; }

/* === Phase 12: Staggered Card Entry Animations === */
.of-hub-crypto-card,
.of-hub-tip-card,
.of-hub-sb-card,
.of-hub-bonus-card,
.of-hub-match-card {
    animation: of-card-enter 0.4s ease both;
}
.of-hub-crypto-card:nth-child(1),
.of-hub-tip-card:nth-child(1),
.of-hub-sb-card:nth-child(1),
.of-hub-bonus-card:nth-child(1) { animation-delay: 0s; }
.of-hub-crypto-card:nth-child(2),
.of-hub-tip-card:nth-child(2),
.of-hub-sb-card:nth-child(2),
.of-hub-bonus-card:nth-child(2) { animation-delay: 0.06s; }
.of-hub-crypto-card:nth-child(3),
.of-hub-tip-card:nth-child(3),
.of-hub-sb-card:nth-child(3),
.of-hub-bonus-card:nth-child(3) { animation-delay: 0.12s; }
.of-hub-crypto-card:nth-child(4),
.of-hub-tip-card:nth-child(4),
.of-hub-sb-card:nth-child(4),
.of-hub-bonus-card:nth-child(4) { animation-delay: 0.18s; }
.of-hub-crypto-card:nth-child(5),
.of-hub-tip-card:nth-child(5),
.of-hub-sb-card:nth-child(5),
.of-hub-bonus-card:nth-child(5) { animation-delay: 0.24s; }
.of-hub-crypto-card:nth-child(6),
.of-hub-tip-card:nth-child(6),
.of-hub-sb-card:nth-child(6),
.of-hub-bonus-card:nth-child(6) { animation-delay: 0.3s; }

/* Live status dot pulse */
.of-live-dot,
.of-status-live::before {
    animation: of-glow-pulse 1.6s ease-in-out infinite;
}

/* Shimmer loading skeleton */
.of-shimmer {
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0) 100%);
    background-size: 200% 100%;
    animation: of-shimmer 1.8s ease infinite;
}

/* === Accessibility: Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--of-dark);
    color: var(--of-text);
    font-family: 'Inter', 'OddsForge Sans', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

a { color: #cca6ff; text-decoration: none; }
a:hover { color: #e4ff5a; }

.btn,
.brand-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-radius: var(--of-radius-btn);
    background: var(--of-gradient-cta);
    color: #111111;
    font-weight: 700;
    font-size: 0.88rem;
    box-shadow: var(--of-shadow-cta);
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
}
.btn:hover,
.brand-cta:hover {
    box-shadow: 0 4px 16px rgba(223,253,81,0.2);
    transform: translateY(-1px);
}
.btn::after,
.brand-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.btn:hover::after,
.brand-cta:hover::after {
    opacity: 1;
}
.btn-ghost,
.brand-cta-ghost {
    background: transparent;
    color: #cca6ff;
    border: 1px solid rgba(131,70,212,0.3);
    box-shadow: none;
}
.btn-ghost:hover,
.brand-cta-ghost:hover {
    border-color: #cca6ff;
    background: rgba(131,70,212,0.1);
    box-shadow: none;
    transform: translateY(-1px);
}
.brand-card {
    background: var(--of-panel);
    border: 1px solid var(--of-border);
    border-radius: var(--of-radius-card);
    box-shadow: var(--of-shadow-card);
}
.brand-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--of-radius-pill);
    background: rgba(131,70,212,0.1);
    border: 1px solid rgba(131,70,212,0.3);
    color: #cca6ff;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.brand-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--of-radius-pill);
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid rgba(124, 58, 237, 0.35);
    color: var(--of-text);
    font-size: 0.75rem;
    font-weight: 700;
}
.brand-badge img {
    width: 14px;
    height: 14px;
}

.site-header {
    background: #211c25;
    border-bottom: 1px solid #2c2532;
    position: relative;
    z-index: 10;
    position: sticky;
    top: 0;
}
.site-header .header-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.site-header .of-theme-profile-wrap {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px 14px;
    overflow: hidden;
    transition: max-height 0.22s ease, opacity 0.22s ease, padding 0.22s ease, margin 0.22s ease;
}
.site-header .of-theme-profile-wrap .of-profile-header {
    background: #1a161d;
    border-top: 1px solid #2c2532;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.of-header-collapse-toggle {
    display: none;
    position: absolute;
    left: 50%;
    bottom: -13px;
    transform: translateX(-50%);
    width: 34px;
    height: 26px;
    border: 1px solid #2c2532;
    border-radius: 999px;
    background: #211c25;
    color: var(--of-text);
    z-index: 12;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.of-header-collapse-icon {
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-top: -2px;
    transition: transform 0.2s ease, margin-top 0.2s ease;
}
body.of-header-collapsed .of-header-collapse-icon {
    transform: rotate(-135deg);
    margin-top: 2px;
}
.header-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(234,88,12,0.12);
    border: 1px solid rgba(234,88,12,0.3);
    color: #c8e447;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.live-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--of-yellow);
    box-shadow: 0 0 10px rgba(249, 115, 22, 0.8);
}
.header-ticker {
    background: var(--of-panel-2);
    border-bottom: 1px solid var(--of-border);
    overflow: hidden;
}
.header-ticker-track {
    display: inline-flex;
    gap: 40px;
    padding: 10px 24px;
    white-space: nowrap;
    animation: header-ticker 18s linear infinite;
    color: var(--of-muted);
    font-size: 0.85rem;
}
@keyframes header-ticker {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.nav-toggle {
    display: none;
    width: 42px;
    height: 42px;
    padding: 0;
    flex-direction: column;
    border-radius: 10px;
    border: 1px solid var(--of-border);
    background: var(--of-panel);
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
}
.nav-toggle-bar {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--of-text);
    border-radius: 999px;
    transform-origin: center;
    transition: transform 0.18s ease, opacity 0.18s ease;
}
body.nav-open .nav-toggle .nav-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle .nav-toggle-bar:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle .nav-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.site-logo {
    display: inline-flex;
    align-items: center;
}
.site-logo img,
.site-logo .of-logo-svg {
    height: 42px;
    width: auto;
}
.site-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.site-nav a {
    color: var(--of-text);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: border-color .15s ease, background .15s ease;
}
.site-nav a:hover {
    border-color: rgba(124, 58, 237, 0.45);
    background: rgba(124, 58, 237, 0.08);
}
.site-nav .current-menu-item a,
.site-nav .current_page_item a {
    border-color: rgba(124, 58, 237, 0.7);
    background: rgba(124, 58, 237, 0.12);
}
.site-nav .of-nav-profile {
    display: none;
}
.site-actions .btn {
    background: var(--of-gradient-cta);
    box-shadow: var(--of-shadow-cta);
    border-radius: var(--of-radius-btn);
}
.nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 9;
}

/* ===== Sport Navigation Bar ===== */
.sport-nav {
    background: var(--of-panel);
    border-bottom: 1px solid var(--of-border);
    position: sticky;
    top: 61px;
    z-index: 9;
}
.sport-nav-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.sport-nav-inner::-webkit-scrollbar {
    display: none;
}
.sport-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--of-muted);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
    text-decoration: none;
}
.sport-tab:hover {
    color: var(--of-text);
}
.sport-tab.is-active {
    color: var(--of-primary-light);
    border-bottom-color: var(--of-primary);
}
.sport-tab.is-coming-soon {
    opacity: 0.55;
    position: relative;
}
.sport-tab.is-coming-soon:hover {
    opacity: 0.75;
}
.sport-soon {
    position: absolute;
    top: 2px;
    right: -2px;
    font-size: 0.55rem;
    font-weight: 800;
    color: var(--of-primary);
    background: rgba(124, 58, 237, 0.15);
    padding: 1px 4px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
}
.sport-icon {
    font-size: 1rem;
}
@media (max-width: 780px) {
    .sport-nav {
        top: 53px;
    }
    .sport-nav-inner {
        padding: 0 12px;
    }
    .sport-tab {
        padding: 8px 10px;
        font-size: 0.78rem;
    }
}

/* ===== Mobile Bottom Navigation ===== */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100vw;
    z-index: 1100;
    background: var(--of-panel);
    border-top: 1px solid var(--of-border);
    padding: 4px 0 max(4px, env(safe-area-inset-bottom));
    backdrop-filter: blur(12px); background: rgba(20,17,20,0.95);
    overflow: hidden;
}
.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 4px;
    font-size: 0.65rem;
    font-weight: 600;
    color: #c5c5c5;
    background: none;
    border: none;
    text-decoration: none;
    transition: color 0.15s ease;
    flex: 1;
}
.mobile-nav-item:hover,
.mobile-nav-item.is-active {
    color: var(--of-primary-light);
}
.mobile-nav-item svg {
    opacity: 0.7;
    transition: opacity 0.15s ease;
}
.mobile-nav-item:hover svg,
.mobile-nav-item.is-active svg {
    opacity: 1;
}
.mobile-nav-item-center {
    position: relative;
}
.mobile-nav-item-center svg {
    color: var(--of-primary);
}
@media (max-width: 780px) {
    .mobile-bottom-nav {
        display: flex;
        justify-content: space-around;
    }
    body {
        padding-bottom: 60px;
    }
    .site-footer {
        margin-bottom: 60px;
    }
}

.site-content {
    min-height: 60vh;
}

/* Breadcrumbs */
.of-breadcrumbs {
    padding: 10px 24px;
    font-size: 0.82rem;
    max-width: 1320px;
    margin: 0 auto;
}
.of-breadcrumb-nav {
    color: #a6a6a6;
}
.of-breadcrumb-nav a {
    color: #a6a6a6;
    text-decoration: none;
    transition: color 0.15s;
}
.of-breadcrumb-nav a:hover {
    color: #cca6ff;
}
.of-breadcrumb-nav .breadcrumb_last {
    color: #ffffff;
}

.entry-content > *:not(.of-shell):not(.of-hub-page) {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}
.entry-content > .of-hub-page {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.site-footer {
    background: #1a161d;
    border-top: 1px solid var(--of-border);
    color: var(--of-muted);
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}
.site-footer .footer-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 24px;
    display: grid;
    grid-template-columns: minmax(260px, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.footer-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--of-radius-pill);
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid rgba(124, 58, 237, 0.35);
    color: var(--of-text);
    font-size: 0.75rem;
    font-weight: 700;
}
.badge img {
    width: 14px;
    height: 14px;
}
.badge-18 {
    background: rgba(249, 115, 22, 0.16);
    border-color: rgba(249, 115, 22, 0.5);
    color: var(--of-yellow);
}
.footer-trust {
    margin-top: 12px;
    border: 1px solid var(--of-border);
    border-radius: 12px;
    overflow: hidden;
    background: #1a161d;
}
.footer-trust img {
    display: block;
    width: 100%;
    height: auto;
}
.footer-legal {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.85rem;
    color: var(--of-muted);
}
.site-footer h4 {
    margin: 0 0 8px;
    color: var(--of-text);
    font-family: 'Inter', 'OddsForge Display', sans-serif;
}
.site-footer a { color: var(--of-muted); }
.site-footer a:hover { color: var(--of-purple-600); }

@media (max-width: 980px) {
    .site-header .header-inner { flex-direction: row; align-items: center; }
    .site-header .of-theme-profile-wrap { padding: 0 16px 12px; }
    .site-nav { position: fixed; top: 70px; right: 16px; left: 16px; background: var(--of-panel); border: 1px solid var(--of-border); border-radius: 16px; padding: 12px; display: none; z-index: 11; max-height: calc(100vh - 90px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .site-nav ul { flex-direction: column; gap: 8px; }
    .nav-toggle { display: inline-flex; }
    .site-actions { display: inline-flex; gap: 6px; align-items: center; }
    body.nav-open .site-nav { display: block; }
    body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
    body.nav-open { overflow: hidden; }
    .header-live { display: none; }
}
@media (max-width: 780px) {
    .site-header .header-inner { padding: 10px 12px; }
    .site-header .of-theme-profile-wrap { padding: 0 12px 8px; max-height: 360px; }
    .site-header.has-profile-panel .of-header-collapse-toggle { display: inline-flex; }
    body.of-header-collapsed .site-header .of-theme-profile-wrap {
        max-height: 0;
        opacity: 0;
        padding-top: 0;
        padding-bottom: 0;
        margin-top: 0;
        margin-bottom: 0;
    }
    body.of-header-collapsed .site-header .of-theme-profile-wrap .of-profile-header {
        opacity: 0;
        transform: translateY(-8px);
        pointer-events: none;
    }
    .site-header .of-theme-profile-wrap .of-profile-header {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 12px;
    }
    .site-header .of-theme-profile-wrap .of-profile-left { gap: 8px; }
    .site-header .of-theme-profile-wrap .of-avatar { width: 40px; height: 40px; border-radius: 12px; }
    .site-header .of-theme-profile-wrap .of-profile-name { font-size: 0.95rem; line-height: 1.15; }
    .site-header .of-theme-profile-wrap .of-profile-sub { font-size: 0.78rem; }
    .site-header .of-theme-profile-wrap .of-profile-mini {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }
    .site-header .of-theme-profile-wrap .of-mini-stat { padding: 6px 8px; border-radius: 10px; }
    .site-header .of-theme-profile-wrap .of-mini-label { font-size: 0.7rem; letter-spacing: 0.08em; }
    .site-header .of-theme-profile-wrap .of-mini-value { font-size: 0.88rem; line-height: 1; }
    .site-header .of-theme-profile-wrap .of-profile-header-actions {
        width: auto;
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: 6px;
    }
    .site-header .of-theme-profile-wrap .of-notif-bell { width: 34px; height: 34px; border-radius: 10px; }
    .site-header .of-theme-profile-wrap .of-btn { padding: 6px 10px; border-radius: 10px; font-size: 0.78rem; }
    .header-ticker { display: none; }
    .site-footer .footer-inner { grid-template-columns: 1fr; padding: 16px 12px; }
    .entry-content > *:not(.of-shell):not(.of-hub-page) { padding-left: 16px; padding-right: 16px; }
    .footer-legal { padding-left: 12px; padding-right: 12px; }
    .header-ticker-track { padding: 10px 16px; }
}
@media (max-width: 520px) {
    .site-header .of-theme-profile-wrap { padding: 0 10px 6px; }
    .site-header .of-theme-profile-wrap .of-profile-header { padding: 8px 10px; gap: 8px; }
    .site-header .of-theme-profile-wrap .of-profile-mini { gap: 4px; }
    .site-header .of-theme-profile-wrap .of-mini-stat { padding: 5px 6px; }
    .site-header .of-theme-profile-wrap .of-mini-label { font-size: 0.7rem; }
    .site-header .of-theme-profile-wrap .of-mini-value { font-size: 0.8rem; }
    .site-header .of-theme-profile-wrap .of-coach-open { display: none; }
    .site-header .of-theme-profile-wrap .of-profile-open { padding: 6px 9px; font-size: 0.8rem; }
}

.of-hub-page {
    background: linear-gradient(180deg, var(--of-dark), var(--of-panel));
    border-top: 1px solid var(--of-border);
    border-bottom: 1px solid var(--of-border);
}
.of-hub-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 18px 18px 30px;
    display: grid;
    gap: 20px;
    overflow-x: hidden;
}
.of-hub-inner > * {
    min-width: 0;
}

/* ===== Hero Banner ===== */
.of-hero-banner {
    background:
        radial-gradient(800px circle at 15% 40%, rgba(124,58,237,0.1), transparent),
        radial-gradient(600px circle at 85% 20%, rgba(0,212,255,0.04), transparent),
        linear-gradient(180deg, var(--of-panel) 0%, var(--of-dark) 100%);
    border: 1px solid var(--of-border-gold);
    border-radius: var(--of-radius-lg);
    padding: 48px 36px;
    position: relative;
    overflow: hidden;
}
.of-hero-banner.has-bg-image {
    background: var(--of-hero-bg) center/cover no-repeat;
}
.of-hero-banner::before {
    display: none;
}
.of-hero-title {
    font-family: 'Inter', 'OddsForge Display', sans-serif;
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 800;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    margin: 0 0 12px;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.of-hero-sub {
    font-size: 0.95rem;
    color: var(--of-muted);
    margin: 0 0 16px;
    max-width: 520px;
}
.of-hero-stats {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.of-hero-stat {
    font-size: 0.9rem;
    color: var(--of-muted);
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.of-hero-stat strong {
    color: var(--of-primary-light);
    font-weight: 800;
    font-size: 1.3rem;
}
.of-hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.of-hero-actions .of-btn {
    padding: 12px 28px;
    font-size: 0.95rem;
    min-width: 160px;
}
.of-hero-actions .of-btn:not(.of-btn-ghost) {
    background: linear-gradient(135deg, #e4ff5a, #dffd51);
    color: #111111;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.35);
}

/* ===== Affiliate Hero ===== */
.of-hero-affiliate {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: center;
    padding: 48px 0 32px;
}
.of-hero-aff-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.of-hero-aff-title {
    font-family: 'Inter', 'OddsForge Display', sans-serif;
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: 0;
}
.of-hero-aff-sub {
    font-size: 1rem;
    color: var(--of-muted);
    line-height: 1.6;
    margin: 0;
    max-width: 440px;
}
.of-hero-aff-stats {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.of-hero-aff-stat {
    font-size: 0.88rem;
    color: var(--of-muted);
}
.of-hero-aff-stat strong {
    color: var(--of-purple-600);
    font-weight: 800;
    font-size: 1.1rem;
}
.of-hero-aff-categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.of-hero-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 12px;
    background: #211c25;
    border: 1px solid #2c2532;
    border-radius: 12px;
    text-decoration: none;
    color: #e0e0e0;
    font-size: 0.82rem;
    font-weight: 600;
    text-align: center;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.of-hero-cat:hover {
    border-color: var(--of-purple-600);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.1);
    transform: translateY(-2px);
    color: var(--of-purple-600);
}
.of-hero-cat-icon {
    font-size: 1.6rem;
    line-height: 1;
}
.of-hero-cat-label {
    line-height: 1.2;
}

/* ===== Visual Hero Banner (v3 — branded gradient) ===== */
.of-hero-visual {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    min-height: 340px;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #8346d4 0%, #4a1d8c 40%, #141114 100%);
}
.of-hero-visual-content {
    position: relative;
    margin: 24px;
    padding: 32px 36px;
    border-radius: 14px;
    max-width: 520px;
}
.of-hero-visual-content h1 {
    font-family: 'Inter', 'OddsForge Display', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.of-hero-visual-content p {
    font-size: 0.92rem;
    color: rgba(255,255,255,0.92);
    line-height: 1.5;
    margin: 0 0 14px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.of-hero-visual-stats {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.of-hero-visual-stats span {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.9);
}
.of-hero-visual-stats strong {
    color: #F59E0B;
    font-weight: 800;
    font-size: 1rem;
}
.of-hero-visual-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.of-hero-visual-actions .of-btn {
    padding: 10px 24px;
    font-size: 0.88rem;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
}
.of-hero-visual-actions .of-btn-cta {
    background: linear-gradient(135deg, #e4ff5a, #dffd51);
    color: #111111;
    box-shadow: 0 4px 15px rgba(223,253,81,0.3);
    text-shadow: none;
}
.of-hero-visual-actions .of-btn-ghost {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.4);
}
.of-hero-visual-actions .of-btn-ghost:hover {
    background: rgba(255,255,255,0.25);
}

/* ===== Slim Hero (v3 — Cloudbet-style one-liner) ===== */
.of-hero-visual { display: none; } /* Hide old hero */
.of-hero-slim {
    background: linear-gradient(135deg, #8346d4 0%, #5b21b6 60%, #3b1281 100%);
    border-radius: 12px;
    padding: 16px 24px;
    margin-bottom: 6px;
}
.of-hero-slim-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.of-hero-slim-text h1 {
    font-family: 'Inter', 'OddsForge Display', sans-serif;
    font-size: clamp(1rem, 2vw, 1.3rem);
    font-weight: 800;
    color: #fff;
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
}
.of-hero-slim-year {
    color: var(--of-primary);
}
.of-hero-slim-text p {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.75);
    margin: 2px 0 0;
}
.of-hero-slim-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
@media (max-width: 780px) {
    .of-value-prop { overflow: hidden; }
}
@media (max-width: 600px) {
    .of-hero-slim { padding: 10px 12px; margin-bottom: 2px; border-radius: 8px; }
    .of-hero-slim-text p { display: none; }
    .of-hero-slim-actions { width: 100%; }
    .of-hero-slim-actions .of-btn { flex: 1; text-align: center; }
}

/* ===== Compact Sportsbook Strip ===== */
.of-sb-strip {
    margin: 6px 0 12px;
    overflow: hidden;
}
.of-sb-strip-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 0;
}
.of-sb-strip-scroll::-webkit-scrollbar { display: none; }
.of-sb-strip-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--of-panel);
    border: 1px solid var(--of-border);
    border-radius: 10px;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.of-sb-strip-item:hover {
    border-color: rgba(124, 58, 237, 0.4);
    background: var(--of-panel-2);
}
.of-sb-strip-logo {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    object-fit: contain;
    flex-shrink: 0;
}
.of-sb-strip-placeholder {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--of-panel-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--of-muted);
    flex-shrink: 0;
}
.of-sb-strip-name {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--of-text);
}
.of-sb-strip-rating {
    font-size: 0.7rem;
    font-weight: 700;
    color: #F59E0B;
    background: rgba(245,158,11,0.12);
    padding: 2px 6px;
    border-radius: 4px;
}
@media (max-width: 640px) {
    .of-sb-strip { margin: 2px 0 4px; }
    .of-sb-strip-item { padding: 4px 10px; }
    .of-sb-strip-rating { display: none; }
}

/* ===== Compact Match Table (Phase 5 — Cloudbet-style rows) ===== */
.of-match-table {
    margin-top: 8px;
}
.of-mtl {
    background: var(--of-panel);
    border: 1px solid var(--of-border);
    border-radius: var(--of-radius-card, 10px);
    margin-bottom: 8px;
    overflow: hidden;
}
.of-mtl-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--of-panel-2, #1a1520);
    border: none;
    width: 100%;
    cursor: pointer;
    color: var(--of-text);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: left;
    transition: background 0.15s ease;
}
.of-mtl-header:hover {
    background: var(--of-dark-raised, #211c25);
}
.of-mtl-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.of-mtl-count {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--of-muted);
    white-space: nowrap;
}
.of-mtl-chevron {
    transition: transform 0.2s ease;
    color: var(--of-muted);
    flex-shrink: 0;
}
.of-mtl-header[aria-expanded="false"] .of-mtl-chevron {
    transform: rotate(-90deg);
}
.of-mtl-header[aria-expanded="false"] + .of-mtl-body {
    display: none;
}
/* Match table rows — grid layout */
.of-mtr {
    display: grid;
    grid-template-columns: 80px 1fr 56px 56px 56px 52px;
    align-items: center;
    gap: 0;
    padding: 0 16px;
    min-height: 48px;
    border-bottom: 1px solid var(--of-border);
    text-decoration: none;
    color: var(--of-text);
    transition: background 0.12s ease;
}
a.of-mtr:hover {
    background: rgba(124, 58, 237, 0.06);
}
.of-mtr:last-child {
    border-bottom: none;
}
.of-mtr--head {
    min-height: 32px;
    border-bottom: 1px solid var(--of-border);
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--of-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.of-mtr--head .of-mtr-odd {
    background: none;
    color: var(--of-muted);
    font-size: 0.68rem;
    cursor: default;
}
.of-mtr-time {
    font-size: 0.74rem;
    color: var(--of-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.of-mtr-teams {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 6px 8px 6px 0;
}
.of-mtr-home,
.of-mtr-away {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.of-mtr-vs {
    font-size: 0.7rem;
    color: var(--of-muted);
    flex-shrink: 0;
}
.of-mtr-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: 2px;
    flex-shrink: 0;
}
.of-mtr-odd {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--of-muted);
    padding: 4px 2px;
    border-radius: 4px;
    text-align: center;
    transition: background 0.12s ease, color 0.12s ease;
}
.of-mtr-odd.has-odds {
    color: #b4f472;
    background: rgba(180, 244, 114, 0.08);
}
a.of-mtr:hover .of-mtr-odd.has-odds {
    background: rgba(180, 244, 114, 0.16);
}
.of-mtr-bet {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: #0d0d0d;
    background: var(--of-primary, #b4f472);
    padding: 5px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: opacity 0.12s ease;
    white-space: nowrap;
}
.of-mtr-bet:hover {
    opacity: 0.85;
}
/* Responsive: stack on mobile */
@media (max-width: 640px) {
    .of-mtr {
        grid-template-columns: 1fr 42px 42px 42px 38px;
        grid-template-rows: auto auto;
        padding: 6px 10px;
        min-height: auto;
        gap: 2px 0;
    }
    .of-mtr-time {
        grid-column: 1 / -1;
        font-size: 0.68rem;
        padding-bottom: 2px;
    }
    .of-mtr-teams {
        grid-column: 1 / 2;
        padding: 0;
        font-size: 0.8rem;
    }
    .of-mtr-logo { width: 16px; height: 16px; }
    .of-mtr-odd { font-size: 0.72rem; padding: 3px 1px; min-width: 38px; }
    .of-mtr-bet { font-size: 0.62rem; padding: 3px 4px; min-width: 34px; }
    .of-mtr--head {
        display: none;
    }
    /* Tighter section padding */
    .of-match-table { margin: 10px 0; }
    .of-mtl { border-radius: 8px; }
}

/* ===== Cloudbet Affiliate Banners ===== */
.of-cb-banner {
    position: relative;
    text-align: center;
    border-radius: 10px;
    overflow: hidden;
}
.of-cb-banner a {
    display: block;
    line-height: 0;
    transition: opacity 0.15s ease;
}
.of-cb-banner a:hover { opacity: 0.9; }
.of-cb-banner img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}
.of-cb-banner .of-ad-label {
    position: absolute;
    bottom: 4px;
    right: 6px;
    font-size: 0.6rem;
    color: var(--of-muted);
    opacity: 0.6;
}
/* Sidebar variant */
.of-cb-banner--sidebar {
    margin: 4px 0;
}
/* Leaderboard variant */
.of-cb-banner--leaderboard {
    margin: 20px auto;
    max-width: 728px;
}
/* Mobile: show mobile banner, hide leaderboard on small screens */
@media (max-width: 640px) {
    .of-cb-banner--leaderboard { display: none; }
}

/* ===== Quick Category Strip (hidden — replaced by sidebar nav) ===== */
.of-cat-strip {
    display: none;
}
.of-cat-strip::-webkit-scrollbar { display: none; }
.of-cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 16px;
    border: 1px solid #2c2532;
    border-radius: 999px;
    background: #211c25;
    color: #e0e0e0;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.of-cat-pill:hover {
    border-color: var(--of-gold-500);
    color: var(--of-gold-500);
    box-shadow: 0 2px 8px rgba(124,58,237,0.1);
    transform: translateY(-1px);
}

/* ===== Featured Sportsbook Cards Grid ===== */
.of-featured-sb-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.of-featured-sb-card {
    background: #211c25;
    border: 1px solid #2c2532;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
    position: relative;
}
.of-editors-pick-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: #FFFFFF;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.04em;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.of-featured-sb-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    transform: translateY(-3px);
}
.of-featured-sb-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #26202b;
}
.of-featured-sb-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}
.of-featured-sb-card:hover .of-featured-sb-img img {
    transform: scale(1.04);
}
.of-featured-sb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 800;
    color: #cca6ff;
    background: linear-gradient(135deg, rgba(131,70,212,0.15), rgba(131,70,212,0.08));
}
.of-featured-sb-placeholder--casino {
    color: #D97706;
    background: linear-gradient(135deg, #FFFBEB, #FEF3C7);
}
.of-featured-sb-info {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.of-featured-sb-top {
    display: flex;
    align-items: center;
    gap: 8px;
}
.of-featured-sb-logo {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    object-fit: contain;
    flex-shrink: 0;
}
.of-featured-sb-name {
    font-weight: 700;
    font-size: 0.88rem;
    color: #ffffff;
    flex: 1;
}
.of-featured-sb-rating {
    font-size: 0.78rem;
    font-weight: 700;
    color: #D97706;
    white-space: nowrap;
}
.of-featured-sb-bonus {
    font-size: 0.8rem;
    color: #a6a6a6;
    margin: 0;
    line-height: 1.3;
}
.of-featured-sb-info .of-btn-sm {
    padding: 7px 18px;
    font-size: 0.78rem;
    border-radius: 999px;
    text-align: center;
}
.of-featured-sb-info .of-ad-label {
    font-size: 0.65rem;
    color: #a6a6a6;
    text-align: center;
}
.of-featured-sb-card--casino .of-featured-sb-placeholder {
    color: #D97706;
    background: linear-gradient(135deg, #FFFBEB, #FEF3C7);
}
.of-btn-casino {
    background: linear-gradient(135deg, #7C3AED, #5B21B6) !important;
    color: #fff !important;
}

/* ===== Dual Banner Strip ===== */
.of-dual-banner-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.of-dual-banner-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #26202b;
}
.of-dual-banner-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s;
}
.of-dual-banner-item:hover img {
    transform: scale(1.02);
}
.of-dual-banner-item .of-ad-label {
    position: absolute;
    bottom: 6px;
    right: 8px;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.5);
    background: transparent;
    padding: 2px 6px;
    border-radius: 3px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* ===== Match CTA Pair (Melbet + 22Bet) ===== */
.of-match-cta-pair {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.of-match-cta-pair .of-match-odds-cta {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 10px;
    font-size: 0.76rem;
    margin-top: 0;
}
.of-cta-logo {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    object-fit: contain;
    flex-shrink: 0;
}
/* ===== Match Odds CTA Button ===== */
.of-match-odds-cta {
    display: block;
    text-align: center;
    padding: 8px 16px;
    margin-top: 8px;
    background: linear-gradient(135deg, #e4ff5a, #dffd51);
    color: #111111;
    font-weight: 700;
    font-size: 0.82rem;
    border-radius: 8px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s;
}
.of-match-odds-cta:hover {
    background: linear-gradient(135deg, #f0ff8a, #e4ff5a);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(223,253,81,0.25);
    color: #111111;
}

/* ===== View All Button ===== */
.of-hub-view-all {
    text-align: center;
    padding: 20px 0 4px;
}
.of-btn-outline {
    display: inline-block;
    padding: 10px 28px;
    border: 2px solid var(--of-gold-500);
    color: var(--of-gold-500);
    font-weight: 700;
    font-size: 0.88rem;
    border-radius: 999px;
    text-decoration: none;
    transition: all 0.15s;
}
.of-btn-outline:hover {
    background: var(--of-gold-500);
    color: #fff;
}

/* ===== Filter Disclosure (inline) ===== */
.of-hub-sportsbooks .of-filter-disclosure {
    display: block;
    font-size: 0.76rem;
    color: #a6a6a6;
    margin-bottom: 12px;
}
.of-hub-sportsbooks .of-filter-disclosure a {
    color: var(--of-gold-500);
    text-decoration: underline;
}

/* ===== Responsive: Visual Hero + New Sections ===== */
@media (max-width: 980px) {
    .of-featured-sb-grid {
        grid-template-columns: 1fr 1fr;
    }
    .of-dual-banner-strip {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 780px) {
    .of-hero-visual {
        min-height: 260px;
    }
    .of-hero-visual-content {
        margin: 16px;
        padding: 20px 22px;
    }
    .of-hero-visual-content h1 {
        font-size: 1.3rem;
    }
    .of-hero-visual-content p {
        font-size: 0.82rem;
    }
    .of-hero-visual-actions .of-btn {
        padding: 8px 18px;
        font-size: 0.82rem;
    }
    .of-featured-sb-grid {
        grid-template-columns: 1fr;
    }
    .of-featured-matches-grid {
        grid-template-columns: 1fr;
    }
    .of-match-cta-pair {
        flex-direction: column;
    }
    .of-cat-strip {
        padding: 0 0 4px;
    }
}

/* ===== Filter Bar ===== */
.of-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #2c2532;
    margin-bottom: 8px;
}
.of-filter-disclosure {
    font-size: 0.78rem;
    color: #a6a6a6;
}
.of-filter-disclosure a {
    color: var(--of-purple-600);
    text-decoration: underline;
}
.of-filter-tabs {
    display: flex;
    gap: 4px;
}
.of-filter-tab {
    padding: 6px 16px;
    border: 1px solid #2c2532;
    border-radius: 999px;
    background: transparent;
    color: #a6a6a6;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.of-filter-tab:hover {
    border-color: var(--of-purple-600);
    color: var(--of-purple-600);
}
.of-filter-tab.is-active {
    background: var(--of-purple-600);
    border-color: var(--of-purple-600);
    color: #FFFFFF;
}

/* ===== Featured Matches Grid ===== */
.of-featured-matches-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}
.of-match-odds-card {
    background: #211c25;
    border: 1px solid #2c2532;
    border-radius: 12px;
    padding: 18px;
    transition: box-shadow 0.15s;
}
.of-match-odds-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.of-match-odds-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.of-match-odds-sport {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--of-purple-600);
    letter-spacing: 0.05em;
}
.of-match-odds-time {
    font-size: 0.75rem;
    color: #a6a6a6;
}
.of-match-odds-teams {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    justify-content: space-between;
}
.of-match-odds-team {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    font-weight: 700;
    font-size: 0.9rem;
    color: #ffffff;
}
.of-match-odds-team--away {
    justify-content: flex-end;
    text-align: right;
}
.of-team-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 3px;
    flex-shrink: 0;
}
.of-match-odds-vs {
    font-size: 0.75rem;
    color: #a6a6a6;
    font-weight: 600;
}
.of-match-odds-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 8px;
}
.of-odds-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    background: #26202b;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.88rem;
    color: #ffffff;
}
.of-match-odds-source {
    font-size: 0.72rem;
    color: #a6a6a6;
    text-align: center;
    margin: 0;
}

/* ===== Hub Section (light) ===== */
.of-hub-section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 16px;
}
.of-hub-section-link {
    font-size: 0.85rem;
    color: var(--of-purple-600);
    font-weight: 600;
    white-space: nowrap;
}
.of-hub-section-link:hover {
    text-decoration: underline;
}

/* ===== Hub CTA Section ===== */
.of-hub-cta-signup {
    text-align: center;
    padding: 48px 24px;
    background: linear-gradient(135deg, rgba(131,70,212,0.15), rgba(131,70,212,0.08));
    border-radius: 16px;
    border: 1px solid rgba(131,70,212,0.3);
}
.of-hub-cta-signup h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 8px;
}
.of-hub-cta-signup p {
    color: #a6a6a6;
    margin: 0 0 20px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}
.of-hub-cta-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ===== Responsive: Affiliate Hero ===== */
@media (max-width: 780px) {
    .of-hero-affiliate {
        grid-template-columns: 1fr;
        padding: 24px 0 16px;
        gap: 20px;
    }
    .of-hero-aff-categories {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .of-hero-cat {
        padding: 12px 8px;
        font-size: 0.75rem;
    }
    .of-hero-cat-icon {
        font-size: 1.3rem;
    }
    .of-filter-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .of-featured-matches-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== How It Works ===== */
.of-how-it-works {
    padding: 32px 0 24px;
}
.of-hiw-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.of-hiw-step {
    text-align: center;
    padding: 24px 16px;
    border-radius: 12px;
    background: var(--of-panel);
    border: 1px solid var(--of-border);
    transition: border-color 0.15s ease;
}
.of-hiw-step:hover {
    border-color: rgba(124, 58, 237, 0.3);
}
.of-hiw-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.12);
    margin-bottom: 14px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.of-hiw-step:hover .of-hiw-icon { transform: scale(1.08); }
.of-hiw-icon--amber { background: rgba(124, 58, 237, 0.15); color: #cca6ff; }
.of-hiw-icon--cyan { background: rgba(124, 58, 237, 0.12); color: #cca6ff; }
.of-hiw-icon--green { background: rgba(76, 175, 80, 0.12); color: #66BB6A; }
.of-hiw-icon svg {
    width: 28px;
    height: 28px;
    color: inherit;
}
.of-hiw-step h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--of-text-primary);
    margin: 0 0 6px;
}
.of-hiw-step p {
    font-size: 0.85rem;
    color: var(--of-text-secondary);
    margin: 0;
    line-height: 1.5;
}
@media (max-width: 780px) {
    .of-hiw-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .of-hiw-step {
        display: flex;
        align-items: center;
        text-align: left;
        gap: 14px;
        padding: 16px;
    }
    .of-hiw-icon {
        margin-bottom: 0;
        flex-shrink: 0;
    }
}

/* ===== Featured Matches Grid ===== */
.of-featured-matches-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.of-match-odds-card {
    background: var(--of-panel);
    border: 1px solid var(--of-border);
    border-radius: var(--of-radius-card);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.15s ease;
}
.of-match-odds-card:hover {
    border-color: rgba(124, 58, 237, 0.3);
}
.of-match-odds-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.of-match-odds-sport {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--of-primary-light);
    padding: 2px 8px;
    background: rgba(124, 58, 237, 0.12);
    border-radius: 4px;
}
.of-match-odds-time {
    font-size: 0.72rem;
    color: var(--of-muted);
}
.of-match-odds-teams {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}
.of-match-odds-team {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--of-text);
    text-align: center;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.of-match-odds-vs {
    font-size: 0.72rem;
    color: var(--of-muted);
    font-weight: 600;
    flex-shrink: 0;
}
.of-match-odds-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
}
.of-odds-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 6px;
    background: var(--of-odds-bg);
    border: 1px solid var(--of-border);
    border-radius: 6px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--of-text);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.of-odds-btn:hover {
    background: var(--of-odds-highlight);
    border-color: rgba(124, 58, 237, 0.4);
}
.of-match-odds-source {
    font-size: 0.68rem;
    color: var(--of-muted);
    text-align: center;
}

/* ===== Game Promo Banner ===== */
.of-game-promo {
    margin-top: 0 !important;
}
.of-game-promo-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.06), rgba(124, 58, 237, 0.02));
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: var(--of-radius-card);
}
.of-game-promo-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--of-text);
    margin: 0 0 4px;
}
.of-game-promo-desc {
    font-size: 0.85rem;
    color: var(--of-muted);
    margin: 0;
}

@media (max-width: 980px) {
    .of-featured-matches-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 640px) {
    .of-hero-banner {
        padding: 24px 16px;
    }
    .of-hero-title {
        font-size: 1.4rem;
    }
    .of-featured-matches-grid {
        grid-template-columns: 1fr;
    }
    .of-game-promo-inner {
        flex-direction: column;
        text-align: center;
        padding: 16px;
    }
}

.of-hub-brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.of-hub-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
}
.of-hub-brand img {
    width: 132px;
    height: 22px;
    object-fit: contain;
}
.of-hub-auth {
    display: inline-flex;
    gap: 8px;
}
.of-hub-auth-btn {
    min-height: 34px;
    padding: 7px 14px;
    border-radius: 8px;
    border: 1px solid var(--of-border);
    background: #1a161d;
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 700;
}
.of-hub-auth-btn.is-ghost {
    background: rgba(229, 231, 235, 0.52);
    color: #ffffff;
}
.of-hub-title {
    margin: 2px 0 0;
    text-align: center;
    color: #ffffff;
    font-size: clamp(1.8rem, 4.2vw, 2.8rem);
    line-height: 1.1;
}
.of-hub-title span {
    color: #ffffff;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.of-hub-mascot {
    justify-self: center;
    width: min(250px, 100%);
    border-radius: 16px;
    border: 1px solid var(--of-border);
    background: #1a161d;
    box-shadow: 0 20px 34px rgba(0, 0, 0, 0.35);
    padding: 10px;
}
.of-hub-mascot img {
    width: 100%;
    height: auto;
    display: block;
}
.of-hub-intro-card {
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(249, 250, 251, 0.9));
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.38);
    padding: 16px 16px 14px;
    display: grid;
    gap: 10px;
}
.of-hub-intro-kicker {
    margin: 0;
    color: #cca6ff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
.of-hub-title-intro {
    margin: 0;
    text-align: left;
    font-size: clamp(1.4rem, 3.2vw, 2.1rem);
}
.of-hub-intro-copy {
    margin: 0;
    color: #e0e0e0;
    font-size: 0.98rem;
    line-height: 1.45;
}
.of-hub-intro-account {
    margin: 0;
    color: #a6a6a6;
    font-size: 0.84rem;
}
.of-hub-intro-account strong {
    color: #ffffff;
}
.of-hub-intro-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.of-hub-intro-step {
    border: 1px solid rgba(124, 58, 237, 0.36);
    border-radius: 12px;
    background: rgba(243, 244, 246, 0.8);
    color: #ffffff;
    font-size: 0.82rem;
    line-height: 1.3;
    padding: 8px 9px;
}
.of-hub-intro-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.of-hub-intro-actions .of-btn {
    min-height: 38px;
}
.of-hub-team-line {
    margin: -4px 0 2px;
    text-align: center;
    color: #e0e0e0;
    font-size: 0.95rem;
}
.of-hub-team-line strong {
    color: #ffffff;
}
.of-hub-game-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 18px;
    margin-top: 4px;
}
.of-hub-game-card {
    border-radius: 12px;
    border: 1px solid var(--of-border);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.38);
    overflow: hidden;
    color: #ffffff;
}
.of-hub-game-media {
    height: 138px;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--of-border);
}
.of-hub-game-body {
    padding: 12px 12px 14px;
    display: grid;
    gap: 8px;
}
.of-hub-game-body h3 {
    margin: 0;
    font-size: 1.2rem;
    text-align: center;
    color: #ffffff;
}
.of-hub-game-body span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    border-radius: 999px;
    background: linear-gradient(180deg, #2ed247, #15aa3a);
    color: #FFFFFF;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}
.of-hub-board {
    margin-top: 8px;
    display: grid;
    gap: 14px;
}
.of-hub-title-board {
    margin: 0;
    text-align: center;
}
.of-hub-page--leaderboard .of-hub-inner {
    max-width: 1260px;
    padding-top: 26px;
}
.of-hub-page--leaderboard .of-hub-board {
    margin-top: 0;
}
.of-hub-toggle {
    justify-self: center;
    display: inline-flex;
    border: 1px solid rgba(124,58,237,0.35);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(249,250,251,0.9);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
.of-hub-toggle button {
    border: 0;
    min-width: 120px;
    min-height: 40px;
    padding: 8px 16px;
    background: transparent;
    color: #a6a6a6;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}
.of-hub-toggle button.is-active {
    background: linear-gradient(135deg, rgba(124,58,237,0.18), rgba(124,58,237,0.08));
    color: #cca6ff;
}
.of-hub-podium {
    display: none;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 22px;
    align-items: end;
    margin-top: 10px;
}
.of-hub-podium.is-active {
    display: grid;
}
.of-hub-podium-card {
    text-align: center;
    display: grid;
    gap: 8px;
    justify-items: center;
    min-width: 0;
}
.of-hub-podium-card.is-top {
    transform: translateY(-14px);
}
.of-hub-podium-icon {
    width: 94px;
    height: 94px;
    display: grid;
    place-items: center;
    margin-bottom: 2px;
}
.of-hub-podium-icon-ball img {
    width: 90px;
    height: 90px;
}
.of-hub-podium-icon-cup span {
    font-size: 76px;
    line-height: 1;
}
.of-hub-podium-name {
    margin: 0;
    font-size: 2rem;
    line-height: 1.1;
    color: #ffffff;
    font-weight: 700;
    width: min(100%, 16ch);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: anywhere;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.of-hub-podium-reward {
    width: min(360px, 100%);
    border: 1px solid rgba(97, 127, 167, 0.34);
    background: linear-gradient(180deg, rgba(243, 244, 246, 0.97), rgba(249, 250, 251, 0.98));
    border-radius: 18px;
    padding: 14px 14px 16px;
    color: #a6a6a6;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.54);
}
.of-hub-podium-reward-badge {
    width: 34px;
    height: 28px;
    border-radius: 7px;
    margin: 0 auto 8px;
    display: grid;
    place-items: center;
    background: rgba(223, 253, 81, 0.94);
    color: #FFFFFF;
    font-size: 1rem;
}
.of-hub-podium-reward-target {
    font-size: 0.92rem;
    color: #a6a6a6;
    font-weight: 700;
}
.of-hub-podium-reward-value {
    margin-top: 10px;
    font-size: 2.35rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
}
.of-hub-podium-reward-label {
    margin-top: 4px;
    font-size: 0.96rem;
    color: #a6a6a6;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.of-hub-table-wrap {
    border: none;
    background: transparent;
    border-radius: 0;
    overflow: hidden;
    margin-top: 10px;
}
.of-hub-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0 10px;
}
.of-hub-table th,
.of-hub-table td {
    padding: 12px 14px;
    border-bottom: 0;
    text-align: left;
}
.of-hub-table th {
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #a6a6a6;
    background: transparent;
    font-weight: 700;
}
.of-hub-table td {
    font-size: 1.02rem;
    color: #ffffff;
    background: linear-gradient(180deg, rgba(243, 244, 246, 0.96), rgba(249, 250, 251, 0.98));
}
.of-hub-table th:nth-child(1),
.of-hub-table td:nth-child(1) {
    width: 10%;
}
.of-hub-table th:nth-child(2),
.of-hub-table td:nth-child(2) {
    width: 50%;
}
.of-hub-table th:nth-child(3),
.of-hub-table td:nth-child(3) {
    width: 20%;
}
.of-hub-table th:nth-child(4),
.of-hub-table td:nth-child(4) {
    width: 20%;
}
.of-hub-table tbody tr td:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.of-hub-table tbody tr td:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.of-hub-table tbody {
    display: none;
}
.of-hub-table tbody.is-active {
    display: table-row-group;
}
.of-hub-rank {
    width: 76px;
    font-weight: 800;
}
.of-hub-player-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: 100%;
}
.of-hub-player-avatar {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.48);
    background: #e8eff7;
    object-fit: cover;
}
.of-hub-player-avatar-fallback {
    display: inline-grid;
    place-items: center;
    font-weight: 700;
    color: #1a344f;
}
.of-hub-player-meta {
    display: inline-grid;
    line-height: 1.05;
    min-width: 0;
}
.of-hub-player-meta strong {
    font-size: 0.98rem;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.of-hub-player-meta em {
    font-style: normal;
    font-size: 0.74rem;
    color: #a6a6a6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.of-hub-score {
    color: #ffffff;
    font-weight: 700;
}
.of-hub-gem {
    color: #cca6ff;
    font-weight: 700;
}
.of-hub-board-actions {
    text-align: center;
}
.of-hub-leaderboard-link {
    color: #22C55E;
    font-weight: 700;
}
/* Compact rankings widget */
.of-hub-board-compact {
    padding: 18px 16px;
}
.of-hub-board-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.of-hub-board-title {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}
.of-hub-board-link {
    color: #cca6ff;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
}
.of-hub-board-link:hover {
    text-decoration: underline;
}
.of-hub-compact-list {
    display: none;
}
.of-hub-compact-list.is-active {
    display: block;
}
.of-hub-compact-row {
    display: flex;
    align-items: center;
    padding: 8px 4px;
    border-bottom: 1px solid rgba(48, 54, 61, 0.6);
}
.of-hub-compact-row:last-child {
    border-bottom: 0;
}
.of-hub-compact-rank {
    width: 44px;
    font-weight: 700;
    color: #a6a6a6;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.of-hub-compact-name {
    flex: 1;
    color: #a6a6a6;
    font-weight: 600;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.of-hub-compact-pts {
    color: #cca6ff;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
    margin-left: 8px;
}
.of-hub-compact-empty {
    color: #a6a6a6;
    font-size: 0.82rem;
    text-align: center;
    padding: 16px 0;
}
.of-welcome-shell {
    position: fixed;
    inset: 0;
    z-index: 120700;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.of-welcome-shell.is-open {
    display: flex;
}
.of-welcome-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 11, 8, 0.74);
    backdrop-filter: blur(2px);
}
.of-welcome-modal {
    position: relative;
    width: min(640px, calc(100vw - 24px));
    border-radius: 20px;
    border: 1px solid rgba(124, 58, 237, 0.44);
    background:
        radial-gradient(120% 100% at 90% 0%, rgba(32, 184, 72, 0.2), transparent 45%),
        linear-gradient(165deg, rgba(7, 22, 13, 0.98), rgba(5, 15, 9, 0.98));
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
    padding: 22px 20px 18px;
    color: #ffffff;
}
.of-welcome-x {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(0, 0, 0, 0.06);
    color: #ffffff;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}
.of-welcome-kicker {
    margin: 0 0 8px;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #22C55E;
    font-weight: 800;
}
.of-welcome-modal h2 {
    margin: 0;
    font-size: clamp(1.35rem, 3.4vw, 1.9rem);
    line-height: 1.15;
    word-break: break-word;
}
.of-welcome-copy {
    margin: 12px 0 10px;
    color: #e0e0e0;
    font-size: 0.98rem;
}
.of-welcome-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}
.of-welcome-list li {
    position: relative;
    padding-left: 18px;
    color: #e0e0e0;
}
.of-welcome-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.54em;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(180deg, #84f66a, #41cb49);
    box-shadow: 0 0 0 4px rgba(94, 214, 91, 0.2);
}
.of-welcome-actions {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.of-welcome-actions .of-btn {
    min-height: 40px;
    border-radius: 12px;
}
body.of-welcome-open {
    overflow: hidden;
}

@media (max-width: 980px) {
    .of-hub-inner {
        padding: 14px 14px 24px;
    }
}
@media (max-width: 780px) {
    .of-hub-brand-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .of-hub-auth {
        width: 100%;
    }
    .of-hub-auth-btn {
        flex: 1 1 auto;
        text-align: center;
    }
    .of-hub-game-grid {
        grid-template-columns: 1fr;
    }
    .of-hub-intro-steps {
        grid-template-columns: 1fr;
    }
    .of-hub-podium {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .of-hub-podium-card[data-rank="1"] {
        order: 1;
    }
    .of-hub-podium-card[data-rank="2"] {
        order: 2;
    }
    .of-hub-podium-card[data-rank="3"] {
        order: 3;
    }
    .of-hub-podium-card.is-top {
        transform: none;
    }
    .of-hub-podium-name {
        font-size: 1.55rem;
    }
    .of-hub-podium-reward-value {
        font-size: 1.8rem;
    }
}
@media (max-width: 520px) {
    .of-hub-inner {
        padding: 12px 10px 18px;
    }
    .of-hub-table th,
    .of-hub-table td {
        padding: 9px 8px;
        font-size: 0.8rem;
    }
    .of-hub-player-avatar {
        width: 30px;
        height: 30px;
    }
    .of-hub-player-meta strong {
        font-size: 0.86rem;
    }
    .of-hub-player-meta em {
        font-size: 0.72rem;
    }
    .of-hub-podium-icon {
        width: 72px;
        height: 72px;
    }
    .of-hub-podium-icon-ball img {
        width: 68px;
        height: 68px;
    }
    .of-hub-podium-icon-cup span {
        font-size: 58px;
    }
    .of-hub-podium-reward {
        border-radius: 14px;
        padding: 12px;
    }
    .of-hub-podium-reward-value {
        font-size: 1.48rem;
    }
    .of-hub-table th:nth-child(4),
    .of-hub-table td:nth-child(4) {
        display: none;
    }
    .of-welcome-modal {
        border-radius: 16px;
        padding: 18px 14px 14px;
    }
    .of-welcome-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
    .of-welcome-actions .of-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Global layout refresh: header + footer — Phase 15 AAA Upgrade */
.site-header {
    background: #211c25;
    border-bottom: 1px solid #2c2532;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.header-topline {
    border-bottom: 1px solid #2c2532;
    background: #1a161d;
}
.header-topline-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 8px 18px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
}
.header-topline-copy {
    color: #a6a6a6;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    text-align: center;
}
.header-topline-links {
    display: inline-flex;
    gap: 12px;
}
.header-topline-links a {
    color: #e0e0e0;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}
.header-topline-links a:hover {
    color: #ffffff;
}
.site-header .header-inner {
    max-width: 1240px;
    padding: 10px 18px;
    gap: 14px;
}
.site-logo img,
.site-logo .of-logo-svg {
    height: 38px;
}
.site-nav {
    margin-left: auto;
}
.site-nav ul {
    gap: 8px;
}
.site-nav a {
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--of-text-secondary);
    border: none;
    background: none;
    border-radius: 0;
    padding: 8px 12px;
    position: relative;
    transition: color 0.2s ease;
}
.site-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 12px;
    right: 12px;
    height: 2px;
    background: var(--of-gradient-cta);
    border-radius: 1px;
    transform: scaleX(0);
    transition: transform 0.25s ease;
}
.site-nav a:hover {
    color: var(--of-text);
    background: none;
    border-color: transparent;
}
.site-nav a:hover::after {
    transform: scaleX(1);
}
.site-nav .current-menu-item a,
.site-nav .current_page_item a {
    color: var(--of-primary-light);
    border-color: transparent;
    background: none;
}
.site-nav .current-menu-item a::after,
.site-nav .current_page_item a::after {
    transform: scaleX(1);
}

/* ===== Nav Dropdown (Guides) — Desktop ===== */
.site-nav .of-nav-has-dropdown {
    position: relative;
}
.site-nav .of-nav-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 200px;
    flex-direction: column;
    gap: 2px;
    background: #211c25;
    border: 1px solid #2c2532;
    border-radius: 12px;
    padding: 6px;
    z-index: 20;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.site-nav .of-nav-has-dropdown:hover > .of-nav-dropdown,
.site-nav .of-nav-has-dropdown:focus-within > .of-nav-dropdown {
    display: flex;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.site-nav .of-nav-dropdown li {
    list-style: none;
}
.site-nav .of-nav-dropdown a {
    display: block;
    padding: 9px 14px;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
    color: var(--of-text-secondary);
    border-radius: 8px;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
.site-nav .of-nav-dropdown a::after {
    display: none !important;
}
.site-nav .of-nav-dropdown a:hover {
    background: rgba(124, 58, 237, 0.1);
    color: var(--of-text);
}
/* Wide variant: 2-column grid for Odds dropdown */
.site-nav .of-nav-dropdown--wide {
    min-width: 320px;
    flex-wrap: wrap;
    flex-direction: row;
}
.site-nav .of-nav-has-dropdown:hover > .of-nav-dropdown--wide,
.site-nav .of-nav-has-dropdown:focus-within > .of-nav-dropdown--wide {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}
.site-nav .of-nav-dropdown--wide li:first-child {
    grid-column: 1 / -1;
}
.site-nav .of-nav-dropdown--wide li:first-child a {
    color: var(--of-gold, #7C3AED);
    border-bottom: 1px solid var(--of-border);
    margin-bottom: 2px;
    padding-bottom: 10px;
}

/* ===== Mega Menu — Desktop ===== */
.of-mega-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    z-index: 20;
    background: #211c25;
    border: 1px solid #2c2532;
    border-radius: 14px;
    padding: 20px 24px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.04);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    min-width: 680px;
}
.of-mega-menu--3col {
    grid-template-columns: repeat(3, 1fr);
    min-width: 520px;
}
.site-nav .of-nav-has-mega:hover > .of-mega-menu,
.site-nav .of-nav-has-mega:focus-within > .of-mega-menu {
    display: grid;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.of-mega-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 16px;
    border-right: 1px solid #2c2532;
}
.of-mega-col:last-child {
    border-right: none;
}
.of-mega-col:first-child {
    padding-left: 0;
}
.of-mega-heading {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #a6a6a6;
    padding: 4px 10px 8px;
    margin-bottom: 2px;
}
.of-mega-menu a {
    display: block;
    padding: 7px 10px;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
    color: var(--of-text-secondary);
    border-radius: 8px;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
.of-mega-menu a::after {
    display: none !important;
}
.of-mega-menu a:hover {
    background: rgba(124, 58, 237, 0.08);
    color: var(--of-text);
}
/* Top Picks column with logos */
.of-mega-pick {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 6px 10px !important;
}
.of-mega-pick-logo {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: contain;
    background: #1a161d;
    border: 1px solid #2c2532;
    flex-shrink: 0;
}
.of-mega-pick-name {
    flex: 1;
    font-weight: 600;
}
.of-mega-pick-rating {
    font-size: 0.72rem;
    font-weight: 700;
    color: #F59E0B;
    background: rgba(245,158,11,0.15);
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
}

.site-actions {
    display: inline-flex;
    gap: 8px;
}
.site-actions .btn {
    min-height: 36px;
    padding: 8px 16px;
    border-radius: var(--of-radius-btn);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    box-shadow: var(--of-shadow-cta);
    transition: box-shadow 0.3s ease, transform 0.2s ease;
}
.site-actions .btn:hover {
    box-shadow: 0 4px 20px rgba(124,58,237,0.35), 0 12px 40px rgba(124,58,237,0.2);
    transform: translateY(-1px);
}
.site-header .of-theme-profile-wrap {
    max-width: 1240px;
    padding: 0 18px 10px;
}
.site-header .of-theme-profile-wrap .of-profile-header {
    border-radius: 12px;
    border: 1px solid rgba(124, 58, 237, 0.24);
}
.header-ticker {
    background: #1a161d;
    border-bottom-color: #2c2532;
}
.header-ticker-track {
    padding: 8px 18px;
    font-size: 0.78rem;
}

.site-footer {
    background: #1a161d;
    border-top: 1px solid #2c2532;
    position: relative;
}
.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(124,58,237,0.15), transparent);
}
.site-footer .footer-inner {
    max-width: 1240px;
    padding: 24px 18px 18px;
    grid-template-columns: minmax(260px, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.footer-brand-card {
    border: 1px solid #2c2532;
    border-radius: 14px;
    padding: 14px;
    background: #211c25;
}
.footer-col p,
.footer-brand-card p {
    margin: 0 0 8px;
}
.footer-col p:last-child,
.footer-brand-card p:last-child {
    margin-bottom: 0;
}
.footer-col h4,
.footer-brand-card h4 {
    margin-bottom: 10px;
}
.footer-legal {
    max-width: 1240px;
    border-top: 1px solid var(--of-border);
    margin-top: 8px;
    padding-top: 12px;
    padding-bottom: 14px;
}

/* Crypto Trust Badges */
.of-crypto-trust-strip {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.of-crypto-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 8px;
    background: rgba(124, 58, 237, 0.06);
    border: 1px solid rgba(124, 58, 237, 0.18);
    color: var(--of-cyan-400, #7C3AED);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.of-crypto-trust-badge:hover {
    border-color: rgba(124, 58, 237, 0.4);
    box-shadow: 0 0 12px rgba(124, 58, 237, 0.15);
}
.of-crypto-trust-icon {
    font-size: 0.9rem;
    font-weight: 800;
    opacity: 0.85;
}

@media (max-width: 1100px) {
    .header-topline-inner {
        grid-template-columns: auto 1fr;
    }
    .header-topline-links {
        display: none;
    }
}
@media (max-width: 980px) {
    .header-topline-copy {
        text-align: left;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .site-header .header-inner {
        padding: 10px 14px;
    }
    .site-nav {
        position: fixed;
        top: 62px;
        right: 12px;
        left: 12px;
        z-index: 14;
        border: 1px solid #2c2532;
        border-radius: 14px;
        background: #211c25;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        padding: 12px;
        display: none;
        margin-left: 0;
    }
    body.nav-open .site-nav {
        display: block;
    }
    body.nav-open .nav-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
    body.nav-open {
        overflow: hidden;
    }
    .site-nav ul {
        gap: 6px;
    }
    .site-nav a {
        width: 100%;
        text-align: left;
    }
    .nav-toggle {
        display: inline-flex;
    }
    .site-actions {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-left: auto;
    }
    .site-actions .btn {
        padding: 6px 10px;
        min-height: 32px;
        font-size: 0.74rem;
    }
    .site-footer .footer-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .footer-brand-card {
        grid-column: 1 / -1;
    }
}
@media (max-width: 780px) {
    .site-nav {
        top: 62px;
    }
    .header-topline {
        display: none;
    }
    .header-ticker {
        display: none;
    }
    .site-actions .btn-ghost {
        font-size: 0.7rem;
        padding: 5px 8px;
        min-height: 30px;
    }
    .site-header .of-theme-profile-wrap {
        padding: 0 12px 8px;
    }
}
@media (max-width: 520px) {
    /* .site-logo span removed — text is now in SVG */
    .site-actions .btn {
        min-height: 44px;
        font-size: 0.78rem;
    }
    .site-footer .footer-inner {
        grid-template-columns: 1fr;
        padding: 18px 12px 12px;
    }
    .footer-legal {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* Light-theme corporate overrides removed - dark sports theme restored */
.of-ajax-loading main.site-content {
    opacity: 0.56;
    transition: opacity 0.2s ease;
}
.of-ajax-loading {
    cursor: progress;
}
.of-ajax-loader {
    position: fixed;
    inset: 0;
    z-index: 120000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 17, 20, 0.65);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, visibility 0.18s ease;
}
.of-ajax-loader-panel {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 132px;
    min-height: 46px;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid rgba(124, 58, 237, 0.25);
    background: linear-gradient(180deg, #2a2530, #1a161d);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
    color: var(--of-text);
    font-weight: 700;
    letter-spacing: 0.03em;
}
.of-ajax-spinner {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-top-color: #cca6ff;
    animation: of-ajax-spin 0.72s linear infinite;
}
.of-ajax-loader-text {
    font-size: 0.78rem;
    text-transform: uppercase;
}
body.of-ajax-loading .of-ajax-loader {
    opacity: 1;
    visibility: visible;
}
@keyframes of-ajax-spin {
    to { transform: rotate(360deg); }
}
@media (max-width: 640px) {
    .of-ajax-spinner { width: 24px; height: 24px; border-width: 2.5px; }
    .of-ajax-loader-panel { min-width: 110px; min-height: 40px; padding: 8px 14px; }
    .of-ajax-loader-text { font-size: 0.72rem; }
}

@media (max-width: 1080px) {
    .site-footer .footer-inner {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .footer-brand-card {
        grid-column: 1 / -1;
    }
}
@media (max-width: 780px) {
    .site-actions .btn-ghost {
        display: inline-flex;
    }
    .site-actions .btn {
        min-height: 44px;
        font-size: 0.8rem;
        padding: 8px 10px;
    }
    .site-header .site-actions .of-profile-cta {
        min-height: 44px;
        padding-left: 10px;
        padding-right: 10px;
    }
    .of-profile-cta-avatar {
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
    }
    .site-header .site-actions .of-profile-cta .of-profile-notif-count {
        min-width: 19px;
        height: 19px;
        font-size: 0.72rem;
        top: -8px;
        right: -8px;
    }
}
@media (max-width: 640px) {
    .site-footer .footer-inner {
        grid-template-columns: 1fr;
    }
}

/* Remove duplicate in-page brand strips (header already provides logo/navigation) */
.of-game .of-predict-brand-row,
.of-hub-brand-row {
    display: none !important;
}

/* Profile drawer — dark sportsbook theme */
.of-drawer-overlay {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(4px);
}
.of-profile-drawer {
    z-index: 10060;
}
.of-drawer-panel {
    background: linear-gradient(180deg, #FFFFFF, #1a161d) !important;
    border-left: 1px solid rgba(0, 0, 0, 0.06) !important;
    color: var(--of-text) !important;
    box-shadow: -18px 0 36px rgba(0, 0, 0, 0.4);
}
.of-drawer-panel::before {
    display: none !important;
}
.of-drawer-title {
    color: var(--of-text) !important;
    letter-spacing: 0.02em;
}
.of-drawer-close {
    background: var(--of-panel-2) !important;
    color: var(--of-text) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: none !important;
}
.of-drawer-profile {
    background: var(--of-panel) !important;
    border: 1px solid var(--of-border) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.of-drawer-avatar {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(124, 58, 237, 0.25)) !important;
    border-color: rgba(124, 58, 237, 0.5) !important;
}
.of-drawer-name {
    color: var(--of-text) !important;
}
.of-drawer-sub {
    color: var(--of-muted) !important;
}
.of-drawer-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.of-drawer-stat {
    background: var(--of-panel-2) !important;
    border: 1px solid var(--of-border) !important;
}
.of-drawer-stat span {
    color: var(--of-muted) !important;
}
.of-drawer-stat strong {
    color: var(--of-text) !important;
}
.of-drawer-actions .of-btn {
    border-radius: 10px !important;
    min-height: 36px;
}
.of-drawer-actions .of-btn:not(.of-btn-ghost) {
    background: linear-gradient(135deg, #e4ff5a, #dffd51) !important; color: #111111 !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}
.of-drawer-actions .of-btn-ghost {
    background: var(--of-panel-2) !important;
    color: var(--of-text) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}
.of-drawer-section,
.of-notif-list .of-notif-item,
.of-recent-item {
    background: var(--of-panel) !important;
    border: 1px solid var(--of-border) !important;
}
.of-drawer-section-title,
.of-notif-title {
    color: var(--of-text) !important;
}
.of-recent-meta,
.of-notif-time,
.of-notif-empty {
    color: var(--of-muted) !important;
}

/* Header profile image CTA + Facebook-like notification bubble */
.site-header .site-actions .of-profile-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding-left: 8px;
    padding-right: 8px;
    min-width: 42px;
    justify-content: center;
}
.of-profile-cta-avatar {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(124, 58, 237, 0.4);
    background: var(--of-panel-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
}
.of-profile-cta-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.of-profile-cta-fallback {
    font-size: 0.72rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.03em;
}
.site-header .site-actions .of-profile-cta .of-profile-notif-count {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: #e53935;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px rgba(229, 57, 53, 0.35);
}

@media (max-width: 640px) {
    .site-header .site-actions .of-profile-cta {
        gap: 6px;
        padding-left: 8px;
        padding-right: 8px;
        min-width: 44px;
        justify-content: center;
    }
    .site-header .site-actions .of-profile-cta .of-profile-cta-text {
        display: none;
    }
    .site-header .site-actions .of-profile-cta .of-profile-notif-count {
        min-width: 20px;
        height: 20px;
        font-size: 0.7rem;
    }
}

/* User dropdown menu */
.of-user-menu {
    position: relative;
    display: inline-flex;
}
.of-user-menu-toggle {
    cursor: pointer;
}
.of-user-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 160px;
    background: #1a161d;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    padding: 6px 0;
    z-index: 2000;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.of-user-dropdown[aria-hidden="false"] {
    display: block;
}
.of-user-dropdown a {
    display: block;
    padding: 10px 16px;
    color: #e0e0e0;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    transition: background 0.15s;
}
.of-user-dropdown a:hover {
    background: rgba(0, 0, 0, 0.12);
}
.of-user-dropdown a:last-child {
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    margin-top: 4px;
    padding-top: 10px;
    color: #e57373;
}

/* Final mobile nav override (single source of truth) */
@media (max-width: 980px) {
    .site-header {
        z-index: 1300;
    }
    .site-nav .of-nav-profile {
        display: list-item;
    }
    .site-actions {
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        margin-left: 0;
    }
    .nav-toggle {
        display: inline-flex;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        border: 1px solid rgba(0, 0, 0, 0.06);
        background: var(--of-panel-2);
        color: var(--of-text);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }
    .nav-toggle-bar {
        background: var(--of-text);
        width: 18px;
    }
    .nav-backdrop {
        z-index: 1200;
        background: rgba(9, 18, 28, 0.28) !important;
        backdrop-filter: blur(1px) !important;
        opacity: 0;
        transition: opacity 0.2s ease;
    }
    .site-nav {
        position: fixed;
        top: calc(62px + env(safe-area-inset-top));
        right: 10px;
        left: 10px;
        z-index: 1301;
        display: block !important;
        margin-left: 0;
        padding: 12px;
        border-radius: 14px;
        border: 1px solid #2c2532;
        background: #211c25;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        opacity: 1;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-12px) scale(0.985);
        transform-origin: top center;
        transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.24s;
    }
    body.nav-open .site-nav {
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) scale(1);
        transition-delay: 0s;
    }
    body.nav-open .nav-backdrop {
        opacity: 1 !important;
        pointer-events: auto;
        backdrop-filter: blur(1px) !important;
    }
    body.nav-open {
        overflow: hidden;
    }
    body.nav-open main.site-content,
    body.nav-open .site-content {
        opacity: 1 !important;
        filter: none !important;
    }
    .site-nav ul {
        display: grid;
        gap: 8px;
    }
    .site-nav li,
    .site-nav a {
        opacity: 1 !important;
    }
    .site-nav a {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 44px;
        text-align: left;
        padding: 10px 12px;
        font-size: 0.86rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        border-radius: 11px;
        color: var(--of-text);
        border: 1px solid var(--of-border);
        background: var(--of-panel-2);
    }
    .site-nav a:hover {
        border-color: rgba(124, 58, 237, 0.45);
        background: rgba(124, 58, 237, 0.08);
    }
    .site-nav .current-menu-item a,
    .site-nav .current_page_item a {
        border-color: rgba(124, 58, 237, 0.55);
        background: rgba(124, 58, 237, 0.12);
    }
    /* Mobile dropdown — show inline, not absolute */
    .site-nav .of-nav-has-dropdown {
        position: static;
    }
    .site-nav .of-nav-dropdown {
        display: grid !important;
        position: static !important;
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        min-width: 0;
        background: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        padding: 0 0 0 12px;
        margin-top: 4px;
        gap: 4px;
    }
    .site-nav .of-nav-dropdown a {
        font-size: 0.8rem !important;
        font-weight: 600 !important;
        min-height: 38px;
        padding: 8px 12px;
        border: 1px solid rgba(0, 0, 0, 0.04);
        background: rgba(0, 0, 0, 0.02);
        border-radius: 9px;
        color: var(--of-text-secondary);
    }
    .site-nav .of-nav-dropdown a:hover {
        border-color: rgba(124, 58, 237, 0.35);
        background: rgba(124, 58, 237, 0.06);
    }
    /* Mobile mega-menu — collapse to stacked layout */
    .site-nav .of-nav-has-mega {
        position: static;
    }
    .of-mega-menu {
        display: grid !important;
        position: static !important;
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        min-width: 0 !important;
        background: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0 0 0 12px;
        margin-top: 4px;
        gap: 8px;
        grid-template-columns: 1fr !important;
    }
    .of-mega-col {
        padding: 0;
        border-right: none;
        gap: 2px;
    }
    .of-mega-heading {
        padding: 6px 10px 4px;
        font-size: 0.65rem;
        color: #a6a6a6;
    }
    .of-mega-menu a {
        min-height: 38px;
        display: flex !important;
        align-items: center;
        padding: 8px 12px !important;
        border: 1px solid rgba(0, 0, 0, 0.04);
        background: rgba(0, 0, 0, 0.02);
        border-radius: 9px;
        color: var(--of-text-secondary);
    }
    .of-mega-menu a:hover {
        border-color: rgba(124, 58, 237, 0.35);
        background: rgba(124, 58, 237, 0.06);
    }
    /* Hide Top Picks column on mobile to save space */
    .of-mega-col--picks {
        display: none;
    }
}
@media (max-width: 520px) {
    .site-header .header-inner {
        padding: 8px 10px;
    }
    .site-logo img,
    .site-logo .of-logo-svg {
        height: 32px;
    }
    .site-nav {
        top: calc(56px + env(safe-area-inset-top));
        right: 8px;
        left: 8px;
        padding: 10px;
        transform: translateY(-10px) scale(0.988);
    }
}

/* First-steps onboarding focus mode (nickname -> team) */
body.of-optin-active .site-footer {
    display: none !important;
}
body.of-optin-active .site-header .header-inner {
    justify-content: flex-start;
}
body.of-optin-active .site-header .site-logo {
    margin-right: auto;
}
body.of-optin-active .site-nav,
body.of-optin-active .nav-toggle,
body.of-optin-active .nav-backdrop {
    display: none !important;
}
body.of-optin-active .site-content {
    min-height: calc(100dvh - 62px);
}
body.of-optin-active .of-game.of-team-screen .of-boxed {
    padding-top: 10px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
}
@media (max-width: 640px) {
    body.of-optin-active .site-header .header-inner {
        padding: 8px 10px;
    }
}
@supports selector(body:has(.of-optin-shell)) {
    body:has(.of-optin-shell) .site-footer {
        display: none !important;
    }
}

/* Stability overrides after QA pass */
.of-ajax-loading main.site-content {
    opacity: 1 !important;
}
.of-ajax-loader {
    background: rgba(20, 17, 20, 0.65);
}
@media (max-width: 980px) {
    body.nav-open .of-ajax-loader {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    body.nav-open .site-content,
    body.nav-open .site-footer {
        opacity: 1 !important;
        filter: none !important;
    }
}

/* Mobile header: show auth buttons for logged-out, avatar for logged-in */
@media (max-width: 980px) {
    .site-header .site-actions {
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        margin-left: 0;
    }
    /* Logged-in: show profile avatar only, hide Play Free */
    .site-header .site-actions .of-profile-cta {
        display: inline-flex !important;
        min-width: 42px;
        min-height: 44px;
        padding: 6px;
    }
    .site-header .site-actions .of-profile-open ~ .btn:not(.of-profile-open) {
        display: none !important;
    }
}

/* Header flush-top safety override */
:root {
    --wp-admin--admin-bar--height: 0px;
}
html {
    margin-top: 0 !important;
    padding-top: 0 !important;
    overflow-x: hidden;
}
html[style] {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
body.admin-bar {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
#wpadminbar {
    display: none !important;
}
.site-header {
    position: relative !important;
    top: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    left: 0 !important;
    right: 0 !important;
}

/* Mobile header polish: flush top, right-side controls, readable badge */
@media (max-width: 980px) {
    .site-header {
        position: relative !important;
        top: 0 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    .site-header .header-inner {
        justify-content: flex-start;
        gap: 8px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .site-header .site-logo {
        margin-right: auto;
        min-width: 0;
    }
    .nav-toggle {
        order: 3;
        margin-left: auto;
        margin-right: 0;
        flex: 0 0 44px;
    }
    .site-actions {
        order: 4;
        margin-left: 0 !important;
        gap: 8px !important;
        flex: 0 0 auto;
    }
    body:not(.of-optin-active) .site-header .site-actions .of-profile-cta {
        min-width: 44px;
        min-height: 44px;
        padding: 5px;
        border-radius: 12px;
        overflow: visible;
    }
    .site-header .site-actions .of-profile-cta .of-profile-notif-count {
        top: -4px;
        right: -4px;
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        border: 2px solid #2c2532;
        box-shadow: 0 4px 10px rgba(229, 57, 53, 0.28);
        line-height: 1;
        transform: none;
    }
}
@media (max-width: 520px) {
    .site-header .header-inner {
        padding: 7px 8px;
        gap: 6px;
    }
    .nav-toggle {
        width: 42px;
        height: 42px;
        border-radius: 11px;
        box-shadow: 0 6px 12px rgba(14, 26, 38, 0.12);
    }
    .site-header .site-actions .of-profile-cta .of-profile-notif-count {
        top: -3px;
        right: -3px;
        min-width: 17px;
        height: 17px;
        font-size: 0.66rem;
    }
}

/* ===== Homepage affiliate content sections ===== */
.of-hub-section {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid var(--of-border);
    position: relative;
}
.of-hub-section:first-of-type {
    border-top: none;
    padding-top: 0;
}
.of-hub-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.of-hub-section-title {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--of-text);
    margin: 0;
}
.of-hub-section-link {
    font-size: 0.82rem;
    font-weight: 600;
    color: #cca6ff;
    text-decoration: none;
    white-space: nowrap;
}
.of-hub-section-link:hover {
    text-decoration: underline;
    color: #cca6ff;
}

/* Latest Tips Grid */
.of-hub-tips-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.of-hub-tip-card {
    background: var(--of-card-bg);
    border: 1px solid var(--of-border);
    border-radius: var(--of-radius-card);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    box-shadow: var(--of-shadow-card);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
    animation: of-card-enter 0.4s ease-out both;
    overflow: hidden;
}
.of-hub-tip-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(33,28,37,1), rgba(38,32,43,1));
}
.of-hub-tip-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.of-hub-tip-card:hover .of-hub-tip-thumb img {
    transform: scale(1.05);
}
.of-hub-tip-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(33,28,37,1), rgba(38,32,43,1));
}
.of-hub-tip-placeholder span {
    font-size: 2rem;
    opacity: 0.3;
}
.of-hub-tip-result-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 4px;
    backdrop-filter: blur(4px);
}
.of-hub-tip-result-badge.of-result-win { background: rgba(76,175,80,0.85); color: #fff; }
.of-hub-tip-result-badge.of-result-loss { background: rgba(229,57,53,0.85); color: #fff; }
.of-hub-tip-result-badge.of-result-push { background: rgba(255,193,7,0.85); color: #1a1a1a; }
.of-hub-tip-header,
.of-hub-tip-title,
.of-hub-tip-bet,
.of-hub-tip-meta { padding-left: 14px; padding-right: 14px; }
.of-hub-tip-header { padding-top: 12px; }
.of-hub-tip-meta { padding-bottom: 14px; }
.of-hub-tip-card h3 { margin: 0; }
.of-hub-tip-title a {
    color: var(--of-text);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.35;
}
.of-hub-tip-title a:hover { color: #cca6ff; }
.of-hub-tip-excerpt {
    font-size: 0.8rem;
    color: var(--of-muted);
    line-height: 1.5;
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.of-hub-tip-date {
    font-size: 0.7rem;
    color: #a6a6a6;
    font-weight: 500;
}
.of-hub-tip-odds {
    font-size: 0.78rem;
    font-weight: 700;
    color: #cca6ff;
    background: rgba(124, 58, 237, 0.08);
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
}
.of-hub-tip-type-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}
.of-tip-badge-result { background: rgba(30,41,59,0.8); color: #fff; }
.of-tip-badge-preview { background: rgba(124,58,237,0.85); color: #fff; }
.of-hub-tip-card:hover {
    border-color: var(--of-border-gold);
    box-shadow: var(--of-shadow-card-hover), var(--of-shadow-glow-gold);
    transform: translateY(-2px);
}
.of-hub-tip-card.of-result-win {
    border-left: 3px solid #4caf50;
}
.of-hub-tip-card.of-result-loss {
    border-left: 3px solid #e53935;
}
.of-hub-tip-header {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.of-hub-tip-type {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(124, 58, 237, 0.15);
    color: var(--of-primary-light);
}
.of-hub-tip-sport {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.04);
    color: var(--of-muted);
}
.of-hub-tip-result {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: auto;
}
.of-hub-tip-result-win {
    background: rgba(63, 185, 80, 0.15);
    color: #3fb950;
}
.of-hub-tip-result-loss {
    background: rgba(198,40,40,0.15);
    color: #c62828;
}
.of-hub-tip-result-push {
    background: rgba(245,127,23,0.15);
    color: #f57f17;
}
.of-hub-tip-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}
.of-hub-tip-title a {
    color: var(--of-text);
    text-decoration: none;
}
.of-hub-tip-title a:hover {
    color: var(--of-primary-light);
}
.of-hub-tip-bet {
    font-size: 0.82rem;
    color: var(--of-muted);
    margin: 0;
    font-weight: 600;
}
.of-hub-tip-meta {
    display: flex;
    gap: 10px;
    font-size: 0.78rem;
    color: var(--of-muted);
    margin-top: auto;
}
.of-hub-tip-odds {
    font-weight: 700;
    color: var(--of-text);
}
.of-hub-tip-confidence {
    color: #cca6ff;
    letter-spacing: 1px;
}

/* Featured Sportsbooks Grid */
.of-hub-sportsbooks-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.of-hub-sb-card {
    background: var(--of-card-bg);
    border: 1px solid var(--of-border);
    border-radius: var(--of-radius-card);
    padding: 20px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    box-shadow: var(--of-shadow-card);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
    animation: of-card-enter 0.4s ease-out both;
}
.of-hub-sb-card:hover {
    border-color: var(--of-border-gold);
    box-shadow: var(--of-shadow-card-hover), var(--of-shadow-glow-gold);
    transform: translateY(-2px);
}
.of-hub-sb-logo {
    max-height: 40px;
    max-width: 120px;
    object-fit: contain;
}
.of-hub-sb-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--of-text);
    margin: 0;
}
.of-hub-sb-rating {
    font-size: 0.9rem;
}
.of-hub-sb-bonus {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--of-primary-light);
    margin: 0;
    padding: 4px 10px;
    background: rgba(124, 58, 237, 0.12);
    border-radius: 6px;
}
.of-hub-sb-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: auto;
}
.of-hub-sb-actions .of-ad-label {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--of-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.of-disclosure-inline {
    font-size: 0.72rem;
    color: var(--of-muted);
    margin-top: 10px;
    text-align: center;
}
.of-disclosure-inline a {
    color: #cca6ff;
}

/* Current Bonuses Grid */
.of-hub-bonuses-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.of-hub-bonus-card {
    background: var(--of-card-bg);
    border: 1px solid var(--of-border);
    border-radius: var(--of-radius-card);
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: var(--of-shadow-card);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
    animation: of-card-enter 0.4s ease-out both;
}
.of-hub-bonus-header {
    display: flex;
    align-items: center;
    gap: 8px;
}
.of-hub-bonus-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}
.of-hub-bonus-card:hover {
    border-color: var(--of-border-gold);
    box-shadow: var(--of-shadow-card-hover), var(--of-shadow-glow-gold);
    transform: translateY(-2px);
}
.of-hub-bonus-card.of-best-offer {
    border-color: var(--of-border-gold);
    position: relative;
    background: linear-gradient(180deg, rgba(124, 58, 237, 0.06) 0%, var(--of-card-bg) 40%);
}
.of-best-offer-badge {
    position: absolute;
    top: -1px;
    right: 12px;
    background: linear-gradient(135deg, #e4ff5a, #dffd51);
    color: #FFFFFF;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 10px 4px;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
}
.of-hub-bonus-sb {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--of-muted);
}
.of-hub-bonus-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--of-text);
    margin: 0;
    line-height: 1.3;
}
.of-hub-bonus-value {
    font-size: 0.88rem;
    font-weight: 700;
    color: #cca6ff;
    margin: 0;
}
.of-hub-bonus-code {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 6px;
    background: rgba(124, 58, 237, 0.1);
    border: 1px dashed rgba(124, 58, 237, 0.35);
    color: var(--of-primary-light);
    letter-spacing: 0.06em;
    align-self: flex-start;
}
.of-hub-bonus-expiry {
    font-size: 0.72rem;
    color: var(--of-muted);
}
.of-hub-bonus-action {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}
.of-hub-bonus-action .of-btn-cta {
    font-size: 0.8rem;
    padding: 8px 18px;
    border-radius: 8px;
}
.of-hub-bonus-action .of-ad-label {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--of-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* CTA Signup Section */
.of-hub-cta-signup {
    background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%);
    border: none;
    border-radius: var(--of-radius-card);
    padding: 40px 24px;
    text-align: center;
    margin-top: 36px;
}
.of-hub-cta-inner h2 {
    font-size: 1.4rem;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 8px;
}
.of-hub-cta-inner p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 20px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}
.of-hub-cta-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.of-hub-cta-actions .of-btn {
    background: #211c25;
    color: #cca6ff;
    border-color: #FFFFFF;
}
.of-hub-cta-actions .of-btn:hover {
    background: rgba(255,255,255,0.9);
    transform: translateY(-1px);
}
.of-hub-cta-actions .of-btn-ghost {
    background: transparent;
    color: #FFFFFF;
    border-color: rgba(255,255,255,0.5);
}
.of-hub-cta-actions .of-btn-ghost:hover {
    background: rgba(255,255,255,0.15);
    border-color: #FFFFFF;
    color: #FFFFFF;
}

/* Responsive: affiliate homepage sections */
@media (max-width: 980px) {
    .of-hub-tips-grid {
        grid-template-columns: 1fr 1fr;
    }
    .of-hub-sportsbooks-grid {
        grid-template-columns: 1fr 1fr;
    }
    .of-hub-bonuses-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 640px) {
    .of-hub-section {
        margin-top: 24px;
    }
    .of-hub-section-title {
        font-size: 1.1rem;
    }
    .of-hub-tips-grid,
    .of-hub-sportsbooks-grid {
        grid-template-columns: 1fr;
    }
    .of-hub-bonuses-grid {
        grid-template-columns: 1fr;
    }
    .of-hub-cta-signup {
        padding: 24px 16px;
    }
    .of-hub-cta-inner h2 {
        font-size: 1.15rem;
    }
}

/* ===== Crypto Hero Badges ===== */
.of-hero-crypto-badges {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.of-crypto-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--of-gold-300);
    background: rgba(124,58,237,0.06);
    border: 1px solid rgba(124,58,237,0.15);
    border-radius: var(--of-radius-pill);
    padding: 5px 14px 5px 10px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.of-crypto-badge:hover {
    border-color: var(--of-border-gold-strong);
    box-shadow: 0 0 16px rgba(124,58,237,0.1);
}
.of-crypto-badge svg {
    color: var(--of-primary-light);
    flex-shrink: 0;
}

/* ===== Featured Crypto Sportsbooks Grid ===== */
.of-hub-crypto-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.of-hub-crypto-card {
    background: var(--of-card-bg);
    border: 1px solid var(--of-border);
    border-radius: var(--of-radius-card);
    padding: 20px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    box-shadow: var(--of-shadow-card);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
    position: relative;
    overflow: hidden;
}
.of-hub-crypto-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(124,58,237,0.4), rgba(0,212,255,0.15), rgba(124,58,237,0.4));
    background-size: 200% 200%;
    animation: of-gradient-shift 4s ease infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.of-hub-crypto-card:hover {
    border-color: var(--of-border-gold);
    box-shadow: var(--of-shadow-card-hover), var(--of-shadow-glow-gold);
    transform: translateY(-2px);
}
.of-hub-crypto-card:hover::before {
    opacity: 1;
}
.of-hub-crypto-logo-wrap {
    width: 100%;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.02);
    border-radius: 8px;
    margin-bottom: 8px;
}
.of-hub-crypto-logo {
    max-width: 140px;
    height: 44px;
    object-fit: contain;
}
.of-hub-crypto-logo-fallback {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--of-primary-light);
    opacity: 0.6;
}
.of-hub-crypto-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--of-text);
    margin: 0;
}
.of-hub-crypto-rating {
    font-size: 0.78rem;
}
.of-hub-crypto-bonus {
    font-size: 0.8rem;
    color: var(--of-primary-light);
    font-weight: 600;
    margin: 0;
}
.of-hub-crypto-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

/* ===== Trust Signals ===== */
.of-trust-signals {
    padding: 24px 0;
}

/* ===== Game Banner (Promoted) ===== */
.of-hub-game-banner {
    background:
        radial-gradient(600px circle at 80% 30%, rgba(124, 58, 237, 0.08), transparent),
        linear-gradient(135deg, rgba(243, 244, 246, 0.95), rgba(243, 244, 246, 0.98));
    border: 1px solid var(--of-border-gold);
    border-radius: var(--of-radius-card);
    padding: 28px 28px;
    position: relative;
    overflow: hidden;
}
.of-hub-game-banner.has-bg-image {
    background:
        linear-gradient(135deg, rgba(249,250,251,0.82) 0%, rgba(249,250,251,0.90) 100%),
        var(--of-banner-bg) center/cover no-repeat;
}
.of-hub-game-banner::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.25), rgba(124, 58, 237, 0.08), transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.of-game-banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.of-game-banner-tag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--of-primary-light);
    background: rgba(124, 58, 237, 0.12);
    padding: 3px 10px;
    border-radius: 6px;
    margin-bottom: 6px;
}
.of-game-banner-text h3 {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--of-text);
    margin: 0 0 6px;
}
.of-game-banner-text p {
    font-size: 0.85rem;
    color: var(--of-muted);
    margin: 0;
    max-width: 520px;
    line-height: 1.5;
}
.of-hub-game-banner .of-btn-cta {
    padding: 12px 28px;
    font-size: 0.95rem;
    min-width: 140px;
}

/* ===== Latest News Slider ===== */
.of-hub-news-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}
.of-slider-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--of-border);
    background: var(--of-card-bg);
    color: #a6a6a6;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.of-slider-arrow:hover {
    border-color: var(--of-primary);
    color: var(--of-primary-light);
    background: rgba(124, 58, 237, 0.08);
}
.of-hub-news-slider {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.of-hub-news-slider::-webkit-scrollbar {
    display: none;
}
.of-hub-news-slide {
    flex: 0 0 calc(33.333% - 11px);
    min-width: 260px;
    scroll-snap-align: start;
    background: var(--of-card-bg);
    border: 1px solid var(--of-border);
    border-radius: var(--of-radius-card);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, transform 0.15s, box-shadow 0.15s;
}
.of-hub-news-slide:hover {
    border-color: var(--of-primary);
    transform: translateY(-2px);
    box-shadow: var(--of-shadow-card-hover);
}
.of-hub-news-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(243,244,246,1), rgba(249,250,251,1));
}
.of-hub-news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.of-hub-news-slide:hover .of-hub-news-thumb img {
    transform: scale(1.05);
}
.of-hub-news-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(33,28,37,1), rgba(38,32,43,1));
}
.of-hub-news-cat {
    position: absolute;
    bottom: 8px;
    left: 8px;
    display: inline-block;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    color: var(--of-primary-light);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 4px;
}
.of-hub-news-slide-body {
    padding: 12px 14px;
}
.of-hub-news-title {
    font-size: 0.92rem;
    font-weight: 700;
    margin: 0 0 6px;
    line-height: 1.3;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.of-hub-news-date {
    font-size: 0.72rem;
    color: #666;
}
@media (max-width: 980px) {
    .of-hub-news-slide {
        flex: 0 0 calc(50% - 8px);
    }
}
@media (max-width: 640px) {
    .of-hub-news-slide {
        flex: 0 0 85%;
        min-width: 240px;
    }
}

/* ===== Match Odds Card Logo ===== */
.of-match-odds-source {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.of-match-odds-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}

/* ===== Bonus Card Logo ===== */
.of-hub-bonus-header {
    display: flex;
    align-items: center;
    gap: 8px;
}
.of-hub-bonus-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 6px;
    flex-shrink: 0;
}

/* ===== Inline Affiliate CTA (in blog posts) ===== */
.of-inline-cta {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(124, 58, 237, 0.08));
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 10px;
    padding: 16px 20px;
    margin: 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.of-inline-cta-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}
.of-inline-cta-name {
    font-size: 0.95rem;
    color: #fff;
    white-space: nowrap;
}
.of-inline-cta-bonus {
    font-size: 0.82rem;
    color: var(--of-primary-light);
    font-weight: 600;
}
.of-inline-cta-btn {
    white-space: nowrap;
    padding: 8px 20px;
    font-size: 0.85rem;
}
.of-source-attribution {
    font-size: 0.78rem;
    color: #666;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
}
.of-source-attribution a {
    color: #a6a6a6;
}

/* ===== Guides Grid ===== */
.of-hub-guides-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.of-hub-guide-card {
    display: flex;
    flex-direction: column;
    background: var(--of-card-bg);
    border: 1px solid var(--of-border);
    border-radius: var(--of-radius-card);
    overflow: hidden;
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.of-hub-guide-card:hover {
    border-color: rgba(124, 58, 237, 0.35);
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.08);
    transform: translateY(-2px);
}
.of-hub-guide-header {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a6a6a6;
}
.of-guide-header--amber { background: linear-gradient(135deg, rgba(124,58,237,0.18), rgba(124,58,237,0.10)); }
.of-guide-header--cyan { background: linear-gradient(135deg, rgba(0,212,255,0.15), rgba(0,184,217,0.08)); }
.of-guide-header--green { background: linear-gradient(135deg, rgba(76,175,80,0.15), rgba(102,187,106,0.08)); }
.of-hub-guide-card:hover .of-hub-guide-header svg { transform: scale(1.1); }
.of-hub-guide-header svg { transition: transform 0.2s; }
.of-hub-guide-body {
    padding: 16px;
}
.of-hub-guide-card h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--of-text);
    margin: 0 0 6px;
}
.of-hub-guide-card p {
    font-size: 0.8rem;
    color: var(--of-muted);
    margin: 0;
    line-height: 1.45;
}

/* ===== Mobile More Menu ===== */
.mobile-nav-more-menu {
    display: none;
    position: fixed;
    bottom: 64px;
    right: 8px;
    z-index: 1001;
    background: var(--of-panel);
    border: 1px solid var(--of-border);
    border-radius: var(--of-radius-card);
    box-shadow: var(--of-shadow-card);
    min-width: 180px;
    overflow: hidden;
}
.mobile-nav-more-menu[aria-hidden="false"] {
    display: block;
}
.mobile-nav-more-inner {
    display: flex;
    flex-direction: column;
}
.mobile-nav-more-inner a {
    display: block;
    padding: 12px 16px;
    color: var(--of-text);
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid var(--of-border);
    transition: background 0.15s;
}
.mobile-nav-more-inner a:last-child {
    border-bottom: none;
}
.mobile-nav-more-inner a:hover {
    background: rgba(124, 58, 237, 0.08);
    color: var(--of-primary-light);
}

/* Responsive: new sections */
@media (max-width: 980px) {
    .of-hub-crypto-grid {
        grid-template-columns: 1fr 1fr;
    }
    .of-hub-guides-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 640px) {
    .of-hub-crypto-grid {
        grid-template-columns: 1fr;
    }
    .of-hub-guides-grid {
        grid-template-columns: 1fr;
    }
    .of-game-banner-inner {
        flex-direction: column;
        text-align: center;
    }
}

/* ===== Widget areas ===== */
.of-widget {
    background: var(--of-panel);
    border: 1px solid var(--of-border);
    border-radius: var(--of-radius-card);
    padding: 16px;
    margin-bottom: 16px;
}
.of-widget-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--of-text);
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--of-border);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.of-widget a {
    color: #cca6ff;
    text-decoration: none;
}
.of-widget a:hover {
    text-decoration: underline;
}
.of-widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.of-widget li {
    padding: 6px 0;
    border-bottom: 1px solid #2c2532;
    font-size: 0.84rem;
}
.of-widget li:last-child {
    border-bottom: none;
}

/* ===== Placeholder / Coming Soon sections ===== */
.of-hub-section-placeholder {
    border: 1px dashed rgba(124, 58, 237, 0.25);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(22, 38, 50, 0.6) 0%, rgba(14, 26, 38, 0.8) 100%);
    padding: 32px 24px;
    margin-top: 24px;
}
.of-hub-section-placeholder .of-hub-section-header {
    margin-bottom: 20px;
    padding-bottom: 0;
    border-bottom: none;
}
.of-hub-section-placeholder .of-hub-section-title {
    color: #e0e0e0;
    font-size: 1.15rem;
}
.of-hub-placeholder-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}
.of-hub-placeholder-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}
.of-hub-placeholder-card {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 20px 16px;
    text-align: center;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.of-hub-placeholder-card:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(124, 58, 237, 0.2);
}
.of-hub-placeholder-icon {
    font-size: 2rem;
    margin-bottom: 10px;
    line-height: 1;
    filter: grayscale(30%);
}
.of-hub-placeholder-card h3 {
    font-size: 0.92rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 6px;
}
.of-hub-placeholder-card p {
    font-size: 0.78rem;
    color: #a6a6a6;
    margin: 0;
    line-height: 1.4;
}
.of-hub-placeholder-note {
    text-align: center;
    font-size: 0.78rem;
    color: rgba(124, 58, 237, 0.7);
    margin: 12px 0 0;
    font-style: italic;
}

/* Responsive placeholder grids */
@media (max-width: 980px) {
    .of-hub-placeholder-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .of-hub-placeholder-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .of-hub-placeholder-grid,
    .of-hub-placeholder-grid-4 {
        grid-template-columns: 1fr;
    }
    .of-hub-section-placeholder {
        padding: 24px 16px;
    }
    .of-hub-placeholder-card {
        padding: 16px 12px;
    }
}

/* ===== 404 Error Page ===== */
.of-error-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 48px 24px;
}
.of-error-inner {
    text-align: center;
    max-width: 520px;
}
.of-error-icon {
    font-size: 4rem;
    margin-bottom: 16px;
    line-height: 1;
    opacity: 0.8;
}
.of-error-title {
    font-size: 2rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 12px;
}
.of-error-message {
    font-size: 1rem;
    color: #a6a6a6;
    margin: 0 0 24px;
    line-height: 1.5;
}
.of-error-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 32px;
    flex-wrap: wrap;
}
.of-error-links {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding-top: 20px;
}
.of-error-links p {
    font-size: 0.84rem;
    color: #666;
    margin: 0 0 10px;
}
.of-error-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}
.of-error-links a {
    color: #cca6ff;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
}
.of-error-links a:hover {
    text-decoration: underline;
}

/* ===== Search Results ===== */
.of-search-grid {
    display: grid;
    gap: 16px;
    margin-bottom: 24px;
}
.of-search-card {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 18px 20px;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.of-search-card:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(124, 58, 237, 0.2);
}
.of-search-card-type {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #cca6ff;
    background: rgba(124, 58, 237, 0.12);
    padding: 2px 8px;
    border-radius: 6px;
    margin-bottom: 8px;
}
.of-search-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 6px;
}
.of-search-card-title a {
    color: #ffffff;
    text-decoration: none;
}
.of-search-card-title a:hover {
    color: #cca6ff;
}
.of-search-card-excerpt {
    font-size: 0.85rem;
    color: #a6a6a6;
    margin: 0 0 8px;
    line-height: 1.5;
}
.of-search-card-meta {
    font-size: 0.78rem;
    color: #666;
}
.of-search-empty {
    text-align: center;
    padding: 48px 24px;
}
.of-search-empty-icon {
    font-size: 3rem;
    margin-bottom: 12px;
    opacity: 0.6;
}
.of-search-empty p {
    color: #a6a6a6;
    margin: 0 0 20px;
    font-size: 0.92rem;
}
.of-search-empty-links {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Phase F: Sport Badge Colors ── */
.sport-badge-football { color: #3fb950; }
.sport-badge-basketball { color: #f97316; }
.sport-badge-tennis { color: #fbbf24; }
.sport-badge-baseball { color: #ef4444; }
.sport-badge-hockey { color: #60a5fa; }
.sport-badge-esports { color: #a78bfa; }
.sport-badge-mma { color: #f43f5e; }

/* ── Phase E: Article & Page Layout ── */
/* Phase 7: single column — global right sidebar handles widgets */
.of-article-layout,
.of-single-wrap {
    display: block;
    max-width: none;
    padding: 24px 28px 48px;
}
.of-article-main {
    min-width: 0;
}
.of-article-header {
    margin-bottom: 28px;
}
.of-article-cats {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.of-article-cat {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--of-primary-light);
    background: var(--of-odds-highlight);
    padding: 3px 10px;
    border-radius: 6px;
    text-decoration: none;
}
.of-article-cat:hover {
    background: rgba(124, 58, 237, 0.25);
}
.of-article-title {
    font-family: 'Inter', 'OddsForge Display', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    color: var(--of-text) !important;
    line-height: 1.25;
    margin: 0 0 14px;
}
.of-article-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--of-muted);
}
.of-article-author {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.of-article-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}
.of-article-reading-time {
    color: var(--of-primary);
    font-weight: 600;
}
.of-article-featured-img {
    margin: 0 0 28px;
    border-radius: var(--of-radius-card);
    overflow: hidden;
}
.of-article-featured-img img {
    width: 100%;
    height: auto;
    display: block;
}
.of-article-content {
    color: var(--of-text) !important;
    line-height: 1.75;
    font-size: 1rem;
}
.of-article-content p,
.of-article-content li,
.of-article-content span,
.of-article-content strong,
.of-article-content em {
    color: var(--of-text) !important;
}
.of-article-content h2,
.of-article-content h3,
.of-article-content h4 {
    font-family: 'Inter', 'OddsForge Display', sans-serif;
    color: var(--of-text) !important;
    margin: 2em 0 0.75em;
}
.of-article-content h2 { font-size: 1.5rem; }
.of-article-content h3 { font-size: 1.25rem; }
.of-article-content p { margin: 0 0 1.25em; }
.of-article-content a {
    color: var(--of-primary-light);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.of-article-content a:hover {
    color: var(--of-primary);
}
.of-article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}
.of-article-content blockquote {
    margin: 1.5em 0;
    padding: 16px 20px;
    border-left: 3px solid var(--of-primary);
    background: var(--of-panel);
    border-radius: 0 8px 8px 0;
    color: var(--of-text);
    font-style: italic;
}
.of-article-content ul,
.of-article-content ol {
    margin: 0 0 1.25em;
    padding-left: 1.5em;
}
.of-article-content li {
    margin-bottom: 0.5em;
}
.of-article-footer {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--of-border);
}
.of-article-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.of-article-tag {
    font-size: 0.82rem;
    color: var(--of-muted);
    text-decoration: none;
    padding: 4px 10px;
    background: var(--of-panel);
    border-radius: 6px;
    border: 1px solid var(--of-border);
    transition: color 0.15s, border-color 0.15s;
}
.of-article-tag:hover {
    color: var(--of-primary-light);
    border-color: rgba(124, 58, 237, 0.3);
}
.of-article-nav {
    display: flex;
    gap: 16px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--of-border);
}
.of-article-nav-link {
    flex: 1;
    padding: 14px 16px;
    background: var(--of-panel);
    border: 1px solid var(--of-border);
    border-radius: 8px;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}
.of-article-nav-link:hover {
    border-color: rgba(124, 58, 237, 0.3);
    background: var(--of-panel-2);
}
.of-article-nav-label {
    display: block;
    font-size: 0.75rem;
    color: var(--of-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}
.of-article-nav-title {
    display: block;
    font-size: 0.9rem;
    color: var(--of-text);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.of-article-nav-next {
    text-align: right;
}

/* ── Old Article Sidebar (removed in Phase 7 — global right sidebar) ── */
.of-article-sidebar {
    display: none;
}
.of-sidebar-widget {
    background: var(--of-panel);
    border: 1px solid var(--of-border);
    border-radius: var(--of-radius-card);
    padding: 20px;
}
.of-sidebar-title {
    font-family: 'Inter', 'OddsForge Display', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--of-text);
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--of-border);
}
.of-sidebar-widget p {
    font-size: 0.88rem;
    color: var(--of-muted);
    margin: 0 0 14px;
    line-height: 1.55;
}
.of-sidebar-posts {
    list-style: none;
    padding: 0;
    margin: 0;
}
.of-sidebar-posts li {
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}
.of-sidebar-posts li:last-child {
    border-bottom: none;
}
.of-sidebar-posts a {
    display: block;
    font-size: 0.88rem;
    color: var(--of-text);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s;
}
.of-sidebar-posts a:hover {
    color: var(--of-primary-light);
}
.of-sidebar-post-date {
    display: block;
    font-size: 0.75rem;
    color: var(--of-muted);
    margin-top: 2px;
}
.of-sidebar-sportsbooks {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.of-sidebar-sb-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    border: 1px solid var(--of-border);
}
.of-sidebar-sb-item strong {
    flex: 1;
    font-size: 0.85rem;
    color: var(--of-text);
}
.of-sidebar-sb-bonus {
    font-size: 0.72rem;
    color: var(--of-primary);
    font-weight: 600;
    display: none;
}
.of-sidebar-sb-cta {
    font-size: 0.72rem;
    font-weight: 700;
    color: #1a161d;
    background: var(--of-primary);
    padding: 4px 10px;
    border-radius: 6px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.of-sidebar-sb-cta:hover {
    background: var(--of-primary-light);
}

/* ── Blog Archive ── */
.of-archive-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 20px 48px;
}
.of-archive-header {
    margin-bottom: 32px;
}
.of-archive-title {
    font-family: 'Inter', 'OddsForge Display', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    color: var(--of-text) !important;
    margin: 0 0 8px;
}
.of-archive-desc {
    color: var(--of-muted);
    font-size: 1rem;
    margin: 0 0 20px;
    max-width: 600px;
}
.of-archive-cats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 16px;
}
.of-archive-cat-link {
    display: inline-block;
    padding: 6px 14px;
    border-radius: var(--of-radius-pill);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--of-text-secondary);
    background: var(--of-panel);
    border: 1px solid var(--of-border);
    text-decoration: none;
    transition: all 0.15s ease;
}
.of-archive-cat-link:hover {
    color: var(--of-primary-light);
    border-color: var(--of-primary);
}
.of-archive-cat-link.active {
    background: var(--of-odds-highlight);
    color: var(--of-primary-light);
    border-color: var(--of-primary);
}
.of-archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}
.of-archive-card {
    background: var(--of-panel);
    border: 1px solid var(--of-border);
    border-radius: var(--of-radius-card);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.of-archive-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--of-shadow-card-hover);
}
.of-archive-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.of-archive-card-img {
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--of-panel-2);
}
.of-archive-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.of-archive-card:hover .of-archive-card-img img {
    transform: scale(1.04);
}
.of-archive-card-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--of-panel-2), var(--of-dark));
}
.of-archive-card-img-placeholder span {
    font-family: 'Inter', 'OddsForge Display', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: rgba(124, 58, 237, 0.2);
    letter-spacing: 0.05em;
}
.of-archive-card-body {
    padding: 16px 20px 20px;
}
.of-archive-card-cat {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--of-primary-light);
    background: var(--of-odds-highlight);
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
}
.of-archive-card-title {
    font-family: 'Inter', 'OddsForge Display', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--of-text) !important;
    line-height: 1.35;
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.of-archive-card:hover .of-archive-card-title {
    color: var(--of-primary-light) !important;
}
.of-archive-card-excerpt {
    font-size: 0.85rem;
    color: var(--of-muted);
    line-height: 1.5;
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.of-archive-card-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--of-muted);
}
.of-archive-card-read {
    color: var(--of-primary);
    font-weight: 600;
}
.of-archive-pagination {
    margin-top: 40px;
    text-align: center;
}
.of-archive-pagination .page-numbers {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 0;
    margin: 0;
}
.of-archive-pagination .page-numbers li {
    display: inline;
}
.of-archive-pagination .page-numbers a,
.of-archive-pagination .page-numbers span {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--of-text-secondary);
    background: var(--of-panel);
    border: 1px solid var(--of-border);
    text-decoration: none;
    transition: all 0.15s;
}
.of-archive-pagination .page-numbers a:hover {
    color: var(--of-primary-light);
    border-color: var(--of-primary);
}
.of-archive-pagination .page-numbers .current {
    background: var(--of-odds-highlight);
    color: var(--of-primary-light);
    border-color: var(--of-primary);
}
.of-archive-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--of-muted);
    font-size: 1rem;
}
@media (max-width: 768px) {
    .of-archive-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .of-archive-page {
        padding: 20px 16px 40px;
    }
}

/* ── Full-width Page Layout ── */
.of-page-full {
    max-width: 900px;
    margin: 0 auto;
    padding: 32px 20px 48px;
}
.of-page-header {
    margin-bottom: 24px;
}
.of-page-title {
    font-family: 'Inter', 'OddsForge Display', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    color: var(--of-text);
    margin: 0;
}
.of-page-body {
    color: var(--of-text);
    line-height: 1.75;
    font-size: 1rem;
}
.of-page-body h2,
.of-page-body h3 {
    font-family: 'Inter', 'OddsForge Display', sans-serif;
    color: var(--of-text);
}
.of-page-body a {
    color: var(--of-primary-light);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Archive Filters ── */
.of-archive-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    margin-bottom: 24px;
    padding: 16px 20px;
    background: var(--of-panel);
    border: 1px solid var(--of-border);
    border-radius: var(--of-radius-card);
}
.of-filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.of-filter-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--of-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.of-filter-pill {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--of-muted);
    background: rgba(0, 0, 0, 0.03);
    padding: 5px 14px;
    border-radius: 999px;
    border: 1px solid var(--of-border);
    text-decoration: none;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.of-filter-pill:hover {
    color: var(--of-text);
    border-color: rgba(124, 58, 237, 0.3);
    background: rgba(124, 58, 237, 0.08);
}
.of-filter-pill.is-active {
    color: var(--of-primary);
    background: var(--of-odds-highlight);
    border-color: rgba(124, 58, 237, 0.4);
}

/* ── Archive Layout ── */
.of-archive {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 20px 48px;
}
.of-archive-header {
    margin-bottom: 24px;
}
.of-archive-header h1 {
    font-family: 'Inter', 'OddsForge Display', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: var(--of-text);
    margin: 0 0 8px;
}
.of-archive-header p {
    color: var(--of-muted);
    font-size: 0.95rem;
    margin: 0;
    max-width: 600px;
}
.of-archive-pagination {
    margin-top: 32px;
    text-align: center;
}
.of-archive-pagination .nav-links {
    display: flex;
    justify-content: center;
    gap: 6px;
}
.of-archive-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--of-muted);
    background: var(--of-panel);
    border: 1px solid var(--of-border);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.15s;
}
.of-archive-pagination .page-numbers:hover {
    color: var(--of-text);
    border-color: rgba(124, 58, 237, 0.3);
}
.of-archive-pagination .page-numbers.current {
    color: var(--of-primary);
    background: var(--of-odds-highlight);
    border-color: rgba(124, 58, 237, 0.4);
}

/* ── Archive Page (card grid) ── */
.of-archive-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 20px 48px;
}
.of-archive-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
.of-archive-cat-link {
    display: inline-block;
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--of-muted);
    background: var(--of-panel);
    border: 1px solid var(--of-border);
    border-radius: 999px;
    text-decoration: none;
    transition: all 0.15s;
}
.of-archive-cat-link:hover {
    color: var(--of-text);
    border-color: rgba(124, 58, 237, 0.3);
    background: rgba(124, 58, 237, 0.08);
}
.of-archive-cat-link.active {
    color: var(--of-primary);
    background: var(--of-odds-highlight);
    border-color: rgba(124, 58, 237, 0.4);
}
.of-archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 24px;
}
.of-archive-card {
    background: var(--of-panel);
    border: 1px solid var(--of-border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.of-archive-card:hover {
    border-color: rgba(124, 58, 237, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.of-archive-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.of-archive-card-img {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--of-dark);
}
.of-archive-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.of-archive-card:hover .of-archive-card-img img {
    transform: scale(1.04);
}
.of-archive-card-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--of-panel) 0%, var(--of-dark) 100%);
}
.of-archive-card-img-placeholder span {
    font-family: 'Inter', 'OddsForge Display', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: rgba(124, 58, 237, 0.25);
    letter-spacing: 0.04em;
}
.of-archive-card-body {
    padding: 16px;
}
.of-archive-card-cat {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--of-primary);
    background: var(--of-odds-highlight);
    padding: 3px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
}
.of-archive-card-title {
    font-family: 'Inter', 'OddsForge Display', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--of-text);
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.of-archive-card-excerpt {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--of-muted);
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.of-archive-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.75rem;
    color: var(--of-muted);
}
.of-archive-card-meta time {
    color: var(--of-muted);
}
.of-archive-card-read::before {
    content: '·';
    margin-right: 12px;
}
.of-archive-empty {
    text-align: center;
    padding: 64px 20px;
    color: var(--of-muted);
    font-size: 1.05rem;
}

/* ── Tips Grid ── */
.of-tips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
}

/* ── Responsive: Article Layout ── */
/* Phase 7: old 2-col breakpoint removed (no per-page sidebar) */
@media (max-width: 640px) {
    .of-article-layout,
    .of-single-wrap {
        padding: 16px 14px 32px;
    }
    .of-article-nav {
        flex-direction: column;
    }
    .of-article-nav-next {
        text-align: left;
    }
    .of-archive,
    .of-archive-page {
        padding: 20px 16px 32px;
    }
    .of-archive-filters {
        padding: 12px 14px;
        gap: 10px 16px;
    }
    .of-archive-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .of-tips-grid {
        grid-template-columns: 1fr;
    }
    .of-page-full {
        padding: 20px 16px 32px;
    }
}

/* ===== Mobile Polish: 480px ===== */
@media (max-width: 480px) {
    /* Hero */
    .of-hero-banner {
        padding: 28px 18px;
    }
    .of-hero-actions .of-btn {
        min-width: 0;
        width: 100%;
        text-align: center;
    }
    .of-hero-affiliate {
        padding: 16px 0 12px;
        gap: 16px;
    }
    .of-hero-aff-title {
        font-size: clamp(1.3rem, 5vw, 1.8rem);
    }
    .of-hero-aff-sub {
        font-size: 0.88rem;
    }
    .of-hero-aff-stats {
        gap: 12px;
    }
    .of-hero-aff-stat {
        font-size: 0.8rem;
    }
    .of-hero-aff-stat strong {
        font-size: 0.95rem;
    }
    /* Category grid: 2 columns */
    .of-hero-aff-categories {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    .of-hero-cat {
        padding: 10px 6px;
        font-size: 0.72rem;
        gap: 4px;
    }
    .of-hero-cat-icon {
        font-size: 1.1rem;
    }
    /* Filter tabs: horizontal scroll */
    .of-filter-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 2px;
        padding-bottom: 4px;
    }
    .of-filter-tabs::-webkit-scrollbar {
        display: none;
    }
    .of-filter-tab {
        white-space: nowrap;
        flex-shrink: 0;
        font-size: 0.75rem;
        padding: 6px 10px;
    }
    /* Sections */
    .of-hub-section {
        margin-top: 20px;
        padding-top: 20px;
    }
    .of-hub-section-title {
        font-size: 1rem;
    }
    /* Sportsbook cards */
    .of-hub-sb-card {
        padding: 14px 12px;
    }
    .of-hub-sb-bonus {
        font-size: 0.78rem;
        padding: 3px 8px;
    }
    /* Bonus cards */
    .of-hub-bonus-card {
        padding: 14px 12px;
    }
    .of-hub-bonus-title {
        font-size: 0.85rem;
    }
    /* CTA */
    .of-hub-cta-signup {
        padding: 24px 14px;
    }
    .of-hub-cta-inner h2 {
        font-size: 1.1rem;
    }
    .of-hub-cta-inner p {
        font-size: 0.82rem;
    }
    .of-hub-cta-actions .of-btn {
        width: 100%;
        text-align: center;
        min-width: 0;
    }
    /* Match table: ultra-compact on small phones */
    .of-mtr {
        grid-template-columns: 1fr 38px 38px 38px 34px;
        padding: 5px 8px;
    }
    .of-mtr-teams { font-size: 0.75rem; }
    .of-mtr-vs { display: none; }
    .of-mtr-odd { font-size: 0.7rem; min-width: 34px; }
    .of-mtr-bet { font-size: 0.6rem; min-width: 30px; padding: 2px 3px; }
    .of-mtl-header { padding: 8px 10px; font-size: 0.82rem; }
    /* How It Works */
    .of-hiw-step {
        padding: 12px;
        gap: 10px;
    }
    .of-hiw-icon {
        width: 44px;
        height: 44px;
    }
    .of-hiw-icon svg {
        width: 22px;
        height: 22px;
    }
    .of-hiw-step h3 {
        font-size: 0.9rem;
    }
    .of-hiw-step p {
        font-size: 0.8rem;
    }
    /* Game banner */
    .of-hub-game-banner {
        padding: 20px 16px;
    }
    .of-game-banner-text h3 {
        font-size: 1rem;
    }
    .of-game-banner-text p {
        font-size: 0.8rem;
    }
    .of-hub-game-banner .of-btn-cta {
        width: 100%;
        text-align: center;
        min-width: 0;
        padding: 10px 20px;
        font-size: 0.88rem;
    }
    /* Landing pages */
    .of-sb-landing .of-sb-landing-cta {
        padding: 20px;
    }
    .of-sb-landing .of-sb-landing-cta .of-btn {
        display: block;
        width: 100%;
        text-align: center;
        margin: 6px 0;
    }
    /* Footer */
    .site-footer .footer-inner {
        padding: 16px 12px;
    }
    .site-footer h4 {
        font-size: 0.88rem;
    }
    .site-footer a {
        font-size: 0.82rem;
    }
    .footer-legal {
        font-size: 0.72rem;
        padding: 12px;
    }
    /* Nav dropdown on mobile */
    .site-nav {
        max-height: calc(100vh - 80px);
        overflow-y: auto;
    }
    /* Breadcrumbs */
    .of-breadcrumbs {
        padding: 8px 14px;
        font-size: 0.75rem;
    }
    /* Crypto cards */
    .of-hub-crypto-grid {
        grid-template-columns: 1fr 1fr;
    }
    .of-hub-crypto-card {
        padding: 14px 10px;
    }
    /* News slider */
    .of-hub-news-card {
        min-width: 85%;
    }
}

/* ===== Mobile Polish: 375px (iPhone SE / Galaxy S21) ===== */
@media (max-width: 390px) {
    /* Hub inner padding */
    .of-hub-inner {
        padding: 12px 10px 24px;
    }
    /* Hero */
    .of-hero-banner {
        padding: 22px 14px;
    }
    .of-hero-title {
        font-size: clamp(1.3rem, 6vw, 1.8rem);
    }
    .of-hero-sub {
        font-size: 0.85rem;
    }
    .of-hero-stats {
        gap: 14px;
    }
    .of-hero-stat {
        font-size: 0.78rem;
    }
    .of-hero-stat strong {
        font-size: 1.05rem;
    }
    .of-hero-affiliate {
        padding: 12px 0 8px;
        gap: 14px;
    }
    .of-hero-aff-sub {
        font-size: 0.82rem;
    }
    .of-hero-aff-stats {
        gap: 8px;
    }
    .of-hero-aff-stat {
        font-size: 0.75rem;
    }
    .of-hero-aff-stat strong {
        font-size: 0.88rem;
    }
    /* Category grid */
    .of-hero-aff-categories {
        gap: 5px;
    }
    .of-hero-cat {
        padding: 8px 4px;
        font-size: 0.68rem;
        gap: 3px;
        border-radius: 8px;
    }
    .of-hero-cat-icon {
        font-size: 1rem;
    }
    /* Filter bar */
    .of-filter-bar {
        gap: 8px;
        padding: 10px 0;
    }
    .of-filter-disclosure {
        font-size: 0.7rem;
    }
    .of-filter-tab {
        font-size: 0.72rem;
        padding: 5px 8px;
    }
    /* Section spacing */
    .of-hub-section {
        margin-top: 16px;
        padding-top: 16px;
    }
    .of-hub-section-header {
        margin-bottom: 10px;
    }
    .of-hub-section-title {
        font-size: 0.95rem;
    }
    .of-hub-section-link {
        font-size: 0.75rem;
    }
    /* Tips grid */
    .of-hub-tip-card {
        border-radius: 10px;
    }
    .of-hub-tip-header,
    .of-hub-tip-title,
    .of-hub-tip-bet,
    .of-hub-tip-meta {
        padding-left: 10px;
        padding-right: 10px;
    }
    .of-hub-tip-title a {
        font-size: 0.85rem;
    }
    .of-hub-tip-excerpt {
        font-size: 0.75rem;
    }
    /* Sportsbook cards */
    .of-hub-sb-card {
        padding: 12px 10px;
        gap: 6px;
    }
    .of-hub-sb-name {
        font-size: 0.88rem;
    }
    .of-hub-sb-rating {
        font-size: 0.82rem;
    }
    .of-hub-sb-bonus {
        font-size: 0.75rem;
        padding: 3px 6px;
    }
    /* Bonus cards */
    .of-hub-bonus-card {
        padding: 12px 10px;
        gap: 6px;
    }
    .of-hub-bonus-title {
        font-size: 0.82rem;
    }
    .of-hub-bonus-value {
        font-size: 0.8rem;
    }
    .of-hub-bonus-code {
        font-size: 0.7rem;
        padding: 2px 8px;
    }
    .of-hub-bonus-action .of-btn-cta {
        font-size: 0.75rem;
        padding: 7px 14px;
    }
    /* CTA section */
    .of-hub-cta-signup {
        padding: 20px 12px;
        margin-top: 20px;
    }
    .of-hub-cta-inner h2 {
        font-size: 1rem;
    }
    .of-hub-cta-inner p {
        font-size: 0.78rem;
    }
    .of-hub-cta-actions {
        gap: 8px;
    }
    .of-hub-cta-actions .of-btn {
        padding: 10px 16px;
        font-size: 0.82rem;
    }
    /* Crypto cards */
    .of-hub-crypto-grid {
        gap: 10px;
    }
    .of-hub-crypto-card {
        padding: 12px 8px;
    }
    .of-hub-crypto-logo-wrap {
        height: 44px;
        margin-bottom: 4px;
    }
    .of-hub-crypto-logo {
        height: 36px;
    }
    .of-hub-crypto-name {
        font-size: 0.82rem;
    }
    .of-hub-crypto-bonus {
        font-size: 0.72rem;
    }
    /* Footer */
    .site-footer .footer-inner {
        padding: 14px 10px;
    }
    .footer-legal {
        padding: 10px;
        font-size: 0.68rem;
    }
    /* Header tighter */
    .site-header .header-inner {
        padding: 6px 8px;
        gap: 4px;
    }
    .site-logo img,
    .site-logo .of-logo-svg {
        height: 28px;
    }
    .nav-toggle {
        width: 38px;
        height: 38px;
    }
    /* Sport nav */
    .sport-tab {
        padding: 6px 8px;
        font-size: 0.72rem;
    }
    /* Mobile bottom nav */
    .mobile-nav-item {
        font-size: 0.6rem;
        padding: 4px 2px;
    }
    /* Game banner */
    .of-hub-game-banner {
        padding: 16px 12px;
    }
    .of-game-banner-text h3 {
        font-size: 0.92rem;
    }
    .of-game-banner-text p {
        font-size: 0.78rem;
    }
    /* Trust signals */
    .of-trust-signals {
        padding: 16px 0;
    }
    /* Disclosure */
    .of-disclosure-inline {
        font-size: 0.65rem;
    }
}

/* ==========================================================================
   PINNACLE ODDS DROPPER — Affiliate Integration
   ========================================================================== */

/* --- Shared blue CTA button (tool-specific) --- */
.of-btn-tool {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff !important;
    padding: 9px 20px;
    border-radius: var(--of-radius-btn, 9999px);
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    display: inline-block;
    transition: opacity 0.15s ease, transform 0.15s ease;
    white-space: nowrap;
}
.of-btn-tool:hover {
    opacity: 0.88;
    transform: translateY(-1px);
    color: #ffffff !important;
}

/* --- Right Sidebar Tool Widget --- */
.of-rsb-tool-pod {
    background: linear-gradient(135deg, #0f1a2e 0%, #0a1628 100%);
    border: 1px solid rgba(59, 130, 246, 0.3);
}
.of-rsb-tool-inner {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.of-rsb-tool-badge {
    display: inline-block;
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 4px;
    width: fit-content;
    margin-bottom: 2px;
}
.of-rsb-tool-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--of-text);
    margin: 0;
}
.of-rsb-tool-desc {
    font-size: 0.72rem;
    color: var(--of-muted);
    margin: 0;
    line-height: 1.4;
}
.of-rsb-tool-features {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.of-rsb-tool-features li {
    font-size: 0.70rem;
    color: var(--of-text-secondary, #a6a6a6);
    padding-left: 14px;
    position: relative;
}
.of-rsb-tool-features li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: #60a5fa;
    font-weight: 700;
}
.of-rsb-tool-cta {
    display: block;
    margin-top: 8px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff !important;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    text-align: center;
    transition: opacity 0.12s ease;
}
.of-rsb-tool-cta:hover {
    opacity: 0.88;
    color: #ffffff !important;
}

/* --- Homepage Feature Card --- */
.of-hub-tool-banner .of-pod-feature-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    background: linear-gradient(135deg, #0d1b35 0%, #101728 50%, #0f1a2e 100%);
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: var(--of-radius-card, 12px);
    padding: 24px;
    margin-bottom: 8px;
    align-items: start;
}
.of-pod-label {
    display: inline-block;
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 3px 10px;
    border-radius: 4px;
    margin-bottom: 8px;
}
.of-pod-name {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--of-text);
    margin: 0 0 6px;
}
.of-pod-tagline {
    font-size: 0.85rem;
    color: var(--of-muted);
    margin: 0 0 12px;
    line-height: 1.5;
    max-width: 480px;
}
.of-pod-bullets {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.of-pod-bullets li {
    font-size: 0.8rem;
    color: var(--of-text-secondary, #a6a6a6);
    padding-left: 18px;
    position: relative;
}
.of-pod-bullets li::before {
    content: '\2714';
    position: absolute;
    left: 0;
    color: #60a5fa;
    font-weight: 700;
}
.of-pod-card-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.of-pod-card-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 120px;
    padding: 4px 0;
}
.of-pod-stat {
    text-align: center;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 8px;
    padding: 10px 14px;
}
.of-pod-stat-value {
    display: block;
    font-size: 1.1rem;
    font-weight: 800;
    color: #60a5fa;
}
.of-pod-stat-label {
    display: block;
    font-size: 0.65rem;
    color: var(--of-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}

/* --- Guide Page Inline CTA --- */
.of-guide-tool-cta {
    background: linear-gradient(135deg, #0d1b35 0%, #101728 100%);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-left: 3px solid #2563eb;
    border-radius: 10px;
    padding: 20px 22px;
    margin: 32px 0 0;
}
.of-gtc-inner {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.of-gtc-left {
    flex: 1;
    min-width: 200px;
}
.of-gtc-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex-shrink: 0;
}
.of-gtc-eyebrow {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #60a5fa;
    margin-bottom: 4px;
}
.of-gtc-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--of-text);
    margin: 0 0 6px;
}
.of-gtc-desc {
    font-size: 0.8rem;
    color: var(--of-muted);
    margin: 0;
    line-height: 1.5;
}
.of-gtc-review-link {
    font-size: 0.72rem;
    color: #60a5fa;
    text-decoration: underline;
}
.of-gtc-disclosure {
    font-size: 0.62rem;
    color: var(--of-muted);
}
.of-gtc-disclosure a {
    color: inherit;
    text-decoration: underline;
}

/* --- POD Responsive --- */
@media (max-width: 640px) {
    .of-hub-tool-banner .of-pod-feature-card {
        grid-template-columns: 1fr;
        padding: 18px;
    }
    .of-pod-card-right {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .of-pod-stat {
        flex: 1;
        min-width: 80px;
    }
    .of-pod-name {
        font-size: 1.05rem;
    }
    .of-pod-tagline {
        font-size: 0.8rem;
    }
    .of-gtc-inner {
        flex-direction: column;
        gap: 12px;
    }
    .of-gtc-right {
        width: 100%;
    }
}

/* ======================================================================
   PHASE 15: LEAGUE STANDINGS & TOP SCORERS
   ====================================================================== */

/* --- Standings Table --- */
.of-standings-wrap {
    margin: 24px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.of-standings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.of-standings-header h3 {
    margin: 0;
    font-size: 1.15rem;
    color: #fff;
}
.of-standings-header a {
    color: #f5c518;
    font-size: 0.85rem;
    text-decoration: none;
}
.of-standings-header a:hover {
    text-decoration: underline;
}
.of-standings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    background: #1a1f2e;
    border-radius: 8px;
    overflow: hidden;
}
.of-standings-table th {
    background: #141824;
    color: #8a8fa3;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    padding: 10px 8px;
    text-align: center;
    white-space: nowrap;
    border-bottom: 1px solid #252a3a;
}
.of-standings-table th:nth-child(2) {
    text-align: left;
}
.of-standings-table td {
    padding: 8px;
    text-align: center;
    color: #c8ccd8;
    border-bottom: 1px solid #1e2336;
    white-space: nowrap;
}
.of-standings-table td:nth-child(2) {
    text-align: left;
}
.of-standings-table tr:nth-child(even) {
    background: #161b28;
}
.of-standings-table tr:hover {
    background: #1e2540;
}

/* Position number */
.of-standings-pos {
    display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.75rem;
}

/* Zone highlighting */
.of-zone-cl .of-standings-pos { background: #1a73e8; color: #fff; }
.of-zone-el .of-standings-pos { background: #f57c00; color: #fff; }
.of-zone-conf .of-standings-pos { background: #43a047; color: #fff; }
.of-zone-rel .of-standings-pos { background: #e53935; color: #fff; }

/* Team name cell */
.of-standings-team {
    display: flex;
    align-items: center;
    gap: 8px;
}
.of-standings-team img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.of-standings-team a {
    color: #e0e4f0;
    text-decoration: none;
    font-weight: 500;
}
.of-standings-team a:hover {
    color: #f5c518;
}

/* Form dots (W/D/L) */
.of-standings-form {
    display: flex;
    gap: 3px;
    justify-content: center;
}
.of-form-dot {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: #fff;
}
.of-form-dot-w { background: #43a047; }
.of-form-dot-d { background: #f9a825; }
.of-form-dot-l { background: #e53935; }

/* Points column emphasis */
.of-standings-table td.of-pts {
    font-weight: 700;
    color: #fff;
    font-size: 0.9rem;
}

/* Updated timestamp */
.of-standings-updated {
    text-align: right;
    font-size: 0.75rem;
    color: #5a5e70;
    margin-top: 8px;
}

/* --- Top Scorers Table --- */
.of-scorers-wrap {
    margin: 24px 0;
}
.of-scorers-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    background: #1a1f2e;
    border-radius: 8px;
    overflow: hidden;
}
.of-scorers-table th {
    background: #141824;
    color: #8a8fa3;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    padding: 10px 8px;
    text-align: center;
    white-space: nowrap;
    border-bottom: 1px solid #252a3a;
}
.of-scorers-table th:nth-child(2) {
    text-align: left;
}
.of-scorers-table td {
    padding: 8px;
    text-align: center;
    color: #c8ccd8;
    border-bottom: 1px solid #1e2336;
}
.of-scorers-table td:nth-child(2) {
    text-align: left;
}
.of-scorers-table tr:nth-child(even) {
    background: #161b28;
}
.of-scorers-table tr:hover {
    background: #1e2540;
}
.of-scorers-rank {
    display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.75rem;
    background: #252a3a;
    color: #f5c518;
}
.of-scorers-rank-1 { background: #f5c518; color: #141824; }
.of-scorers-rank-2 { background: #b0bec5; color: #141824; }
.of-scorers-rank-3 { background: #a1887f; color: #141824; }
.of-scorers-player {
    display: flex;
    align-items: center;
    gap: 8px;
}
.of-scorers-player img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    background: #252a3a;
}
.of-scorers-name {
    display: flex;
    flex-direction: column;
}
.of-scorers-name strong {
    color: #e0e4f0;
    font-size: 0.85rem;
}
.of-scorers-name small {
    color: #6b7080;
    font-size: 0.72rem;
}
.of-scorers-goals {
    font-weight: 700;
    color: #f5c518;
    font-size: 0.95rem;
}

/* --- League Position Badge (Team Hub) --- */
.of-league-position-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #1e2540;
    border: 1px solid #252a3a;
    border-radius: 8px;
    padding: 8px 14px;
    margin: 8px 0;
    font-size: 0.85rem;
    color: #c8ccd8;
}
.of-league-position-badge .of-pos-num {
    font-size: 1.3rem;
    font-weight: 800;
    color: #f5c518;
}
.of-league-position-badge .of-pos-suffix {
    font-size: 0.7rem;
    color: #f5c518;
    vertical-align: super;
}

/* --- Full Standings Page --- */
.of-page-standings {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 16px;
}
.of-page-standings h1 {
    font-size: 1.6rem;
    margin-bottom: 16px;
    color: #fff;
}
.of-page-standings .of-standings-table th,
.of-page-standings .of-standings-table td {
    padding: 10px 10px;
}

/* --- Full Stats Page --- */
.of-page-stats {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 16px;
}
.of-page-stats h1 {
    font-size: 1.6rem;
    margin-bottom: 16px;
    color: #fff;
}
.of-page-stats h2 {
    font-size: 1.2rem;
    margin: 28px 0 12px;
    color: #e0e4f0;
    border-bottom: 1px solid #252a3a;
    padding-bottom: 8px;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .of-standings-table {
        font-size: 0.78rem;
    }
    .of-standings-table th,
    .of-standings-table td {
        padding: 6px 4px;
    }
    .of-standings-team img {
        width: 16px;
        height: 16px;
    }
    .of-standings-table .of-col-hide-mobile {
        display: none;
    }
    .of-scorers-table {
        font-size: 0.78rem;
    }
    .of-scorers-player img {
        width: 22px;
        height: 22px;
    }
}
@media (max-width: 480px) {
    .of-standings-form {
        display: none;
    }
    .of-standings-table .of-col-hide-sm {
        display: none;
    }
    .of-scorers-table .of-col-hide-sm {
        display: none;
    }
}

/* ============================================================
   PHASE 16 SHARED — PAGE NAV TABS
   ============================================================ */
.of-page-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--of-border);
}
.of-page-nav-item {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--of-text-secondary);
    background: var(--of-panel);
    border: 1px solid var(--of-border);
    text-decoration: none;
    transition: all 0.15s;
    white-space: nowrap;
}
.of-page-nav-item:hover {
    background: var(--of-panel-2);
    color: var(--of-text);
    border-color: var(--of-gold-300);
}
.of-page-nav-active {
    background: var(--of-gold-500);
    color: #000;
    border-color: var(--of-gold-500);
    font-weight: 700;
}
.of-page-nav-active:hover {
    background: var(--of-gold-700);
    color: #000;
}
.of-crosslinks-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 16px;
}
.of-crosslinks-grid a {
    color: var(--of-gold-300);
    text-decoration: none;
    font-size: 0.88rem;
}
.of-crosslinks-grid a:hover {
    text-decoration: underline;
}

/* ============================================================
   PHASE 16A — RESULTS HUB
   ============================================================ */
.of-results-page {
    max-width: 960px;
    margin: 0 auto;
    padding: 16px 16px 48px;
}
.of-results-breadcrumb,
.of-fixtures-breadcrumb,
.of-form-breadcrumb {
    font-size: 0.88rem;
    color: var(--of-muted);
    margin-bottom: 16px;
}
.of-results-breadcrumb a,
.of-fixtures-breadcrumb a,
.of-form-breadcrumb a {
    color: var(--of-gold-300);
    text-decoration: none;
}
.of-results-title,
.of-fixtures-title,
.of-form-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--of-text);
    margin: 0 0 8px;
}
.of-results-desc,
.of-fixtures-desc,
.of-form-desc {
    color: var(--of-text-secondary);
    font-size: 1rem;
    margin: 0 0 24px;
}
.of-results-empty,
.of-fixtures-empty,
.of-form-empty {
    background: var(--of-panel);
    border: 1px solid var(--of-border);
    border-radius: var(--of-radius-card);
    padding: 32px;
    text-align: center;
    color: var(--of-text-secondary);
}
.of-results-group,
.of-fixtures-group {
    margin-bottom: 24px;
}
.of-results-date-header,
.of-fixtures-date-header {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--of-muted);
    padding: 8px 0;
    border-bottom: 1px solid var(--of-border);
    margin-bottom: 4px;
}
.of-results-list,
.of-fixtures-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* Result row */
.of-result-row {
    display: grid;
    grid-template-columns: 90px 1fr auto 1fr auto;
    align-items: center;
    gap: 8px;
    background: var(--of-panel);
    border: 1px solid var(--of-border);
    border-radius: 8px;
    padding: 10px 14px;
    transition: background 0.15s;
}
.of-result-row:hover {
    background: var(--of-panel-2);
}
.of-result-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.of-result-time {
    font-size: 0.78rem;
    color: var(--of-muted);
}
.of-result-league-badge {
    font-size: 0.7rem;
    background: rgba(131,70,212,0.15);
    color: var(--of-gold-300);
    border-radius: 4px;
    padding: 2px 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 88px;
}
.of-result-home,
.of-result-away {
    display: flex;
    align-items: center;
    gap: 8px;
}
.of-result-home {
    justify-content: flex-end;
}
.of-result-away {
    justify-content: flex-start;
}
.of-result-team-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--of-text);
}
.of-result-team--winner .of-result-team-name {
    color: var(--of-primary);
}
.of-result-logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
    border-radius: 2px;
}
.of-result-score {
    text-align: center;
    min-width: 70px;
}
.of-result-score-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-decoration: none;
}
.of-result-score-home,
.of-result-score-away {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--of-text);
    min-width: 24px;
    text-align: center;
}
.of-result-score--win {
    color: var(--of-primary);
}
.of-result-score-sep {
    font-size: 1.1rem;
    color: var(--of-muted);
    margin: 0 2px;
}
.of-result-odds {
    display: flex;
    gap: 6px;
    align-items: center;
}
.of-result-odds-cell {
    font-size: 0.78rem;
    color: var(--of-muted);
    background: var(--of-panel-3);
    border-radius: 4px;
    padding: 2px 6px;
    white-space: nowrap;
}
.of-result-odds--hit {
    color: var(--of-success);
    font-weight: 700;
}
.of-results-cta {
    background: var(--of-panel);
    border: 1px solid var(--of-border-gold);
    border-radius: var(--of-radius-card);
    padding: 16px 20px;
    margin: 24px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.of-results-crosslinks,
.of-fixtures-crosslinks {
    margin-top: 32px;
}
.of-results-crosslinks h3,
.of-fixtures-crosslinks h3 {
    font-size: 1rem;
    color: var(--of-text);
    margin-bottom: 8px;
}

@media (max-width: 680px) {
    .of-result-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .of-result-home { justify-content: flex-start; }
    .of-result-odds { display: none; }
    .of-result-meta { flex-direction: row; gap: 8px; }
}

/* ============================================================
   PHASE 16B — FIXTURES HUB
   ============================================================ */
.of-fixtures-page {
    max-width: 960px;
    margin: 0 auto;
    padding: 16px 16px 48px;
}
.of-fixture-row {
    display: grid;
    grid-template-columns: 90px 1fr 120px 90px;
    align-items: center;
    gap: 8px;
    background: var(--of-panel);
    border: 1px solid var(--of-border);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 2px;
    transition: background 0.15s;
}
.of-fixture-row:hover {
    background: var(--of-panel-2);
    border-color: var(--of-border-gold);
}
.of-fixture-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.of-fixture-date {
    font-size: 0.78rem;
    color: var(--of-muted);
    white-space: nowrap;
}
.of-fixture-time {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--of-text);
}
.of-fixture-league {
    font-size: 0.7rem;
    color: var(--of-gold-300);
    background: rgba(131,70,212,0.12);
    border-radius: 4px;
    padding: 2px 5px;
    max-width: 88px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.of-fixture-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    border-radius: 4px;
    padding: 2px 5px;
    white-space: nowrap;
}
.of-fixture-badge--soon {
    background: rgba(223,253,81,0.15);
    color: var(--of-primary);
}
.of-fixture-badge--live {
    background: var(--of-danger);
    color: #fff;
    animation: of-glow-pulse 1.5s infinite;
}
.of-fixture-teams {
    display: flex;
    align-items: center;
    gap: 12px;
}
.of-fixture-home,
.of-fixture-away {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}
.of-fixture-home { justify-content: flex-end; }
.of-fixture-away { justify-content: flex-start; }
.of-fixture-logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
    border-radius: 2px;
}
.of-fixture-vs {
    font-size: 0.75rem;
    color: var(--of-muted);
    font-weight: 600;
    text-transform: uppercase;
    flex-shrink: 0;
}
.of-fixture-odds {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.of-fixture-odds-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--of-muted);
    letter-spacing: 0.4px;
}
.of-fixture-odds-row {
    display: flex;
    gap: 4px;
}
.of-fixture-odd {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--of-panel-3);
    border-radius: 5px;
    padding: 3px 7px;
    min-width: 34px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--of-success);
}
.of-fixture-odd em {
    font-style: normal;
    font-size: 0.6rem;
    color: var(--of-muted);
    font-weight: 400;
}
.of-fixture-odd--na { color: var(--of-muted); }
.of-fixture-cta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}
.of-fixture-predict-btn {
    display: block;
    background: var(--of-gold-500);
    color: #fff;
    border-radius: var(--of-radius-pill);
    padding: 5px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    transition: background 0.15s;
}
.of-fixture-predict-btn:hover { background: var(--of-gold-700); }
.of-fixture-bet-btn {
    display: block;
    background: var(--of-primary);
    color: #000;
    border-radius: var(--of-radius-pill);
    padding: 5px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    transition: background 0.15s;
}
.of-fixture-bet-btn:hover { background: var(--of-cyan-400); }

@media (max-width: 680px) {
    .of-fixture-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .of-fixture-home { justify-content: flex-start; }
    .of-fixture-cta { flex-direction: row; }
}

/* ============================================================
   PHASE 16D — FORM GUIDE PAGES
   ============================================================ */
.of-form-guide-page {
    max-width: 960px;
    margin: 0 auto;
    padding: 16px 16px 48px;
}
.of-form-section {
    margin-bottom: 40px;
}
.of-form-section-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--of-text);
    margin-bottom: 6px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--of-border);
    display: flex;
    align-items: center;
    gap: 8px;
}
.of-form-section--hot .of-form-section-title { border-bottom-color: var(--of-primary); }
.of-form-section--cold .of-form-section-title { border-bottom-color: var(--of-danger); }
.of-form-section-desc {
    font-size: 0.9rem;
    color: var(--of-muted);
    margin: 0 0 16px;
}
.of-form-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    background: var(--of-panel);
    border-radius: var(--of-radius-card);
    overflow: hidden;
}
.of-form-table th {
    background: var(--of-panel-2);
    color: var(--of-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 8px;
    text-align: center;
    border-bottom: 1px solid var(--of-border);
}
.of-form-table th:nth-child(2) { text-align: left; }
.of-form-table td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--of-border-subtle, var(--of-border));
    text-align: center;
    color: var(--of-text-secondary);
    vertical-align: middle;
}
.of-form-table td:nth-child(2) { text-align: left; }
.of-form-table tbody tr:hover { background: var(--of-panel-2); }
.of-form-row--hot { background: rgba(223,253,81,0.04); }
.of-form-row--cold { background: rgba(239,68,68,0.04); }
.of-form-rank {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 50%;
    background: var(--of-panel-3);
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--of-text-secondary);
}
.of-form-team-cell {
    display: flex !important;
    align-items: center;
    gap: 8px;
}
.of-form-team-logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
    border-radius: 2px;
    flex-shrink: 0;
}
.of-form-team-cell a {
    color: var(--of-text);
    text-decoration: none;
    font-weight: 600;
}
.of-form-team-cell a:hover { color: var(--of-gold-300); }
.of-form-badge {
    font-size: 0.68rem;
    font-weight: 700;
    border-radius: 4px;
    padding: 2px 6px;
    white-space: nowrap;
    flex-shrink: 0;
}
.of-form-badge--hot {
    background: rgba(223,253,81,0.15);
    color: var(--of-primary);
}
.of-form-badge--cold {
    background: rgba(239,68,68,0.12);
    color: var(--of-danger);
}
.of-form-pts {
    font-size: 0.92rem;
    color: var(--of-text);
}
.of-form-pts strong { color: var(--of-success); }
.of-form-last5 {
    display: flex !important;
    gap: 3px;
    justify-content: center;
}
.of-form-result {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 800;
}
.of-form-result-w { background: var(--of-success); color: #000; }
.of-form-result-d { background: #6b7080; color: #fff; }
.of-form-result-l { background: var(--of-danger); color: #fff; }
.of-form-league-pos {
    font-weight: 700;
    color: var(--of-text);
    font-size: 0.92rem;
}
.of-form-crosslinks {
    margin: 32px 0 16px;
    font-size: 0.9rem;
}
.of-form-crosslinks h3 { margin-bottom: 8px; }
.of-form-crosslinks a { color: var(--of-gold-300); text-decoration: none; }
.of-form-crosslinks a:hover { text-decoration: underline; }

@media (max-width: 600px) {
    .of-form-table { font-size: 0.78rem; }
    .of-form-table td, .of-form-table th { padding: 7px 4px; }
    .of-form-team-logo { display: none; }
    .of-form-badge { display: none; }
    .of-form-last5 { gap: 2px; }
    .of-form-result { width: 16px; height: 16px; line-height: 16px; font-size: 0.65rem; }
}