/* Design tokens shared by the landing page and auth screens. */
:root {
    --border-radius-xs: 4px;
    --border-radius-sm: 6px;
    --border-radius-md: 12px;
    --border-radius-lg: 18px;
    --darkest-bg: #07080c;
    --base-bg: #101117;
    --surface-card-bg: rgba(24, 25, 34, 0.82);
    --elevated-surface: rgba(20, 20, 27, 0.78);
    --border-divider: rgba(255, 255, 255, 0.1);
    --primary-text: #ffffff;
    --secondary-text: rgba(222, 230, 244, 0.72);
    --muted-text: rgba(222, 230, 244, 0.48);
    --orange: #f5a51c;
    --orange-deep: var(--brand-orange);
    --brand-orange: #ff6b00;
    --success-green: #00d1b2;
    --error-red: #dc3545;
    --highlight: #57a6ff;
    --badge: rgba(255, 255, 255, 0.09);
    --glassmorphism-bg: rgba(255, 255, 255, 0.045);
    --pulse-glow-orange: rgba(245, 166, 35, 0.3);
    --scroll-track: #0b0c12;
    --scroll-thumb: rgba(255, 107, 0, 0.58);
    --header-height: 68px;
}

/* Global reset keeps spacing predictable across browsers. */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Base page styles. */
html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 12px);
    scrollbar-color: var(--scroll-thumb) var(--scroll-track);
    scrollbar-width: thin;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: var(--scroll-track);
}

*::-webkit-scrollbar-thumb {
    border: 2px solid var(--scroll-track);
    border-radius: 999px;
    background: var(--scroll-thumb);
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--brand-orange);
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* font-family: "Sofia Sans", sans-serif; */
    font-family: Montserrat, "Montserrat", sans-serif;
    background-color: var(--darkest-bg);
    color: var(--primary-text);
}

html.oddsent-page-loader-active,
html.oddsent-page-loader-active body {
    overflow: hidden;
}

.oddsent-page-loader {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: #07080c;
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transition:
        opacity 320ms ease,
        visibility 320ms ease;
    z-index: 100000;
}

.oddsent-page-loader.is-hiding {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.oddsent-page-loader__image {
    display: block;
    width: clamp(54px, 6vw, 76px);
    height: auto;
    transform-origin: center;
    animation: oddsent-page-loader-zoom 1.35s ease-in-out infinite;
    will-change: transform;
}

@keyframes oddsent-page-loader-zoom {
    0%,
    100% {
        transform: scale(0.9);
    }

    50% {
        transform: scale(1.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .oddsent-page-loader__image {
        animation: none;
    }
}

body.match-details-open {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

/* Sticky desktop header. The scrolled class is toggled in script.js. */
.header {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    min-height: var(--header-height);
    padding: 0 clamp(20px, 5vw, 64px);
    border-bottom: 1px solid transparent;
    background-color: rgba(7, 8, 12, 0);
    transition:
        background-color 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease,
        backdrop-filter 240ms ease;
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
    z-index: 1000;
}

/* Adds a subtle glass surface once the visitor scrolls. */
.header.is-scrolled {
    border-color: rgba(255, 255, 255, 0.08);
    background-color: rgba(7, 8, 12, 0.9);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

/* Header layout: logo stays left, nav/actions stay right. */
.header .header__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1640px;
    min-height: inherit;
    margin: 0 auto;
    gap: clamp(20px, 4vw, 56px);
}

.header__logo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.header__logo img {
    display: block;
    width: clamp(148px, 12vw, 168px);
    height: auto;
    transform-origin: left center;
    transition: transform 240ms ease, opacity 240ms ease;
}

.header.is-scrolled .header__logo img {
    transform: translateY(-1px) scale(0.97);
}

/* Desktop navigation and account action group. */
.header__container .header__nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 auto;
    gap: clamp(18px, 3vw, 40px);
    min-width: 0;
    margin-left: auto;
}

.header__nav .nav-link {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    list-style: none;
}

.header__nav .nav-link li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 10px 16px;
    color: var(--secondary-text);
    border-radius: var(--border-radius-xs);
    font-size: 13px;
    font-weight: 500;
    font-family: Montserrat, "Montserrat", sans-serif;
    transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.header__nav .nav-link li a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--primary-text);
}

.header__nav .nav-link li a.active {
    background: var(--orange-deep);
    color: #080808;
}

.header__nav .header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    gap: 14px;
}

.header__nav .header-actions .header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    font-size: 14px;
    padding: 10px 16px;
    border-radius: var(--border-radius-xs);
    font-weight: 500;
    transition: background 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.header__nav .header-actions .header-cta.signin-link {
    padding: 10px 4px;
    color: var(--secondary-text);
}

.header__nav .header-actions .header-cta.signin-link:hover {
    color: var(--primary-text);
}

.header__nav .header-actions .header-cta.signup-link {
    min-width: 108px;
    background: var(--orange-deep);
    color: #000000;
}

.header__nav .header-actions .header-cta.signup-link:hover {
    box-shadow: 0 10px 24px rgba(255, 122, 0, 0.24);
}

.header-account {
    position: relative;
}

.header-account__trigger {
    min-width: 176px;
    min-height: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 1px solid transparent;
    outline: none;
    border-radius: 0;
    background: none;
    color: var(--primary-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.header-account__trigger:hover,
.header-account.is-open .header-account__trigger {
    border-color: none;
    background: none;
    box-shadow: none;
}

.header-account__avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    object-fit: cover;
    object-position: center;
    box-shadow: 0 8px 18px rgba(255, 107, 0, 0.18);
}

.header-account__name {
    max-width: 132px;
    overflow: hidden;
    flex: 1 1 auto;
    font-size: 13px;
    font-weight: 500;
    color: var(--secondary-text);
    font-family: Montserrat, "Montserrat", sans-serif;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-account__chevron {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    color: rgba(222, 230, 244, 0.72);
    transition: transform 160ms ease, color 160ms ease;
}

.header-account.is-open .header-account__chevron {
    color: var(--brand-orange);
    transform: rotate(225deg) translate(-1px, -1px);
}

.header-account__menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 1100;
    width: 286px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    background:
        radial-gradient(circle at top right, rgba(255, 107, 0, 0.12), transparent 42%),
        rgba(13, 16, 23, 0.98);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.52), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top right;
    transition: opacity 120ms ease, transform 140ms ease;
    backdrop-filter: blur(18px);
}

.header-account__menu.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.header-account__summary {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    padding: 11px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.045);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

.header-account__summary-avatar {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    border: 1px solid rgba(255, 107, 0, 0.34);
    background: rgba(255, 255, 255, 0.06);
    object-fit: cover;
    object-position: center;
}

.header-account__summary-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.header-account__summary-copy strong,
.header-account__summary-copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-account__summary-copy strong {
    color: var(--primary-text);
    font-size: 13px;
    line-height: 1.2;
}

.header-account__summary-copy span {
    color: var(--secondary-text);
    font-size: 11px;
    line-height: 1.25;
}

.header-account__menu > a,
.header-account__logout {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 4px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--secondary-text);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    transition: color 120ms ease, background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.header-account__menu > a i,
.header-account__logout i {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.045);
    color: rgba(222, 230, 244, 0.72);
    font-size: 12px;
    text-align: center;
    opacity: 1;
    visibility: visible;
    transition: color 120ms ease, background 120ms ease;
}

.header-account__menu > a:hover,
.header-account__menu > a:focus-visible,
.header-account__logout:hover,
.header-account__logout:focus-visible {
    border-color: rgba(255, 107, 0, 0.24);
    background: rgba(255, 107, 0, 0.11);
    color: var(--primary-text);
}

.header-account__menu > a:hover i,
.header-account__menu > a:focus-visible i,
.header-account__logout:hover i,
.header-account__logout:focus-visible i {
    background: rgba(255, 107, 0, 0.16);
    color: var(--brand-orange);
}

.header-account__logout-form {
    margin: 8px 0 0;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.header-account__logout {
    width: 100%;
    font-family: Montserrat, "Montserrat", sans-serif;
    text-align: left;
    cursor: pointer;
    color: #ff8585;
}

.header-account__logout i {
    background: rgba(255, 91, 91, 0.1);
    color: #ff8585;
}

.header-account__logout:hover,
.header-account__logout:focus-visible {
    border-color: rgba(255, 91, 91, 0.22);
    background: rgba(255, 91, 91, 0.12);
    color: #ffd1d1;
}

/* Keyboard focus ring for header links and the mobile menu button. */
.header__nav .nav-link li a:focus-visible,
.header__nav .header-actions .header-cta:focus-visible,
.header-account__trigger:focus-visible,
.header__menu-toggle:focus-visible {
    outline: 2px solid rgba(255, 122, 0, 0.78);
    outline-offset: 3px;
}

/* Hidden on desktop; responsive.css turns this into the mobile menu button. */
.header__menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    background: var(--brand-orange);
    color: #fff;
    cursor: pointer;
}

/* Three-line icon. In responsive.css these lines become an X when open. */
.header__menu-toggle span {
    position: absolute;
    width: 17px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform 220ms ease, opacity 180ms ease;
}

.header__menu-toggle span:nth-child(1) {
    transform: translateY(-6px);
}

.header__menu-toggle span:nth-child(3) {
    transform: translateY(6px);
}

.password-input-shell {
    position: relative;
    width: 100%;
}

.password-input-shell > input {
    padding-right: 48px !important;
}

.password-visibility-toggle {
    position: absolute;
    top: 50%;
    right: 10px;
    z-index: 2;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--brand-orange, #ff6b00);
    cursor: pointer;
    transform: translateY(-50%);
    transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}

.password-visibility-toggle:hover {
    background: rgba(255, 107, 0, 0.1);
    color: var(--brand-orange, #ff6b00);
}

.password-visibility-toggle:focus-visible {
    outline: 2px solid var(--brand-orange, #ff6b00);
    outline-offset: 2px;
}

.password-visibility-toggle:active {
    transform: translateY(-50%) scale(0.94);
}

.password-visibility-toggle:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.password-visibility-toggle svg {
    width: 20px;
    height: 20px;
    display: block;
    fill: currentColor;
}

.password-visibility-toggle__hide,
.password-input-shell.is-password-visible .password-visibility-toggle__show {
    display: none !important;
}

.password-input-shell.is-password-visible .password-visibility-toggle__hide {
    display: block !important;
}

/* Page shell below the sticky header. */
.site-shell {
    min-height: 100vh;
    background: var(--darkest-bg);
}

/* Hero section: full-height landing experience with centered content. */
.hero {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: clamp(620px, 78vh, 820px);
    overflow: hidden;
    padding: clamp(14px, 2vh, 24px) clamp(20px, 6.8vw, 92px) clamp(34px, 5vh, 64px);
    background:
        radial-gradient(ellipse at 50% 66%, rgba(245, 165, 28, 0.09) 0%, rgba(245, 165, 28, 0.04) 32%, transparent 66%),
        radial-gradient(ellipse at 58% 78%, rgba(0, 209, 178, 0.055) 0%, transparent 42%),
        linear-gradient(180deg, #08090e 0%, #08090d 56%, #090a0f 100%);
}

/* Decorative background layers. They sit behind the hero content only. */
.hero::before,
.hero::after,
.hero-glow {
    position: absolute;
    pointer-events: none;
    content: "";
}

/* Fine grid texture behind the hero. */
.hero::before {
    inset: 0;
    z-index: -2;
    opacity: 0.5;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), #000 42%, rgba(0, 0, 0, 0.18));
}

/* Soft ambient glow behind the stats and actions. */
.hero::after {
    left: 50%;
    bottom: 10%;
    z-index: -1;
    width: min(840px, 84vw);
    height: min(400px, 46vw);
    transform: translateX(-50%);
    border-radius: 999px;
    opacity: 0.74;
    background:
        radial-gradient(circle, rgba(245, 165, 28, 0.075), rgba(245, 165, 28, 0.022) 50%, transparent 76%),
        radial-gradient(circle at 72% 62%, rgba(0, 209, 178, 0.042), transparent 58%);
    filter: blur(34px);
}

/* Extra low-contrast glow layer for depth without a harsh spotlight. */
.hero-glow {
    inset: 32% 18% 12%;
    z-index: -1;
    opacity: 0.62;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(245, 165, 28, 0.075), transparent 54%),
        radial-gradient(ellipse at 50% 72%, rgba(255, 122, 0, 0.035), transparent 66%);
    filter: blur(42px);
}

/* Main hero content stack. */
.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1220px;
    margin: 15px auto 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Small platform label above the headline. */
.platform-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 33px;
    padding: 8px 15px;
    border: 1px solid var(--border-divider);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    color: #c8dcff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    font-size: 14px;
    font-weight: 500;
}

/* Shared live-dot styling for pills, buttons, ticker, and future cards. */
.platform-pill span,
.live-dot,
.ticker-track i,
.ticker-live-dot,
.match-card p span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--orange-deep);
    box-shadow: 0 0 12px rgba(245, 165, 28, 0.68);
}

/* Hero headline and supporting copy. */
.hero h1 {
    margin: 34px 0 18px;
    font-family: 'Poppins', 'Montserrat', sans-serif;
    font-size: clamp(3.45rem, 5vw, 5.1rem);
    font-weight: 800;
    line-height: 0.94;
    letter-spacing: 0;
    text-wrap: balance;
}

.hero h1 span {
    color: var(--orange-deep);
}

.hero-copy {
    width: min(640px, 100%);
    color: #c8d8ee;
    font-size: clamp(1rem, 1.25vw, 1.05rem);
    line-height: 1.4;
}

.no-break {
    white-space: nowrap;
}

/* Primary hero actions. Button-specific styles use .hero__btn to avoid auth button conflicts. */
.hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
    gap: 10px;
}

.hero__btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 23px;
    border-radius: var(--border-radius-xs);
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 700;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.hero__btn.btn-primary {
    background: var(--orange-deep);
    color: #080808;
}

.hero__btn.btn-secondary {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: var(--primary-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.hero__btn.btn-secondary:hover {
    border-color: var(--pulse-glow-orange);
    background: rgba(255, 255, 255, 0.09);
}

/* Small chart icon used in the "View Predictions" button. */
.chart-icon {
    position: relative;
    width: 15px;
    height: 15px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}

.chart-icon::before {
    position: absolute;
    left: 2px;
    bottom: 2px;
    width: 9px;
    height: 6px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: skew(-22deg);
    content: "";
}

.live-dot {
    display: inline-block;
}

/* Pulse animation is intentionally subtle so it does not fight the headline. */
.platform-pill span,
.hero-actions .live-dot {
    animation: livePulse 1.15s ease-in-out infinite;
}

@keyframes livePulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 12px rgba(245, 165, 28, 0.68);
    }

    50% {
        opacity: 0.35;
        transform: scale(0.72);
        box-shadow: 0 0 4px rgba(245, 165, 28, 0.28);
    }
}

/* Key performance stats below the hero actions. */
.hero-stats {
    width: min(560px, 100%);
    margin-top: clamp(32px, 4vh, 46px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

.hero-stats div {
    min-width: 0;
}

.hero-stats dt {
    font-size: clamp(1.32rem, 2vw, 1.55rem);
    font-weight: 800;
    line-height: 1;
    color: var(--primary-text);
    font-variant-numeric: tabular-nums;
}

.hero-stats dd {
    margin-top: 7px;
    color: #8da0bb;
    font-size: 11px;
    line-height: 1.2;
}

/* Full-bleed score ticker sits in normal flow after the stats. */
.scores-ticker {
    position: relative;
    z-index: 3;
    width: 100vw;
    height: 42px;
    margin-top: clamp(28px, 3vh, 42px);
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(17, 18, 25, 0.86);
    box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.28);
}

.scores-ticker-track,
.ticker-track {
    display: flex;
    width: max-content;
    min-width: 100%;
    height: 100%;
    color: rgba(227, 233, 244, 0.76);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    will-change: transform;
    animation: scoresTickerMarquee var(--ticker-duration, 56s) linear infinite;
}

.scores-ticker:hover .scores-ticker-track,
.scores-ticker:hover .ticker-track {
    animation-play-state: paused;
}

.scores-ticker.is-static .scores-ticker-track,
.scores-ticker.is-static .ticker-track {
    width: 100%;
    animation: none;
}

.ticker-set {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 100vw;
    height: 100%;
}

.scores-ticker.is-static .ticker-set {
    min-width: 100%;
    justify-content: center;
}

.ticker-item,
.ticker-track span {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    height: 100%;
    padding: 0 20px;
    border-right: 2px solid rgba(255, 255, 255, 0.07);
    white-space: nowrap;
}

.ticker-item b,
.ticker-track b {
    color: rgba(166, 177, 196, 0.72);
    font-weight: 700;
}

.ticker-live-dot,
.ticker-track i {
    display: inline-block;
    flex: 0 0 auto;
}

.ticker-item--live b:first-of-type,
.ticker-track span b:first-of-type {
    color: var(--orange-deep);
}

.ticker-item strong,
.ticker-track strong {
    min-width: 36px;
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.12);
    color: var(--primary-text);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.scores-ticker__message {
    justify-content: center;
    width: 100%;
    color: rgba(227, 233, 244, 0.72);
}

@keyframes scoresTickerMarquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* Live score center uses a compact dashboard layout fed by the PHP proxy. */
.live-score-section {
    padding: clamp(32px, 4vw, 52px) clamp(20px, 5vw, 64px) clamp(64px, 7vw, 92px);
    /* border-top: 1px solid rgba(255, 255, 255, 0.07); */
    background: transparent;
    /* background: linear-gradient(180deg, #090a0f 0%, #08090d 100%); */
}

@media (min-width: 1400px) {
    .hero {
        min-height: clamp(640px, 76vh, 780px);
    }

    .live-score-section {
        padding-top: 42px;
    }
}

.live-score-shell {
    width: min(1640px, 100%);
    margin: 0 auto;
}

.live-score-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.live-score-header > div {
    min-width: 0;
}

.live-score-section .section-pill,
.prediction-analytics-section .section-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 13px;
    color: rgba(222, 230, 244, 0.68);
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.14em;
}

.live-score-section .section-pill::before {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--brand-orange);
    box-shadow: 0 0 18px rgba(255, 107, 0, 0.58);
    content: "";
}

.live-score-section h2 {
    font-size: clamp(2rem, 3vw, 2rem);
    line-height: 1.02;
    letter-spacing: 0;
}

.live-score-header p {
    width: min(680px, 100%);
    margin-top: 10px;
    color: var(--secondary-text);
    font-size: 0.875rem;
    line-height: 1.5;
}

.sport-tabs {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 5px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.035);
}

.sport-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 8px 13px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: rgba(222, 230, 244, 0.62);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease;
}

.sport-tab:hover,
.sport-tab.is-active {
    background: rgba(255, 107, 0, 0.16);
    color: var(--primary-text);
}

.sport-tab.is-active {
    box-shadow: inset 0 0 0 1px rgba(255, 107, 0, 0.42);
}

.live-score-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    margin-bottom: 12px;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--secondary-text);
    font-size: 13px;
    font-weight: 800;
}

.live-score-loading[hidden] {
    display: none;
}

.live-score-loading span {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--brand-orange);
    box-shadow: 0 0 16px rgba(255, 107, 0, 0.64);
    animation: liveScoreLoadingPulse 1s ease-in-out infinite;
}

.live-score-app {
    display: grid;
    grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.competition-sidebar,
.match-center-panel {
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    background: rgba(16, 17, 23, 0.86);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
}

.competition-sidebar {
    overflow: hidden;
}

.competition-sidebar__top,
.match-center-panel__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    min-height: 54px;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.026);
}

.competition-sidebar__top h3,
.match-center-panel__top h3 {
    color: rgba(222, 230, 244, 0.82);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.competition-sidebar__top span {
    min-width: 28px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255, 107, 0, 0.12);
    color: var(--brand-orange);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

#live-score-status {
    display: block;
    margin-top: 4px;
    color: var(--muted-text);
    font-size: 13px;
    font-weight: 500;
}

.competition-list {
    display: grid;
    max-height: 656px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 8px 12px 8px 8px;
    scrollbar-color: rgba(255, 107, 0, 0.66) rgba(255, 255, 255, 0.045);
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}

.competition-list::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.competition-list::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.045);
}

.competition-list::-webkit-scrollbar-thumb {
    border: 2px solid rgba(16, 17, 23, 0.92);
    border-radius: 999px;
    background: rgba(255, 107, 0, 0.66);
}

.competition-list::-webkit-scrollbar-thumb:hover {
    background: var(--brand-orange);
}

.competition-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-width: 0;
    min-height: 52px;
    padding: 9px 12px;
    border: 0;
    outline: none;
    border-radius: 0;
    background: transparent;
    color: var(--secondary-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease;
}

.competition-item:hover,
.competition-item.is-active {
    background: rgba(255, 255, 255, 0.065);
    color: var(--primary-text);
}

.competition-item.is-active {
    box-shadow: inset 3px 0 0 var(--brand-orange);
}

.competition-item span {
    min-width: 0;
}

.competition-item strong,
.competition-item small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.competition-item strong {
    font-size: 13px;
    font-weight: 600;
}

.competition-item small {
    margin-top: 4px;
    color: var(--brand-orange);
    font-size: 11px;
}

.competition-item b {
    flex: 0 0 auto;
    min-width: 34px;
    color: var(--secondary-text);
    font-size: 14px;
    font-weight: 600;
    text-align: right;
}

.competition-empty {
    padding: 14px 12px 18px;
    color: var(--muted-text);
    font-size: 13px;
}

.match-center-panel {
    overflow: hidden;
}

.match-center-panel__top > div:first-child {
    min-width: 0;
}

.live-score-toolbar {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 4px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.035);
}

.live-score-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 6px 11px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: rgba(222, 230, 244, 0.62);
    font: inherit;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease;
}

.live-score-filter:hover,
.live-score-filter.is-active {
    background: rgba(255, 107, 0, 0.16);
    color: var(--primary-text);
}

.live-score-filter.is-active {
    box-shadow: inset 0 0 0 1px rgba(255, 107, 0, 0.42);
}

.sport-tab:focus-visible,
.live-score-filter:focus-visible,
.competition-item:focus-visible,
.match-favorite:focus-visible {
    outline: 2px solid var(--brand-orange);
    outline-offset: 2px;
}

.live-score-list {
    display: grid;
    min-height: 260px;
}

.live-score-list[aria-busy="true"] {
    opacity: 0.62;
}

.match-league-group + .match-league-group {
    border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.match-league-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 32px;
    padding: 9px 18px;
    background: rgba(255, 255, 255, 0.026);
}

.match-league-header div {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 9px;
}

.league-trophy {
    position: relative;
    flex: 0 0 auto;
    width: 13px;
    height: 12px;
    border: 1px solid rgba(141, 160, 187, 0.78);
    border-top: 0;
    border-radius: 0 0 4px 4px;
}

.league-trophy::before,
.league-trophy::after {
    position: absolute;
    top: 2px;
    width: 5px;
    height: 5px;
    border: 1px solid rgba(141, 160, 187, 0.78);
    content: "";
}

.league-trophy::before {
    right: 100%;
    border-right: 0;
    border-radius: 4px 0 0 4px;
}

.league-trophy::after {
    left: 100%;
    border-left: 0;
    border-radius: 0 4px 4px 0;
}

.match-league-header strong {
    overflow: hidden;
    color: rgba(222, 230, 244, 0.86);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.match-league-header span,
.match-league-header small {
    flex: 0 0 auto;
    color: rgba(141, 160, 187, 0.78);
    font-size: 11px;
    font-weight: 600;
}

.match-row-list {
    display: grid;
}

.match-row {
    display: grid;
    grid-template-columns: 26px minmax(130px, 1fr) minmax(82px, auto) minmax(130px, 1fr) 22px;
    align-items: center;
    min-height: 40px;
    gap: 12px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.018);
    cursor: pointer;
    transition: background 180ms ease, box-shadow 180ms ease;
}

.match-row + .match-row {
    border-top: 1px solid rgba(255, 255, 255, 0.055);
}

.match-row:hover,
.match-row:focus-visible {
    background: rgba(255, 255, 255, 0.052);
    box-shadow: inset 3px 0 0 var(--brand-orange);
    outline: 0;
}

.match-favorite {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 0;
    background: transparent;
    color: rgba(141, 160, 187, 0.82);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.match-favorite:hover {
    color: var(--brand-orange);
}

.match-team {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 9px;
}

.match-team--away {
    justify-content: flex-end;
    text-align: right;
}

.match-team span:not(.team-mark):not(.team-mark__initials) {
    min-width: 0;
    overflow: hidden;
    color: rgba(244, 248, 255, 0.94);
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-mark {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.075);
}

.team-mark__initials {
    color: rgba(244, 248, 255, 0.88);
    font-size: 11px;
    font-weight: 800;
}

.team-mark img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 3px;
    border-radius: inherit;
    object-fit: contain;
    background: rgba(16, 17, 23, 0.94);
}

.match-score-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-self: center;
    min-width: 82px;
    gap: 3px;
}

.match-score-block strong {
    color: var(--primary-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.match-score-block span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: rgba(141, 160, 187, 0.86);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
}

.match-row[data-status="live"] .match-score-block span {
    color: var(--brand-orange);
}

.match-live-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--brand-orange);
    box-shadow: 0 0 13px rgba(255, 107, 0, 0.72);
    animation: matchLivePulse 1.08s ease-in-out infinite;
}

.match-insight {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    width: 20px;
    height: 20px;
    gap: 2px;
    opacity: 1;
}

.match-insight span {
    width: 3px;
    border-radius: 999px;
    background: rgba(141, 160, 187, 0.82);
    transition:
        background-color 0.25s ease,
        opacity 0.25s ease,
        transform 0.25s ease;
}

.match-insight.is-live span {
    background: var(--brand-orange);
    opacity: 1;
    animation: liveInsightPulse 1.8s ease-in-out infinite;
}

.match-insight.is-upcoming span {
    background: rgba(141, 160, 187, 0.82);
    opacity: 0.78;
}

.match-insight.is-finished span {
    background: rgba(181, 188, 202, 0.66);
    opacity: 0.55;
}

.match-insight span:nth-child(1) {
    height: 7px;
}

.match-insight span:nth-child(2) {
    height: 12px;
}

.match-insight span:nth-child(3) {
    height: 9px;
}

@keyframes liveInsightPulse {
    0%,
    100% {
        opacity: 0.75;
        transform: scaleY(1);
    }

    50% {
        opacity: 1;
        transform: scaleY(1.15);
    }
}

.live-score-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    gap: 7px;
    padding: 30px;
    color: var(--secondary-text);
    text-align: center;
}

.live-score-state strong {
    color: var(--primary-text);
    font-size: 15px;
    font-weight: 800;
}

.live-score-state span {
    max-width: 360px;
    color: var(--muted-text);
    font-size: 13px;
    line-height: 1.5;
}

.live-score-state--error strong {
    color: #ffb6b6;
}

.live-score-state--soon strong {
    color: var(--brand-orange);
}

/* Prediction cards are hydrated from api/predictions.php without changing the page shell. */
.prediction-analytics-section {
    padding: 42px clamp(20px, 5vw, 64px) 74px;
    background: transparent;
}

.prediction-analytics-shell {
    width: min(1640px, 100%);
    margin: 0 auto;
}

.prediction-analytics-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.prediction-analytics-header > div {
    min-width: 0;
}

.prediction-analytics-section .section-pill::before {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--success-green);
    box-shadow: 0 0 18px rgba(0, 209, 178, 0.46);
    content: "";
}

.prediction-analytics-section h2 {
    font-size: 2rem;
    line-height: 1.05;
    letter-spacing: 0;
    font-weight: 800;
}

.prediction-analytics-header p {
    width: min(680px, 100%);
    margin-top: 10px;
    color: var(--secondary-text);
    font-size: 0.875rem;
    line-height: 1.5;
}

#prediction-analytics-status {
    flex: 0 0 auto;
    color: var(--muted-text);
    font-size: 12px;
    font-weight: 500;
}

.prediction-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 22px;
}

.prediction-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 500px;
    overflow: hidden;
    padding: 25px 25px 20px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 6px;
    background:
        radial-gradient(circle at 18% 0%, rgba(0, 209, 178, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(20, 21, 28, 0.96), rgba(13, 14, 19, 0.98));
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.34);
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.prediction-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: rgba(255, 107, 0, 0.56);
    content: "";
}

.prediction-card::after {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 42%),
        radial-gradient(circle at 100% 14%, rgba(87, 166, 255, 0.08), transparent 34%);
    content: "";
}

.prediction-card > * {
    position: relative;
    z-index: 1;
}

.prediction-card:hover {
    border-color: rgba(255, 107, 0, 0.45);
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.46), 0 0 36px rgba(255, 107, 0, 0.06);
}

.prediction-card--risk-very-low::before,
.prediction-card--risk-low::before {
    background: linear-gradient(90deg, #00d1b2, rgba(0, 240, 194, 0.72));
}

.prediction-card--risk-medium::before {
    background: linear-gradient(90deg, #ffb84d, var(--brand-orange));
}

.prediction-card--risk-high::before {
    background: linear-gradient(90deg, #ff6384, rgba(255, 107, 0, 0.70));
}

.prediction-card--loading,
.prediction-card--empty,
.prediction-card--error {
    display: grid;
    place-items: center;
    min-height: 132px;
    color: var(--secondary-text);
    font-size: 13px;
    font-weight: 800;
    text-align: center;
}

.prediction-card--error {
    color: #ffb6b6;
}

.prediction-card--locked {
    align-items: center;
    justify-content: center;
    min-height: 500px;
    padding: 34px 30px 30px;
    border-color: rgba(255, 107, 0, 0.34);
    text-align: center;
    background:
        radial-gradient(circle at 50% 11%, rgba(255, 107, 0, 0.20), transparent 31%),
        radial-gradient(circle at 1px 1px, rgba(255, 107, 0, 0.18) 1px, transparent 1.5px) 0 0 / 12px 12px,
        linear-gradient(180deg, rgba(28, 18, 13, 0.98), rgba(12, 10, 10, 0.99));
}

.prediction-card--loading strong,
.prediction-card--empty strong,
.prediction-card--error strong {
    color: var(--primary-text);
    font-size: 14px;
    font-weight: 600;
}

.prediction-card--loading span,
.prediction-card--empty span,
.prediction-card--error span {
    max-width: 360px;
    color: var(--muted-text);
    font-size: 12px;
    font-style: italic;
    font-weight: 500;
    margin-top: 8px;
    margin-bottom: 8px;
    line-height: 1.4;
}

.prediction-card--skeleton {
    gap: 22px;
    pointer-events: none;
}

.prediction-card--skeleton::before {
    background: rgba(255, 107, 0, 0.28);
}

.prediction-card--skeleton .prediction-skeleton-line,
.prediction-card--skeleton .prediction-skeleton-fixture span,
.prediction-card--skeleton .prediction-skeleton-fixture i,
.prediction-card--skeleton .prediction-skeleton-main b,
.prediction-card--skeleton .prediction-skeleton-main span,
.prediction-card--skeleton .prediction-skeleton-grid span {
    display: block;
    overflow: hidden;
    border-radius: 7px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.06));
    background-size: 220% 100%;
    animation: oddsentSkeletonPulse 1.35s ease-in-out infinite;
}

.prediction-skeleton-line {
    width: 100%;
    height: 14px;
}

.prediction-skeleton-line--short {
    width: 46%;
}

.prediction-skeleton-line--medium {
    width: 68%;
}

.prediction-skeleton-fixture {
    display: grid;
    grid-template-columns: 1fr 34px 1fr;
    align-items: center;
    gap: 14px;
    margin-top: 4px;
}

.prediction-skeleton-fixture span {
    height: 46px;
}

.prediction-skeleton-fixture i {
    height: 18px;
}

.prediction-skeleton-main {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
}

.prediction-skeleton-main b {
    width: 112px;
    height: 112px;
    border-radius: 50%;
}

.prediction-skeleton-main div {
    display: grid;
    gap: 12px;
}

.prediction-skeleton-main span {
    height: 20px;
}

.prediction-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.prediction-skeleton-grid span {
    height: 72px;
}

.prediction-card__top,
.prediction-card__metric-head,
.prediction-card__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.prediction-card__league-group {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
}

.prediction-card__league {
    min-width: 0;
    overflow: hidden;
    color: #8291ad;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.prediction-card__tag {
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(24, 94, 255, 0.18);
    color: #4f8cff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.prediction-card__tag--value {
    background: rgba(0, 209, 178, 0.14);
    color: #00e3bd;
}

.prediction-card__tag--review {
    background: rgba(255, 184, 77, 0.16);
    color: #ffc269;
}

.prediction-card__risk {
    flex: 0 0 auto;
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--secondary-text);
    font-size: 10px;
    font-weight: 800;
}

.prediction-card__risk--very-low {
    background: rgba(0, 209, 178, 0.14);
    color: #00e3bd;
}

.prediction-card__risk--low {
    background: rgba(69, 128, 255, 0.16);
    color: #7da4ff;
}

.prediction-card__risk--medium {
    background: rgba(255, 184, 77, 0.16);
    color: #ffc269;
}

.prediction-card__risk--high {
    background: rgba(255, 99, 132, 0.16);
    color: #ff8da8;
}

.prediction-card__fixture {
    min-height: 78px;
    margin-top: 17px;
}

.prediction-card__match {
    margin: 0;
    color: var(--primary-text);
    font-size: 1.22rem;
    font-weight: 700;
    line-height: 1.22;
}

.prediction-card__teams {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.prediction-card__team {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 6px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
}

.prediction-card__team > span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
}

.prediction-card__team-logo {
    display: inline-grid;
    position: relative;
    flex: 0 0 24px;
    place-items: center;
    width: 24px;
    height: 24px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}

.prediction-card__team-logo-initials {
    color: rgba(255, 255, 255, 0.82);
    font-size: 9px;
    font-weight: 800;
}

.prediction-card__team-logo--has-image .prediction-card__team-logo-initials {
    visibility: hidden;
}

.prediction-card__team-logo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    object-fit: contain;
}

.prediction-card__team-logo--fallback {
    color: rgba(255, 255, 255, 0.82);
    font-size: 9px;
    font-weight: 800;
}

.prediction-card__vs {
    color: var(--brand-orange);
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
}

.prediction-card__kickoff {
    margin-top: 8px;
    color: #aab6c9;
    font-size: 11px;
    font-weight: 500;
}

.prediction-card__prediction {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
    gap: 22px;
    margin-top: 12px;
    padding: 21px 0 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.prediction-card__probability {
    --prediction-accent: #00d1b2;
    display: flex;
    flex: 0 0 88px;
    flex-direction: column;
    align-items: center;
    justify-self: center;
    width: 88px;
    gap: 6px;
}

.prediction-card__probability-ring {
    position: relative;
    display: grid;
    place-items: center;
    width: 82px;
    min-width: 82px;
    height: 82px;
    border-radius: 999px;
    background:
        conic-gradient(from -90deg, var(--prediction-accent) var(--prediction-ring), rgba(255, 255, 255, 0.11) 0);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 0 30px rgba(0, 209, 178, 0.16);
}

.prediction-card__probability-inner {
    position: absolute;
    inset: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background:
        radial-gradient(circle at 50% 8%, rgba(255, 255, 255, 0.06), transparent 40%),
        #11131a;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    pointer-events: none;
    text-align: center;
}

.prediction-card__probability-inner strong {
    display: block;
    margin: 0;
    padding: 0;
    color: var(--primary-text);
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    transform: translateY(0);
}

.prediction-card__probability-label {
    color: rgba(150, 170, 200, 0.75);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.prediction-card__pick {
    min-width: 0;
}

.prediction-card__label,
.prediction-card__market,
.prediction-card__odds-line {
    display: block;
}

.prediction-card__label {
    color: #8291ad;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.prediction-card__pick strong {
    display: block;
    margin-top: 6px;
    color: var(--primary-text);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.18;
}

.prediction-card__market {
    margin-top: 7px;
    color: #6fa0ff;
    font-size: 14px;
    font-weight: 700;
}

.prediction-card__odds-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 8px;
    color: #d7e2f3;
    font-size: 13px;
    font-weight: 800;
}

.prediction-card__odds-line b {
    color: var(--primary-text);
    font-weight: 700;
}

.prediction-card__odds-value {
    margin-left: 4px;
}

.prediction-card__odds-line--muted,
.prediction-card__odds-line--muted b {
    color: #8291ad;
}

.prediction-card__bookmaker-badge {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    margin-left: 8px;
    padding: 3px 7px;
    border-radius: 4px;
    background: linear-gradient(135deg, #0c8e61, #b2d235);
    color: #ffffff;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.prediction-card__metrics {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(132px, 0.78fr);
    gap: 12px;
    margin-top: 18px;
}

.prediction-card__metric-panel {
    min-width: 0;
    padding: 14px 15px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 6px;
    background:
        linear-gradient(180deg, rgba(18, 28, 38, 0.70), rgba(9, 13, 20, 0.78));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.prediction-card__metric-panel span,
.prediction-card__values span {
    display: block;
    color: #8291ad;
    font-size: 11px;
    font-weight: 800;
}

.prediction-card__metric-panel strong,
.prediction-card__values strong {
    display: block;
    margin-top: 5px;
    color: var(--primary-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
}

.prediction-card__segments {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
    margin-top: 13px;
}

.prediction-card__segments i {
    display: block;
    height: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
}

.prediction-card__segments i.is-filled {
    background: linear-gradient(90deg, #00d1b2, #26e9c9);
    box-shadow: 0 0 18px rgba(0, 209, 178, 0.22);
}

.prediction-card__risk-text {
    display: inline-flex;
    width: fit-content;
    min-height: 27px;
    align-items: center;
    margin-top: 10px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 0.9rem;
}

.prediction-card__risk-text--very-low {
    background: rgba(0, 209, 178, 0.13);
    color: #00e3bd;
}

.prediction-card__risk-text--low {
    background: rgba(0, 209, 178, 0.12);
    color: #22e0bf;
}

.prediction-card__risk-text--medium {
    background: rgba(255, 184, 77, 0.13);
    color: #ffc269;
}

.prediction-card__risk-text--high {
    background: rgba(255, 99, 132, 0.14);
    color: #ff8da8;
}

.prediction-card__values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 18px;
    padding: 0 0 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.prediction-card__values > div {
    min-width: 0;
    padding: 0 15px;
    border-right: 1px solid rgba(255, 255, 255, 0.075);
}

.prediction-card__values > div:first-child {
    padding-left: 0;
}

.prediction-card__values > div:last-child {
    padding-right: 0;
    border-right: 0;
}

.prediction-card__values strong.is-muted {
    color: #8291ad;
    font-size: 0.86rem;
}

.prediction-card__value-edge--positive {
    color: #00e3bd;
}

.prediction-card__value-edge--negative {
    color: #ffc269;
}

.prediction-card__reason {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: start;
    min-height: 56px;
    margin-top: 17px;
    gap: 12px;
    color: #b7c7df;
}

.prediction-card__reason svg {
    width: 22px;
    height: 22px;
    color: #f5a51c;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.prediction-card__reason p {
    margin: 0;
    color: #b7c7df;
    font-size: 13px;
    line-height: 1.5;
}

.prediction-card__bottom {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.075);
}

.prediction-card__stake,
.prediction-card__locked-text {
    margin: 0;
    color: #a3b0c5;
    font-size: 13px;
    line-height: 1.45;
}

.prediction-card__analysis {
    flex: 0 0 auto;
    color: #ff8a2a;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.prediction-card__analysis:hover {
    color: #ffad66;
}

.prediction-card__lock-icon {
    display: grid;
    place-items: center;
    width: 70px;
    height: 70px;
    margin-bottom: 26px;
    border: 2px solid rgba(255, 107, 0, 0.72);
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(255, 107, 0, 0.18), rgba(255, 107, 0, 0.04));
    color: #ff9d2f;
    box-shadow: 0 0 40px rgba(255, 107, 0, 0.16);
}

.prediction-card__lock-icon svg {
    width: 31px;
    height: 31px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.prediction-card--locked .prediction-card__match {
    max-width: 320px;
    font-size: 1.44rem;
    line-height: 1.16;
    text-align: center;
}

.prediction-card__locked-text {
    max-width: 360px;
    margin-top: 15px;
    color: #c9d2df;
}

.prediction-card__locked-features {
    display: grid;
    width: 100%;
    max-width: 320px;
    margin: 27px auto 0;
    padding: 0;
    gap: 12px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    list-style: none;
    text-align: left;
}

.prediction-card__locked-features li {
    position: relative;
    padding-left: 28px;
}

.prediction-card__locked-features li::before {
    position: absolute;
    top: -1px;
    left: 0;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(255, 168, 36, 0.88);
    border-radius: 999px;
    color: #ffae39;
    font-size: 11px;
    font-weight: 700;
    content: "";
}

.prediction-card__locked-features li::after {
    position: absolute;
    top: 5px;
    left: 6px;
    width: 6px;
    height: 3px;
    border-bottom: 2px solid #ffae39;
    border-left: 2px solid #ffae39;
    content: "";
    transform: rotate(-45deg);
}

.prediction-card__lock-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 320px);
    min-height: 48px;
    margin-top: auto;
    padding: 13px 18px;
    border-radius: 6px;
    background: linear-gradient(135deg, #ffb01f, #ff6b00);
    color: #111318;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 16px 34px rgba(255, 107, 0, 0.27);
}

.prediction-card__lock-button:hover {
    background: #ff8126;
}

.match-details-modal {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: grid;
    place-items: center;
    padding: 24px;
}

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

.match-details-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.68);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.match-details-panel {
    position: relative;
    z-index: 1;
    width: min(880px, 100%);
    max-height: min(780px, calc(100vh - 48px));
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(22, 23, 31, 0.98), rgba(12, 13, 19, 0.98)),
        var(--base-bg);
    box-shadow: 0 32px 100px rgba(0, 0, 0, 0.58);
}

.match-details-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--primary-text);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease;
}

.match-details-close:hover {
    border-color: rgba(255, 107, 0, 0.36);
    background: rgba(255, 107, 0, 0.12);
}

.match-details-content {
    display: grid;
    gap: 14px;
    padding: 24px;
}

.match-details-league {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-right: 48px;
}

.match-details-league span {
    color: rgba(222, 230, 244, 0.86);
    font-size: 14px;
    font-weight: 700;
    /* letter-spacing: 0.08em; */
    text-transform: uppercase;
}

.match-details-league small {
    color: rgba(141, 160, 187, 0.78);
    font-size: 14px;
    font-weight: 800;
}

.match-details-scorecard {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(130px, auto) minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    background:
        linear-gradient(135deg, rgba(255, 107, 0, 0.08), transparent 42%),
        rgba(255, 255, 255, 0.035);
}

.match-details-favorite {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: rgba(141, 160, 187, 0.86);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.match-details-favorite:hover {
    color: var(--brand-orange);
}

.match-details-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    gap: 8px;
    text-align: center;
}

.match-details-team .team-mark {
    width: 50px;
    height: 50px;
}

.match-details-team .team-mark__initials {
    font-size: 14px;
}

.match-details-team strong {
    max-width: 100%;
    overflow: hidden;
    color: var(--primary-text);
    font-size: 15px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.match-details-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-self: center;
    gap: 6px;
    min-width: 130px;
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    background: rgba(7, 8, 12, 0.76);
}

.match-details-score h2 {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.match-details-score span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(141, 160, 187, 0.88);
    font-size: 11px;
    font-weight: 700;
}

.match-details-score small {
    color: var(--muted-text);
    font-size: 11px;
    font-weight: 800;
    text-align: center;
}

.match-details-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.035);
}

.match-details-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 30px;
    padding: 7px 12px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: rgba(222, 230, 244, 0.62);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.match-details-tab:hover,
.match-details-tab.is-active {
    background: rgba(255, 107, 0, 0.16);
    color: var(--primary-text);
}

.match-details-tab.is-active {
    box-shadow: inset 0 0 0 1px rgba(255, 107, 0, 0.42);
}

.match-details-tab-panel {
    min-height: 200px;
}

.match-details-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    gap: 10px;
    color: rgba(222, 230, 244, 0.82);
    font-size: 13px;
    font-weight: 700;
}

.match-details-loading span {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--brand-orange);
    box-shadow: 0 0 16px rgba(255, 107, 0, 0.68);
    animation: matchLivePulse 1.08s ease-in-out infinite;
}

.match-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.match-info-item {
    display: grid;
    gap: 5px;
    min-height: 66px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.035);
}

.match-info-item span {
    color: rgba(141, 160, 187, 0.86);
    font-size: 11px;
    font-weight: 700;
    /* letter-spacing: 0.08em; */
    text-transform: uppercase;
}

.match-info-item strong {
    color: rgba(244, 248, 255, 0.92);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}

.match-events-list {
    display: grid;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.025);
}

.match-event {
    display: grid;
    grid-template-columns: 44px 32px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 10px 14px;
}

.match-event + .match-event {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.match-event time {
    color: var(--brand-orange);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.match-event__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(141, 160, 187, 0.13);
    color: rgba(222, 230, 244, 0.88);
    font-size: 10px;
    font-weight: 700;
}

.match-event__icon--goal {
    background: rgba(255, 107, 0, 0.18);
    color: var(--brand-orange);
}

.match-event__icon--card {
    background: rgba(255, 204, 77, 0.16);
    color: #ffd369;
}

.match-event__icon--substitution {
    background: rgba(86, 180, 255, 0.16);
    color: #8ecbff;
}

.match-event__icon--var {
    background: rgba(185, 132, 255, 0.15);
    color: #d1b1ff;
}

.match-event div {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.match-event strong {
    overflow: hidden;
    color: rgba(244, 248, 255, 0.94);
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.match-event span,
.match-event small {
    overflow: hidden;
    color: rgba(141, 160, 187, 0.86);
    font-size: 11px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.match-stats-board {
    display: grid;
    gap: 10px;
}

.match-stats-teams {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    color: rgba(222, 230, 244, 0.86);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}

.match-stats-teams span:last-child {
    text-align: right;
}

.match-stat-list {
    display: grid;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.025);
}

.match-stat-row {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) 62px;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 10px 14px;
}

.match-stat-row + .match-stat-row {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.match-stat-row > span {
    color: rgba(244, 248, 255, 0.9);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.match-stat-row > div {
    display: grid;
    gap: 7px;
}

.match-stat-row small {
    color: rgba(141, 160, 187, 0.88);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
}

.match-stat-bars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    height: 6px;
}

.match-stat-bars i,
.match-stat-bars b {
    display: block;
    height: 100%;
    max-width: 100%;
    border-radius: 999px;
}

.match-stat-bars i {
    justify-self: end;
    background: var(--brand-orange);
}

.match-stat-bars b {
    justify-self: start;
    background: rgba(141, 160, 187, 0.62);
}

.match-lineups-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.match-lineup-card {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.025);
}

.match-lineup-head {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
}

.match-lineup-head div {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.match-lineup-head strong {
    overflow: hidden;
    color: rgba(244, 248, 255, 0.94);
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.match-lineup-head span,
.match-lineup-meta span {
    color: rgba(141, 160, 187, 0.84);
    font-size: 11px;
    font-weight: 700;
}

.match-lineup-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 7px;
    background: rgba(7, 8, 12, 0.52);
}

.match-lineup-meta strong {
    overflow: hidden;
    color: rgba(222, 230, 244, 0.9);
    font-size: 14px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.match-lineup-group {
    display: grid;
    gap: 8px;
}

.match-lineup-group h4 {
    margin: 0;
    color: rgba(222, 230, 244, 0.86);
    font-size: 11px;
    font-weight: 700;
    /* letter-spacing: 0.08em; */
    text-transform: uppercase;
}

.match-lineup-group ul {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.match-lineup-group li {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 6px 9px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.035);
}

.match-lineup-group li span,
.match-lineup-group li small {
    color: rgba(141, 160, 187, 0.84);
    font-size: 11px;
    font-weight: 700;
}

.match-lineup-group li strong {
    overflow: hidden;
    color: rgba(244, 248, 255, 0.9);
    font-size: 14px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.match-lineup-group p {
    margin: 0;
    color: rgba(141, 160, 187, 0.84);
    font-size: 14px;
}

.match-h2h-list {
    display: grid;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.025);
}

.match-h2h-row {
    display: grid;
    grid-template-columns: minmax(110px, 0.9fr) minmax(0, 1fr) 74px minmax(0, 1fr) 52px;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 10px 14px;
}

.match-h2h-row + .match-h2h-row {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.match-h2h-row div {
    display: grid;
    gap: 3px;
}

.match-h2h-row span,
.match-h2h-row small,
.match-h2h-row em {
    color: rgba(141, 160, 187, 0.84);
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.match-h2h-row strong {
    overflow: hidden;
    color: rgba(244, 248, 255, 0.9);
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.match-h2h-row strong:nth-of-type(2) {
    text-align: right;
}

.match-h2h-row b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    border-radius: 7px;
    background: rgba(7, 8, 12, 0.7);
    color: var(--primary-text);
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.match-h2h-row em {
    text-align: right;
}

.match-details-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    gap: 8px;
    padding: 24px;
    border: 1px dashed rgba(255, 255, 255, 0.13);
    border-radius: 6px;
    color: var(--secondary-text);
    text-align: center;
}

.match-details-empty strong {
    color: var(--primary-text);
    font-size: 16px;
    font-weight: 700;
}

.match-details-empty span {
    max-width: 360px;
    color: var(--muted-text);
    font-size: 13px;
    line-height: 1.5;
}

.match-details-close:focus-visible,
.match-details-favorite:focus-visible,
.match-details-tab:focus-visible {
    outline: 2px solid var(--brand-orange);
    outline-offset: 2px;
}

@keyframes matchLivePulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 13px rgba(255, 107, 0, 0.72);
    }

    50% {
        opacity: 0.38;
        transform: scale(0.72);
        box-shadow: 0 0 4px rgba(255, 107, 0, 0.28);
    }
}

@keyframes liveScoreLoadingPulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(0.72);
    }
}

/* Cookie consent popup. The banner is created by script.js only until a choice is saved. */
.cookie-consent {
    position: fixed;
    right: auto;
    bottom: 24px;
    left: 50%;
    z-index: 1500;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 158px;
    gap: 18px 24px;
    width: min(820px, calc(100vw - 32px));
    padding: 22px 28px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    background:
        linear-gradient(135deg, rgba(37, 47, 65, 0.98), rgba(22, 28, 40, 0.98)),
        rgba(22, 28, 40, 0.98);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
    color: var(--primary-text);
    transform: translateX(-50%);
    animation: cookieConsentIn 260ms ease both;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.cookie-consent[hidden],
.cookie-consent__settings[hidden],
.cookie-consent__button[hidden] {
    display: none;
}

/* Smooth exit after a visitor saves their preference. */
.cookie-consent--closing {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 14px);
    transition: opacity 180ms ease, transform 180ms ease;
}

.cookie-consent__content {
    display: flex;
    align-items: flex-start;
    min-width: 0;
    gap: 14px;
}

/* Real cookie SVG mark shown beside the consent copy. */
.cookie-consent__icon {
    display: block;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    margin-top: 1px;
    filter: drop-shadow(0 8px 16px rgba(245, 165, 28, 0.2));
}

.cookie-consent h2 {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0;
}

.cookie-consent p {
    max-width: 570px;
    color: rgba(236, 242, 252, 0.82);
    font-size: 13px;
    line-height: 1.55;
}

.cookie-consent__link {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--orange);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.cookie-consent__actions {
    display: flex;
    flex-direction: column;
    align-self: center;
    gap: 10px;
}

/* Once preferences are open, action buttons become a clear horizontal decision row. */
.cookie-consent--settings-open .cookie-consent__actions {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: flex-end;
    align-self: stretch;
    gap: 12px;
}

.cookie-consent__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: 4px;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.cookie-consent--settings-open .cookie-consent__button {
    width: auto;
    min-width: 148px;
    padding-inline: 18px;
}

.cookie-consent__button--primary {
    background: var(--orange-deep);
    color: #07080c;
}

.cookie-consent__button--primary:hover {
    filter: brightness(1.12);
}

.cookie-consent__button--muted {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(244, 248, 255, 0.88);
}

.cookie-consent__button--muted:hover {
    border-color: rgba(245, 165, 28, 0.32);
    background: rgba(255, 255, 255, 0.12);
    color: var(--primary-text);
}

/* Optional preference controls appear only after Manage settings is opened. */
.cookie-consent__settings {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.cookie-consent__option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.045);
    color: rgba(236, 242, 252, 0.72);
    font-size: 14px;
    line-height: 1.45;
}

.cookie-consent__option input {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: var(--orange);
}

.cookie-consent__option strong {
    display: block;
    margin-bottom: 3px;
    color: var(--primary-text);
    font-size: 14px;
}

.cookie-consent__link:focus-visible,
.cookie-consent__button:focus-visible,
.cookie-consent__option input:focus-visible {
    outline: 2px solid rgba(245, 165, 28, 0.82);
    outline-offset: 3px;
}

@keyframes cookieConsentIn {
    from {
        opacity: 0;
        transform: translate(-50%, 18px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Oddsent floating widgets — scroll-to-top + support chat
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Scroll to top ──────────────────────────────────────────────────────── */
.oddsent-scroll-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 9997;
    width: 4.8rem;
    height: 4.8rem;
    border: none!important;
    outline: none;
    border-radius: .4rem;
    background: var(--brand-orange)!important;
    color: #fff;
    cursor: pointer;
    display: -ms-flexbox;
    -ms-flex-pack: center;
    -ms-flex-align: center;
    -ms-transform: translateX(10rem);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease-in-out;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
}

.oddsent-scroll-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.oddsent-scroll-top:hover {
    background: var(--brand-orange)!important;
    color: #fff;
}

.oddsent-scroll-top:focus-visible {
    outline: 2px solid var(--brand-orange);
}

.oddsent-scroll-top svg {
    width: 1.125rem;
    height: 1.125rem;
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: .6;
    fill: currentColor;
    display: block;
    pointer-events: none;
    transition: all .2s ease-in-out;
}

/* Hover icon effect */
.oddsent-scroll-top:hover svg {
    color: #fff;
    opacity: 1;
    transform: rotate(-90deg) scale(1);
}

/* ── Chat widget ────────────────────────────────────────────────────────── */
.oddsent-chat-widget {
    position: fixed;
    bottom: 16px;
    right: 20px;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    font-family: 'Inter', 'Montserrat', 'Poppins', sans-serif;
}

--tw-inset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}

--tw-inset-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}

--tw-ring-offset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}

--tw-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}

/* Toggle / floating action button */
.oddsent-chat-toggle {
    position: relative;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: var(--brand-orange)!important;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* box-shadow:
        0 4px 26px rgba(255, 107, 0, 0.50),
        inset 0 1px 0 rgba(255, 255, 255, 0.18); */
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition:
        transform 0.25s cubic-bezier(.34, 1.56, .64, 1),
        box-shadow 0.25s ease;
    flex-shrink: 0;
}

.oddsent-chat-toggle:hover {
    transform: scale(1.1);
    box-shadow:
        0 8px 36px rgba(255, 107, 0, 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

.oddsent-chat-toggle:focus-visible {
    outline: 2px solid var(--brand-orange);
    outline-offset: 3px;
}

/* Rotate icon 180° and hide the default icon when open */
.oddsent-chat-toggle__icon {
    width: 26px;
    height: 26px;
    transition: transform 0.3s ease, opacity 0.2s ease;
}
.oddsent-chat-toggle__close-icon {
    position: absolute;
    opacity: 0;
    transform: rotate(-45deg) scale(0.6);
    transition: opacity 0.2s ease, transform 0.25s ease;
}

.oddsent-chat-toggle[aria-expanded="true"] .oddsent-chat-toggle__icon {
    opacity: 0;
    transform: rotate(180deg) scale(0.4);
    pointer-events: none;
}

.oddsent-chat-toggle[aria-expanded="true"] .oddsent-chat-toggle__close-icon {
    opacity: 1;
    transform: rotate(0) scale(1);
}

/* Chat panel */
.oddsent-chat-panel {
    position: absolute;
    bottom: 66px;
    right: 0;
    width: 320px;
    max-width: calc(100vw - 44px);
    background: rgba(20, 21, 29, 0.94);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;
    box-shadow:
        0 12px 44px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 107, 0, 0.08);
    overflow: hidden;
    transform-origin: bottom right;
    transition:
        opacity 0.25s ease,
        transform 0.28s cubic-bezier(.34, 1.56, .64, 1);
    opacity: 0;
    transform: scale(0.88) translateY(10px);
    pointer-events: none;
}

.oddsent-chat-panel:not([hidden]) {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

/* Panel header */
.oddsent-chat-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 16px;
    min-height: 56px;
    background: linear-gradient(135deg,
        rgba(255, 107, 0, 0.22) 0%,
        rgba(255, 107, 0, 0.06) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.oddsent-chat-panel__header strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
}

.oddsent-chat-panel__header span {
    display: block;
    font-size: 12.5px;
    color: var(--secondary-text);
    margin-top: 2px;
    line-height: 1.45;
}

.oddsent-chat-panel__close {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--secondary-text);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s, color 0.18s;
    margin: -2px -4px 0 0;
}

.oddsent-chat-panel__close:hover {
    background: rgba(255, 107, 0, 0.22);
    color: var(--brand-orange);
}

/* Refined floating assistant overrides */
.oddsent-scroll-top {
    bottom: 88px;
    right: 22px;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background:
        linear-gradient(145deg, rgba(255, 107, 0, 0.10), rgba(255, 255, 255, 0.03)),
        rgba(13, 14, 20, 0.88);
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.36),
        0 0 16px rgba(255, 107, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
    transition:
        opacity 0.24s ease,
        transform 0.24s ease,
        border-color 0.24s ease,
        box-shadow 0.24s ease,
        background 0.24s ease;
}

.oddsent-scroll-top:hover {
    border-color: rgba(255, 107, 0, 0.42);
    background:
        linear-gradient(145deg, rgba(255, 107, 0, 0.18), rgba(255, 255, 255, 0.05)),
        rgba(17, 18, 26, 0.94);
    color: #fff;
    box-shadow:
        0 16px 32px rgba(0, 0, 0, 0.42),
        0 0 18px rgba(255, 107, 0, 0.20);
}

.oddsent-chat-widget {
    bottom: 18px;
    right: 22px;
}

.oddsent-chat-toggle {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 107, 0, 0.28);
    background:
        linear-gradient(145deg, rgba(255, 107, 0, 0.14), rgba(255, 255, 255, 0.04)),
        rgba(13, 14, 20, 0.92);
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.44),
        0 0 18px rgba(255, 107, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        background 0.22s ease;
}

.oddsent-chat-toggle:hover {
    border-color: rgba(255, 107, 0, 0.58);
    background:
        linear-gradient(145deg, rgba(255, 107, 0, 0.22), rgba(255, 255, 255, 0.05)),
        rgba(18, 19, 28, 0.96);
    box-shadow:
        0 20px 48px rgba(0, 0, 0, 0.48),
        0 0 22px rgba(255, 107, 0, 0.24);
    /*  */
}

.oddsent-chat-toggle__status {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 9px;
    height: 9px;
    border: 2px solid rgba(13, 14, 20, 0.96);
    border-radius: 50%;
    background: var(--brand-orange);
    box-shadow: 0 0 10px rgba(255, 107, 0, 0.35);
}

.oddsent-chat-toggle__icon {
    transition: transform 0.22s ease, opacity 0.16s ease;
}

.oddsent-chat-toggle__close-icon {
    transform: rotate(-30deg) scale(0.72);
    transition: opacity 0.16s ease, transform 0.2s ease;
}

.oddsent-chat-toggle[aria-expanded="true"] .oddsent-chat-toggle__icon {
    transform: rotate(90deg) scale(0.62);
}

.oddsent-chat-panel {
    bottom: 68px;
    width: 400px;
    max-width: calc(100vw - 45px);
    height: 680px;
    max-height: calc(100vh - 118px);
    background:
        linear-gradient(180deg, rgba(21, 22, 31, 0.98), rgba(12, 13, 19, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--border-radius-sm);
    box-shadow:
        0 26px 72px rgba(0, 0, 0, 0.58),
        0 0 0 1px rgba(255, 107, 0, 0.06);
    transform: translateY(12px) scale(0.96);
    transition:
        opacity 0.24s ease,
        transform 0.26s cubic-bezier(.34, 1.32, .64, 1);
    display: flex;
    flex-direction: column;
}

.oddsent-chat-panel:not([hidden]) {
    transform: translateY(0) scale(1);
}

.oddsent-chat-panel__header {
    align-items: center;
    padding: 12px 16px;
    min-height: 56px;
    background: linear-gradient(135deg, var(--brand-orange) 0%, var(--orange-deep) 100%);
    color: #fff;
    flex-shrink: 0;
}

.oddsent-chat-panel__identity {
    font-size: 18px;
    color: #fff;
    padding: 4px 0 0;
}

.oddsent-chat-panel__tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.oddsent-chat-clear {
    color: #fff;
    padding: 2px 0 0;
    background: none;
    font-size: 14px;
    font-weight: 500;
    border: none;
    outline: none;
    border-bottom: 1px solid #fff;
    cursor: pointer;
}

.oddsent-chat-messages {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    padding: 12px 16px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 107, 0, 0.42) rgba(255, 255, 255, 0.08);
}

.oddsent-chat-message {
    display: flex;
    align-items: flex-end;
    width: 100%;
}

.oddsent-chat-message--user {
    justify-content: flex-end;
}

.oddsent-chat-message--bot {
    justify-content: flex-start;
}

.oddsent-chat-bubble {
    max-width: 82%;
    border-radius: var(--border-radius-md);
    padding: 11px 13px;
    font-size: 0.86rem;
    line-height: 1.45;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.oddsent-chat-message--bot .oddsent-chat-bubble {
    border-top-left-radius: 0;
    background: rgba(255, 255, 255, 0.075);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.88);
}

.oddsent-chat-message--user .oddsent-chat-bubble {
    border-top-right-radius: var(--border-radius-sm);
    background: linear-gradient(135deg, var(--brand-orange), var(--orange-deep));
    color: #fff;
    font-weight: 700;
}

.oddsent-chat-typing .oddsent-chat-bubble {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 12px 13px;
}

.oddsent-chat-typing i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.78);
    animation: oddsentChatTyping 0.9s ease-in-out infinite;
}

.oddsent-chat-typing i:nth-child(2) {
    animation-delay: 0.14s;
}

.oddsent-chat-typing i:nth-child(3) {
    animation-delay: 0.28s;
}

.oddsent-chat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 16px 12px;
    flex-shrink: 0;
}

.oddsent-chat-chips.is-hidden {
    display: none;
}

.oddsent-chat-chips button {
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.78);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 7px 10px;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.oddsent-chat-chips button:hover {
    border-color: rgba(255, 107, 0, 0.42);
    background: rgba(255, 107, 0, 0.12);
    color: #fff;
}

.oddsent-chat-composer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(8, 9, 14, 0.72);
    flex-shrink: 0;
}

.oddsent-chat-input {
    min-width: 0;
    flex: 1;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.065);
    color: #fff;
    font-family: inherit;
    font-size: 0.86rem;
    padding: 0 14px;
}

.oddsent-chat-input::placeholder {
    color: rgba(255, 255, 255, 0.46);
}

.oddsent-chat-send {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-orange), var(--orange-deep));
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-shadow: 0 10px 22px rgba(255, 107, 0, 0.22);
    transition:
        transform 0.18s ease,
        filter 0.18s ease,
        box-shadow 0.18s ease;
}

.oddsent-chat-send:hover {
    filter: brightness(1.08);
    box-shadow: 0 12px 26px rgba(255, 107, 0, 0.28);
}

.oddsent-chat-clear:focus-visible,
.oddsent-chat-chips button:focus-visible,
.oddsent-chat-input:focus-visible,
.oddsent-chat-send:focus-visible {
    outline: 2px solid var(--brand-orange);
    outline-offset: 3px;
}

@keyframes oddsentChatTyping {
    0%,
    80%,
    100% {
        opacity: 0.38;
        transform: translateY(0);
    }

    40% {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .oddsent-scroll-top,
    .oddsent-chat-toggle,
    .oddsent-chat-panel,
    .oddsent-chat-toggle__icon,
    .oddsent-chat-toggle__close-icon,
    .oddsent-chat-message,
    .oddsent-chat-chips button,
    .oddsent-chat-send {
        transition: none;
    }

    .oddsent-chat-typing i {
        animation: none;
    }
}

/* Platform Capabilities: premium feature grid with accent-driven hover states. */
.platform-capabilities-section {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 58px clamp(20px, 5vw, 64px) 84px;
    background:
        radial-gradient(circle at 50% 0%, rgba(87, 166, 255, 0.08), transparent 34%),
        transparent;
}

.platform-capabilities-shell {
    width: min(1640px, 100%);
    margin: 0 auto;
}

.platform-capabilities-header {
    display: grid;
    justify-items: center;
    gap: 14px;
    margin: 0 auto 78px;
    text-align: center;
}

.platform-capabilities-header h2 {
    margin: 18px 0 0;
    color: #ffffff;
    font-size: clamp(2.3rem, 4vw, 2.5rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: 0;
}

.platform-capabilities-header p {
    width: min(740px, 100%);
    color: rgba(148, 163, 184, 0.96);
    font-size: 16px;
    line-height: 1.5;
}

.platform-capabilities-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.capability-card {
    --cap-accent: #2563eb;
    --cap-glow: rgba(37, 99, 235, 0.25);
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 300px;
    overflow: hidden;
    padding: 32px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.85), rgba(2, 6, 23, 0.95));
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
    outline: none;
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        background 0.35s ease;
}

.capability-card--value {
    --cap-accent: #10b981;
    --cap-glow: rgba(16, 185, 129, 0.25);
}

.capability-card--live {
    --cap-accent: #f59e0b;
    --cap-glow: rgba(245, 158, 11, 0.25);
}

.capability-card--trust {
    --cap-accent: #22c55e;
    --cap-glow: rgba(34, 197, 94, 0.25);
}

.capability-card--confidence {
    --cap-accent: #3b82f6;
    --cap-glow: rgba(59, 130, 246, 0.25);
}

.capability-card--alerts {
    --cap-accent: #fb923c;
    --cap-glow: rgba(251, 146, 60, 0.25);
}

.capability-card::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 14% 8%, color-mix(in srgb, var(--cap-accent) 17%, transparent), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 42%);
    opacity: 0.72;
    content: "";
}

.capability-card > * {
    position: relative;
    z-index: 1;
}

.capability-card__line {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: block;
    width: 0;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--cap-accent), color-mix(in srgb, var(--cap-accent) 35%, #ffffff));
    transition: width 0.35s ease;
}

.capability-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
}

.capability-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--cap-accent) 13%, transparent);
    color: var(--cap-accent);
    transition:
        background-color 0.35s ease,
        box-shadow 0.35s ease,
        transform 0.35s ease;
}

.capability-card__icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.capability-card__badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 7px 14px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--cap-accent) 13%, transparent);
    color: var(--cap-accent);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.03em;
}

.capability-card h3 {
    margin: 0;
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: 0;
}

.capability-card p {
    margin: 14px 0 42px;
    color: rgba(148, 163, 184, 0.96);
    font-size: 16px;
    line-height: 1.5;
}

.capability-card__link {
    position: absolute;
    bottom: 28px;
    left: 32px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--cap-accent);
    font-size: 14px;
    font-weight: 800;
    opacity: 0;
    outline: none;
    transform: translateY(14px);
    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        color 0.35s ease;
}

.capability-card__link span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

.capability-card__link svg {
    display: block;
    width: 16px;
    height: 16px;
    fill: currentColor;
    transition: transform 0.35s ease;
}

.capability-card:hover,
.capability-card:focus-visible,
.capability-card:focus-within {
    border-color: var(--cap-accent);
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42), 0 0 46px var(--cap-glow);
    transform: translateY(-8px) scale(1.02);
}

.capability-card:hover .capability-card__line,
.capability-card:focus-visible .capability-card__line,
.capability-card:focus-within .capability-card__line {
    width: 100%;
}

.capability-card:hover .capability-card__icon,
.capability-card:focus-visible .capability-card__icon,
.capability-card:focus-within .capability-card__icon {
    background: color-mix(in srgb, var(--cap-accent) 24%, transparent);
    box-shadow: 0 0 26px var(--cap-glow);
    /*  */
}

.capability-card:hover .capability-card__link,
.capability-card:focus-visible .capability-card__link,
.capability-card:focus-within .capability-card__link,
.capability-card__link:focus-visible {
    opacity: 1;
    transform: translateY(0);
}

.capability-card:hover .capability-card__link svg,
.capability-card:focus-visible .capability-card__link svg,
.capability-card:focus-within .capability-card__link svg,
.capability-card__link:focus-visible svg {
    transform: translateX(3px);
}

.capability-card__link:focus-visible {
    border-radius: 999px;
    box-shadow: 0 0 0 3px var(--cap-glow);
}

.league-coverage-block {
    width: min(1140px, 100%);
    margin: 54px auto 0;
    padding: 52px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.league-coverage-header {
    display: grid;
    justify-items: center;
    gap: 18px;
    text-align: center;
}

.league-coverage-header h3 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.4rem, 3vw, 2.5rem);
    font-style: italic;
    font-weight: 800;
    line-height: 1.04;
    text-transform: uppercase;
}

.league-coverage-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
    margin: 48px auto 0;
}

.league-coverage-item {
    display: grid;
    justify-items: center;
    gap: 14px;
    min-width: 0;
    padding: 12px 8px 16px;
    text-align: center;
}

.league-coverage-logo {
    display: inline-flex;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 126px;
    height: 126px;
    overflow: hidden;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 24px 58px rgba(0, 0, 0, 0.26);
}

.league-coverage-logo img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

.league-coverage-logo--fallback {
    background:
        radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.92), transparent 24%),
        linear-gradient(135deg, #ffffff, #f3f7ff);
    color: #6d28d9;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -0.05em;
}

.league-coverage-logo--blue {
    color: #2563eb;
}

.league-coverage-logo--green {
    color: #16a34a;
}

.league-coverage-item strong {
    width: min(140px, 100%);
    color: #ffffff;
    font-size: 15px;
    font-style: italic;
    font-weight: 800;
    line-height: 1.05;
    text-transform: uppercase;
}

.league-coverage-contact {
    display: grid;
    justify-items: center;
    width: min(928px, 100%);
    margin: 56px auto 0;
    padding: 4rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    -webkit-backdrop-filter: blur(5rem);
    backdrop-filter: blur(5rem);
    background:
        radial-gradient(circle at 50% 0%, rgba(87, 166, 255, 0.10), transparent 38%),
        rgba(255, 255, 255, 0.055);
    text-align: center;
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.24);
}

.league-coverage-contact p {
    margin: 0;
    color: rgba(222, 230, 244, 0.82);
    font-size: 14px;
    line-height: 1.5;
}

.league-coverage-contact strong {
    display: block;
    margin-top: 22px;
    color: #ffffff;
    font-size: clamp(1.5rem, 2vw, 1.55rem);
    font-style: italic;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
}

.league-coverage-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 26px;
}

.league-coverage-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    min-width: 142px;
    padding: 12px 24px;
    border: 1px solid var(--brand-orange);
    border-radius: var(--border-radius-xs);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.league-coverage-button--primary {
    border-color: transparent;
    background: var(--brand-orange);
    color: #07080c;
}

.league-coverage-button:hover,
.league-coverage-button:focus-visible {
    border-color: var(--brand-orange);
    background: var(--brand-orange);
    color: #07080c;
}

.league-coverage-button--primary:hover,
.league-coverage-button--primary:focus-visible {
    background: #ff5500;
    border-color: #ff5500;
    color: #07080c;
}

/* Pricing Plans: subscription cards with local currency display. */
.pricing-plans-section {
    padding: 64px clamp(20px, 5vw, 64px) 92px;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 107, 0, 0.10), transparent 32%),
        radial-gradient(circle at 12% 30%, rgba(87, 166, 255, 0.08), transparent 26%),
        transparent;
}

.pricing-plans-shell {
    width: min(1640px, 100%);
    margin: 0 auto;
}

.pricing-plans-header {
    display: grid;
    justify-items: center;
    gap: 14px;
    margin: 0 auto 36px;
    text-align: center;
}

.pricing-plans-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.065);
    color: rgba(222, 230, 244, 0.86);
    font-size: 13px;
    font-weight: 600;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.pricing-plans-pill svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: var(--brand-orange);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pricing-plans-header h2 {
    width: min(820px, 100%);
    margin: 10px 0 0;
    color: #ffffff;
    font-size: clamp(1.5rem, 3.2vw, 2.5rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: 0;
}

.pricing-plans-header p {
    width: min(740px, 100%);
    color: rgba(148, 163, 184, 0.96);
    font-size: 16px;
    line-height: 1.55;
}

.pricing-currency-control {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 0 0 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 4px;
    transform: skew(-15deg);
    background: rgba(255, 255, 255, 0.055);
}

.pricing-currency-control label {
    color: rgba(222, 230, 244, 0.72);
    font-size: 13px;
    font-weight: 600;
}

.pricing-currency-control select {
    min-height: 38px;
    padding: 6px 30px 6px 12px;
    border: 1px solid rgba(255, 107, 0, 0.42);
    border-radius: 0;
    background: rgba(7, 8, 12, 0.86);
    color: #ffffff;
    font: inherit;
    outline: none;
    font-size: 13px;
    font-weight: 600;
}

.pricing-currency-control select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23ff6b00'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    cursor: pointer;
    color-scheme: dark;
}

.pricing-currency-control select option {
    background: #11131a;
    color: var(--primary-text);
}

.pricing-currency-control select option:disabled {
    color: rgba(222, 230, 244, 0.48);
}

.pricing-currency-control select option:hover,
.pricing-currency-control select option:focus {
    background: var(--brand-orange)!important;
    color: #ffffff !important;
    box-shadow: 0 0 0 100vmax var(--brand-orange) inset;
}

.pricing-currency-control .pricing-currency-control select option:checked {
    background: #11131a !important;
    color: var(--primary-text) !important;
}

.pricing-grid {
    display: grid;
    width: min(1180px, 100%);
    margin: 0 auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 540px;
    overflow: hidden;
    padding: 30px 28px 28px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    background:
        radial-gradient(circle at 20% 0%, rgba(87, 166, 255, 0.09), transparent 32%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(2, 6, 23, 0.96));
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.30);
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

.pricing-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: rgba(255, 107, 0, 0.42);
    content: "";
}

.pricing-card--featured {
    border-color: rgba(255, 107, 0, 0.42);
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 107, 0, 0.18), transparent 36%),
        linear-gradient(180deg, rgba(25, 28, 42, 0.95), rgba(10, 12, 23, 0.98));
    box-shadow: 0 30px 95px rgba(255, 107, 0, 0.10), 0 24px 80px rgba(0, 0, 0, 0.34);
}

.pricing-card--featured::before {
    background: linear-gradient(90deg, var(--brand-orange), #ffb020);
}

.pricing-card__popular {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--brand-orange);
    color: #07080c;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    box-shadow: 0 14px 28px rgba(255, 107, 0, 0.26);
}

.pricing-card__head {
    min-height: 74px;
    padding-right: 0;
}

.pricing-card--featured .pricing-card__head {
    padding-right: 112px;
}

.pricing-card__eyebrow {
    display: block;
    color: rgba(203, 216, 244, 0.66);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.pricing-card h3 {
    margin: 10px 0 0;
    color: #ffffff;
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
}

.pricing-card__price {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-top: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.pricing-card__price strong {
    color: #ffffff;
    font-size: clamp(2.1rem, 3vw, 2.8rem);
    font-weight: 950;
    line-height: 0.95;
}

.pricing-card__price span {
    margin-bottom: 5px;
    color: rgba(222, 230, 244, 0.62);
    font-size: 14px;
    font-weight: 800;
}

.pricing-card ul {
    display: grid;
    gap: 12px;
    margin: 24px 0 28px;
    padding: 0;
    list-style: none;
}

.pricing-card li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 10px;
    color: rgba(222, 230, 244, 0.78);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

.pricing-card li::before {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: rgba(255, 107, 0, 0.14);
    color: var(--brand-orange);
    font-size: 11px;
    font-weight: 950;
    content: "\2713";
}

.pricing-card__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    width: 100%;
    margin-top: auto;
    padding: 13px 18px;
    border: 1px solid rgba(255, 107, 0, 0.48);
    border-radius: 999px;
    background: rgba(255, 107, 0, 0.10);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    transform: skew(-15deg);
    transition: background-color 0.24s ease, border-color 0.24s ease, color 0.24s ease, box-shadow 0.24s ease, transform 0.24s ease;
}

.pricing-card--featured .pricing-card__button,
.pricing-card__button:hover,
.pricing-card__button:focus-visible {
    border-color: transparent;
    background: var(--brand-orange);
    color: #07080c;
    box-shadow: 0 16px 34px rgba(255, 107, 0, 0.24);
}

.pricing-card:hover,
.pricing-card:focus-within {
    border-color: rgba(255, 107, 0, 0.62);
    box-shadow: 0 34px 96px rgba(0, 0, 0, 0.44), 0 0 42px rgba(255, 107, 0, 0.16);
}

.pricing-card:hover .pricing-card__button,
.pricing-card:focus-within .pricing-card__button {
    background: #ff8f35;
    color: #07080c;
}

.pricing-currency-note {
    width: min(720px, 100%);
    margin: 24px auto 0;
    color: rgba(222, 230, 244, 0.58);
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
}

@supports not (color: color-mix(in srgb, #fff 50%, transparent)) {
    .capability-card::before {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 42%);
    }

    .capability-card__line {
        background: var(--cap-accent);
    }

    .capability-card__icon,
    .capability-card__badge {
        background: rgba(255, 255, 255, 0.07);
    }
}

@media (prefers-reduced-motion: reduce) {
    .capability-card,
    .capability-card__line,
    .capability-card__icon,
    .capability-card__link {
        transition: none;
    }

    .capability-card:hover,
    .capability-card:focus-visible,
    .capability-card:focus-within {
        transform: none;
    }
}

/* Clean professional Verified Track Record dashboard. */
.verified-track-record-section--final {
    position: relative;
    overflow: hidden;
    padding: 18px clamp(20px, 4vw, 56px) 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    background:
        radial-gradient(circle at 14% 8%, rgba(54, 118, 255, 0.12), transparent 28%),
        radial-gradient(circle at 88% 12%, rgba(255, 107, 0, 0.10), transparent 26%),
        linear-gradient(180deg, #05080d 0%, #07101a 48%, #05080d 100%);
}

.verified-track-record-section--final::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.42;
    content: "";
}

.verified-track-record-section--final :where(h2, h3, h4, p, span, strong, small, a, button) {
    letter-spacing: 0;
}

.verified-track-record-section--final .verified-track-record-shell {
    position: relative;
    z-index: 1;
    width: min(1640px, 100%);
    margin: 0 auto;
}

/* VERIFIED TRUST STRIP STYLES */
.verified-track-record-section--final .verified-trust-strip {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 14px 20px;
    margin: 0 0 34px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(16, 24, 38, 0.92), rgba(8, 13, 22, 0.96));
    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* CARD */
.verified-track-record-section--final .verified-trust-card {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 24px;
    border: 0;
    background: transparent;
    box-shadow: none;
    text-decoration: none;
    color: inherit;
}

/* REMOVE OLD AFTER DIVIDERS */
.verified-track-record-section--final .verified-trust-card::after {
    display: none !important;
}

/* ICON */
.verified-track-record-section--final .verified-trust-card__icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(87, 166, 255, 0.42);
    background: rgba(87, 166, 255, 0.10);
    color: #64a8ff;
}

.verified-track-record-section--final 
.verified-trust-card:nth-of-type(1) .verified-trust-card__icon {
    border-color: rgba(87, 166, 255, 0.42);
    background: rgba(87, 166, 255, 0.10);
    color: #64a8ff;
}

.verified-track-record-section--final 
.verified-trust-card:nth-of-type(2) .verified-trust-card__icon {
    border-color: rgba(255, 107, 0, 0.38);
    background: rgba(255, 107, 0, 0.10);
    color: #ff8f35;
}

.verified-track-record-section--final 
.verified-trust-card:nth-of-type(3) .verified-trust-card__icon {
    border-color: rgba(167, 139, 250, 0.42);
    background: rgba(167, 139, 250, 0.11);
    color: #a78bfa;
}

.verified-track-record-section--final 
.verified-trust-card:nth-of-type(4) .verified-trust-card__icon {
    border-color: rgba(0, 214, 143, 0.38);
    background: rgba(0, 214, 143, 0.10);
    color: #00d68f;
}

.verified-track-record-section--final .verified-trust-card__icon svg {
    width: 18px;
    height: 18px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* TEXT */
.verified-track-record-section--final .verified-trust-card span:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.verified-track-record-section--final .verified-trust-card strong {
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.verified-track-record-section--final .verified-trust-card small {
    color: var(--secondary-text);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
}

/* DIVIDER — supports your typo too */
.verified-track-record-section--final .divider,
.verified-track-record-section--final .divder {
    flex: 0 0 1px;
    width: 1px;
    height: 32px;
    border-radius: 999px;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(255, 255, 255, 0.16),
        transparent
    );
}

/* CTA */
.verified-track-record-section--final .verified-trust-card--cta {
    flex: 0 0 230px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 24px;
    border: 1px solid #ff6b00;
    border-radius: 6px;
    background: rgba(255, 107, 0, 0.03);
    color: #ff7a18;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s ease;
}

.verified-track-record-section--final .verified-trust-card--cta:hover {
    background: var(--brand-orange);
    color: #000;
    box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.08);
}

.verified-track-record-section--final .verified-track-record-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.verified-track-record-section--final .verified-track-record-header h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: none;
    color: #f8fbff;
    font-size: clamp(28px, 2.35vw, 32px);
    font-weight: 800;
    line-height: 1.08;
}

.verified-trk-rec-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    padding: 0;
}

.verified-track-record-section--final .verified-trust-card__icon svg,
.verified-track-record-section--final .verified-refresh-button svg,
.verified-track-record-section--final .verified-proof-icon svg,
.verified-track-record-section--final .verified-team-logo-placeholder svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.verified-track-record-section--final .verified-metric-icon svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.verified-track-record-section--final .verified-trust-card__icon svg {
    vertical-align: middle;
}

.verified-track-record-section--final .verified-title-icon svg {
    width: 26px;
    height: 26px;
    fill: #57e389;
    stroke: none;
}

.verified-track-record-section--final .verified-track-record-header p {
    max-width: 820px;
    margin: 0;
    color: rgba(222, 230, 244, 0.72);
    font-size: 16px;
    line-height: 1.5;
}

.verified-track-record-section--final .verified-refresh-panel {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.verified-track-record-section--final #verified-track-record-status {
    flex: 0 1 auto;
    margin: 0;
    color: var(--secondary-text);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
    text-align: right;
}

.verified-track-record-section--final .verified-refresh-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--secondary-text);
    cursor: pointer;
}

.verified-track-record-section--final .verified-refresh-button:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.verified-track-record-section--final .verified-refresh-button.is-loading svg {
    animation: verifiedRefreshSpin 0.9s linear infinite;
}

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

.verified-track-record-section--final .verified-track-record-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(420px, 1fr);
    gap: 20px;
    align-items: start;
}

.verified-track-record-section--final .verified-dashboard-left {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.verified-track-record-section--final .verified-record-summary {
    display: grid;
    grid-template-columns: minmax(280px, 1.35fr) repeat(3, minmax(170px, 1fr));
    gap: 12px;
    margin: 0;
}

.verified-track-record-section--final .verified-record-metric,
.verified-track-record-section--final .verified-proof-row,
.verified-track-record-section--final .verified-workflow-card,
.verified-track-record-section--final .verified-note-card,
.verified-track-record-section--final .verified-record-panel,
.verified-track-record-section--final .verified-bottom-bar {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    background:
        linear-gradient(180deg, rgba(18, 26, 38, 0.82), rgba(8, 13, 22, 0.9)),
        rgba(255, 255, 255, 0.025);
    box-shadow: 0 20px 54px rgba(0, 0, 0, 0.30);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.verified-track-record-section--final .verified-record-metric {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 184px;
    padding: 22px 24px;
    overflow: hidden;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.verified-track-record-section--final .verified-record-metric:not(.verified-record-metric--win-rate) {
    padding-bottom: 58px;
}

.verified-track-record-section--final .verified-record-metric::after {
    content: none;
}

.verified-track-record-section--final .verified-record-metric:hover,
.verified-track-record-section--final .verified-record-row:hover {
    border-color: rgba(255, 107, 0, 0.24);
    box-shadow: 0 24px 62px rgba(0, 0, 0, 0.34);
}

.verified-track-record-section--final .verified-record-metric--win-rate {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 86px;
    gap: 22px;
    align-items: center;
}

.verified-track-record-section--final .verified-record-metric--total {
    background:
        radial-gradient(circle at 88% 18%, rgba(167, 139, 250, 0.15), transparent 38%),
        linear-gradient(155deg, rgba(30, 31, 58, 0.88), rgba(9, 12, 24, 0.95));
}

.verified-track-record-section--final .verified-record-metric--settled {
    background:
        radial-gradient(circle at 88% 18%, rgba(69, 211, 122, 0.14), transparent 38%),
        linear-gradient(155deg, rgba(22, 50, 43, 0.86), rgba(8, 14, 20, 0.95));
}

.verified-track-record-section--final .verified-record-metric--pending {
    background:
        radial-gradient(circle at 88% 18%, rgba(255, 107, 0, 0.15), transparent 38%),
        linear-gradient(155deg, rgba(58, 36, 25, 0.86), rgba(13, 12, 18, 0.95));
}

.verified-track-record-section--final .verified-metric-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.verified-track-record-section--final .verified-metric-label,
.verified-track-record-section--final .verified-record-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(218, 228, 248, 0.72);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}

/* BASE LABEL STYLE */
.verified-track-record-section--final .verified-metric-label,
.verified-track-record-section--final .verified-record-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
}

/* WIN RATE */
.verified-track-record-section--final 
.verified-record-metric--win-rate 
.verified-metric-label {
    color: #dbe7ff;
}

/* TOTAL PICKS */
.verified-track-record-section--final 
.verified-record-metric--total 
.verified-metric-label {
    color: #b794ff;
}

/* SETTLED */
.verified-track-record-section--final 
.verified-record-metric--settled 
.verified-metric-label {
    color: #57e389;
}

/* PENDING */
.verified-track-record-section--final 
.verified-record-metric--pending 
.verified-metric-label {
    color: #ffb15c;
}

.verified-track-record-section--final .verified-record-metric strong {
    display: block;
    margin: 24px 0 12px;
    color: #ffffff;
    font-size: clamp(34px, 3vw, 46px);
    font-weight: 800;
    line-height: 1.05;
}

.verified-track-record-section--final .verified-record-metric--win-rate strong {
    margin: 18px 0 10px;
    font-size: clamp(34px, 3vw, 46px);
    letter-spacing: -0.05em;
    white-space: nowrap;
}

.verified-track-record-section--final .verified-record-metric--win-rate.verified-record-metric--tracking-started {
    grid-template-columns: minmax(0, 1fr);
}

.verified-track-record-section--final .verified-record-metric--tracking-started {
    justify-content: center;
}

.verified-track-record-section--final .verified-record-metric--tracking-started strong {
    margin: 12px 0 10px;
    font-size: clamp(24px, 2vw, 32px);
    line-height: 1.12;
    white-space: normal;
    overflow-wrap: normal;
}

.verified-track-record-section--final .verified-record-metric--tracking-started small {
    max-width: 330px;
}

.verified-track-record-section--final .verified-record-metric--awaiting strong {
    max-width: 100%;
    color: #ffffff;
    font-size: clamp(25px, 2vw, 31px);
    line-height: 1.18;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
}

.verified-track-record-section--final .verified-record-metric small {
    color: rgba(222, 230, 244, 0.78);
    font-size: 13px;
    line-height: 1.2;
}

.verified-track-record-section--final .verified-metric-icon {
    position: absolute;
    left: 24px;
    bottom: 24px;
    width: 24px;
    height: 24px;
    color: #ff8f35;
}

.verified-track-record-section--final .verified-record-metric--total .verified-metric-icon {
    color: #a78bfa;
}

.verified-track-record-section--final .verified-record-metric--settled .verified-metric-icon {
    color: #57e389;
}

.verified-track-record-section--final .verified-progress-ring {
    position: relative;
    display: grid;
    place-items: center;
    width: 86px;
    height: 86px;
    flex: 0 0 86px;
    border-radius: 50%;
    background: conic-gradient(
        var(--verified-progress-color, #57e389) calc(var(--verified-progress, 0) * 1%),
        rgba(255, 255, 255, 0.10) 0
    );
}

.verified-track-record-section--final .verified-progress-ring::before {
    position: absolute;
    inset: 11px;
    border-radius: 50%;
    background: #101827;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.34);
    content: "";
}

.verified-track-record-section--final .verified-progress-ring span {
    position: relative;
    z-index: 1;
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
}

.verified-track-record-section--final .verified-record-metric--perfect {
    --verified-progress-color: #57e389;
}

.verified-track-record-section--final .verified-record-metric--good {
    --verified-progress-color: #00d4ff;
}

.verified-track-record-section--final .verified-record-metric--warning {
    --verified-progress-color: #ffb020;
}

.verified-track-record-section--final .verified-record-metric--danger {
    --verified-progress-color: #ff4d4f;
}

.verified-track-record-section--final .verified-proof-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
}

.verified-track-record-section--final .verified-proof-item {
    display: flex;
    align-items: start;
    justify-content: flex-start;
    gap: 14px;
    min-height: 86px;
    padding: 18px 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.25s ease, transform 0.25s ease;
}

.verified-track-record-section--final .verified-proof-item:last-child {
    border-right: 0;
}

.verified-track-record-section--final .verified-proof-item:hover {
    background: rgba(255, 255, 255, 0.035);
    transform: none;
}

.verified-track-record-section--final .verified-proof-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(69, 211, 122, 0.34);
    border-radius: 50%;
    background: rgba(69, 211, 122, 0.10);
    color: #57e389;
}

.verified-track-record-section--final .verified-proof-item:nth-child(2) .verified-proof-icon {
    border-color: rgba(167, 139, 250, 0.34);
    background: rgba(167, 139, 250, 0.11);
    color: #a78bfa;
}

.verified-track-record-section--final .verified-proof-item:nth-child(3) .verified-proof-icon,
.verified-track-record-section--final .verified-proof-item:nth-child(4) .verified-proof-icon {
    border-color: rgba(255, 107, 0, 0.34);
    background: rgba(255, 107, 0, 0.10);
    color: #ff8f35;
}

.verified-track-record-section--final .verified-proof-item strong {
    display: block;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
}

.verified-track-record-section--final .verified-proof-item small {
    display: block;
    margin-top: 5px;
    color: rgba(222, 230, 244, 0.72);
    font-size: 13px;
    font-weight: normal;
    line-height: 1.25;
}

.verified-track-record-section--final .verified-workflow-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 228px;
    gap: 12px;
}

.verified-track-record-section--final .verified-workflow-card,
.verified-track-record-section--final .verified-note-card {
    padding: 20px;
}

.verified-track-record-section--final .verified-workflow-card h3,
.verified-track-record-section--final .verified-note-card h3,
.verified-track-record-section--final .verified-record-panel__head h3 {
    margin: 0;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
}

.verified-track-record-section--final .verified-timeline {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-top: 18px;
}

.verified-track-record-section--final .verified-timeline-step {
    position: relative;
    min-width: 0;
}

.verified-track-record-section--final .verified-timeline-step:not(:last-child)::after {
    position: absolute;
    top: 30px;
    left: 66px;
    width: calc(100% - 66px);
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.16), rgba(255, 107, 0, 0.38));
    content: "";
}

.verified-track-record-section--final .verified-timeline-icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 13px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.055);
    color: rgba(232, 240, 255, 0.88);
}

.verified-track-record-section--final .verified-timeline-icon img {
    width: 32px;
    height: 32px;
    display: block;
}

.verified-track-record-section--final .verified-timeline-step strong {
    display: block;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

.verified-track-record-section--final .verified-timeline-step small {
    display: block;
    margin-top: 6px;
    color: rgba(222, 230, 244, 0.68);
    font-size: 11px;
    line-height: 1.45;
}

.verified-track-record-section--final .verified-note-card {
    align-self: stretch;
}

.verified-track-record-section--final .verified-note-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-bottom: 14px;
    border: 1px solid rgba(31, 197, 219, 0.36);
    border-radius: 50%;
    background: rgba(31, 197, 219, 0.10);
    color: #31c5db;
    font-size: 14px;
    font-weight: 800;
}

.verified-track-record-section--final .verified-note-card p {
    margin: 12px 0 0;
    color: rgba(222, 230, 244, 0.76);
    font-size: 13px;
    line-height: 1.55;
}

.verified-track-record-section--final .verified-record-panel {
    padding: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 0%, rgba(87, 166, 255, 0.10), transparent 34%),
        linear-gradient(180deg, rgba(17, 24, 36, 0.88), rgba(8, 12, 19, 0.94));
}

.verified-track-record-section--final .verified-record-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 26px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.verified-track-record-section--final .verified-record-panel__head h3 {
    font-size: 16px;
}

.verified-track-record-section--final .verified-view-all-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 86px;
    min-height: 28px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 4px;
    color: rgba(232, 240, 255, 0.88);
    font-size: 12px;
    font-weight: 500;
    transition: all .3s ease;
}

.verified-track-record-section--final .verified-view-all-button:hover,
.verified-track-record-section--final .verified-history-link:hover {
    border-color: rgba(255, 107, 0, 0.55);
    color: var(--brand-orange);
}

.verified-track-record-section--final .verified-record-list {
    display: grid;
    gap: 0;
}

.verified-track-record-section--final .verified-record-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px;
    gap: 22px;
    align-items: center;
    min-height: 132px;
    padding: 20px 26px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0;
    background: transparent;
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.verified-track-record-section--final .verified-record-row:last-child {
    border-bottom: 0;
}

.verified-track-record-section--final .verified-record-row:hover {
    background: rgba(255, 255, 255, 0.032);
}

.verified-track-record-section--final .verified-record-main {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.verified-track-record-section--final .verified-record-kicker {
    color: rgba(203, 216, 244, 0.66);
    font-size: 11px;
}

.verified-track-record-section--final .verified-match-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    width: 100%;
    min-width: 0;
    margin: 0;
}

.verified-track-record-section--final .verified-team {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    color: var(--primary-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.22;
}

.verified-track-record-section--final .verified-team > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.verified-track-record-section--final .verified-team--away {
    justify-content: flex-end;
    text-align: right;
}

.verified-track-record-section--final .verified-vs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--muted-text);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.verified-track-record-section--final .verified-match-line h4 {
    min-width: 0;
    margin: 0;
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.verified-track-record-section--final .verified-match-line h4 span {
    color: rgba(222, 230, 244, 0.54);
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
}

.verified-track-record-section--final .verified-team-logo-shell,
.verified-track-record-section--final .verified-team-logo-placeholder,
.verified-track-record-section--final .team-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.verified-track-record-section--final .verified-team-logo-shell {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.04);
}

.verified-track-record-section--final .team-logo {
    object-fit: contain;
    padding: 4px;
}

.verified-track-record-section--final .verified-team-logo + .verified-team-logo-placeholder {
    display: none;
}

.verified-track-record-section--final .verified-team-logo-shell--empty .verified-team-logo-placeholder {
    display: inline-flex;
}

.verified-track-record-section--final .verified-team-logo-placeholder {
    color: rgba(230, 238, 255, 0.62);
    background: rgba(255, 255, 255, 0.035);
}

.verified-track-record-section--final .verified-team-logo-placeholder svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.5;
}

.verified-track-record-section--final .verified-record-details {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 0;
}

.verified-track-record-section--final .verified-record-details span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.045);
    color: rgba(222, 230, 244, 0.78);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    transform: skew(-15deg);
}

.verified-kickoff-pill {
    padding: 0;
}

.verified-track-record-section--final .verified-record-details svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.verified-track-record-section--final .verified-market-pill {
    background: rgba(255, 106, 0, 0.067)!important;
    border: 1px solid rgba(255, 107, 0, 0.16)!important;
    color: #ffb27a!important;
}

.verified-track-record-section--final .verified-confidence-badge {
    background: rgba(42, 209, 153, 0.096)!important;
    border: 1px solid rgba(42, 209, 153, 0.141)!important;
    color: rgba(42, 209, 153, 0.792)!important;
}

.verified-kickoff-pill.match__date {
    background: rgba(0, 179, 255, 0.087)!important;
    border: 1px solid rgba(0, 179, 255, 0.153)!important;
    color: #00b1ff!important;
}

.verified-track-record-section--final .verified-record-meta {
    display: grid;
    gap: 8px;
    justify-items: end;
    min-width: 0;
}

.verified-track-record-section--final .verified-record-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 28px;
    padding: 6px 10px;
    border-radius: var(--border-radius-xs);
    font-size: 11px;
    font-weight: 500;
    transform: skew(-15deg);
    text-transform: uppercase;
}

.verified-track-record-section--final .verified-record-status--pending {
    color: #ffd38a;
    background: rgba(255, 160, 45, 0.18);
}

.verified-track-record-section--final .verified-record-status--won {
    color: #91f6b0;
    background: rgba(69, 211, 122, 0.15);
}

.verified-track-record-section--final .verified-record-status--lost,
.verified-track-record-section--final .verified-record-status--error {
    color: #ffb6b6;
    background: rgba(255, 93, 93, 0.15);
}

.verified-track-record-section--final .verified-record-status--void {
    color: #d8def0;
    background: rgba(255, 255, 255, 0.10);
}

.verified-track-record-section--final .verified-score-label {
    color: #ffffff;
    font-size: 11px;
    font-weight: 500;
    font-style: italic;
    text-align: right;
}

.verified-track-record-section--final .verified-record-score {
    color: rgba(222, 230, 244, 0.72);
    font-size: 14px;
    font-weight: 800;
    text-align: right;
}

.verified-track-record-section--final .verified-history-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: min(390px, calc(100% - 52px));
    min-height: 48px;
    margin: 10px 26px 22px auto;
    border: 0;
    border-radius: var(--border-radius-xs);
    background: var(--brand-orange);
    color: #000;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.verified-track-record-section--final .verified-history-link > span {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.verified-track-record-section--final .verified-history-link svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    transition: transform 180ms ease;
}

.verified-track-record-section--final .verified-history-link:hover {
    color: #000;
    box-shadow: 0 10px 24px rgba(255, 122, 0, 0.24);
}

.verified-track-record-section--final .verified-history-link:hover svg {
    transform: translateX(2px);
}

.verified-track-record-section--final .verified-record-state {
    min-height: 190px;
    margin: 0;
    padding: 30px 26px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.verified-track-record-section--final .verified-record-state strong {
    color: #ffffff;
    font-size: 17px;
}

.verified-track-record-section--final .verified-record-state span {
    color: rgba(222, 230, 244, 0.72);
}

.verified-track-record-section--final .verified-record-metric--skeleton,
.verified-track-record-section--final .verified-record-row--skeleton {
    pointer-events: none;
}

.verified-track-record-section--final .verified-skeleton-line,
.verified-track-record-section--final .verified-skeleton-match span,
.verified-track-record-section--final .verified-skeleton-match b,
.verified-track-record-section--final .verified-skeleton-pills i {
    display: block;
    overflow: hidden;
    border-radius: 7px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.055));
    background-size: 220% 100%;
    animation: oddsentSkeletonPulse 1.35s ease-in-out infinite;
}

.verified-track-record-section--final .verified-skeleton-line--label {
    width: 44%;
    height: 12px;
}

.verified-track-record-section--final .verified-skeleton-line--value {
    width: 70%;
    height: 46px;
}

.verified-track-record-section--final .verified-skeleton-line--detail {
    width: 82%;
    height: 14px;
}

.verified-track-record-section--final .verified-skeleton-line--status {
    width: 88px;
    height: 32px;
    border-radius: 999px;
}

.verified-track-record-section--final .verified-skeleton-line--score {
    width: 78px;
    height: 14px;
}

.verified-track-record-section--final .verified-skeleton-match {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    gap: 14px;
    align-items: center;
    margin-top: 14px;
}

.verified-track-record-section--final .verified-skeleton-match span {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.verified-track-record-section--final .verified-skeleton-match b {
    height: 28px;
}

.verified-track-record-section--final .verified-skeleton-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.verified-track-record-section--final .verified-skeleton-pills i {
    width: 124px;
    height: 30px;
}

@keyframes oddsentSkeletonPulse {
    0% {
        background-position: 110% 0;
    }

    100% {
        background-position: -110% 0;
    }
}

.verified-track-record-section--final .verified-bottom-bar {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    gap: 28px;
    align-items: center;
    margin-top: 16px;
    padding: 22px 15px;
}

.verified-track-record-section--final .verified-bottom-main {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.verified-track-record-section--final .verified-bottom-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    color: #e0a85f;
}

.verified-track-record-section--final .verified-bottom-icon svg {
    width: 58px;
    height: 58px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.verified-track-record-section--final .verified-bottom-main strong {
    display: block;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
}

.verified-track-record-section--final .verified-bottom-main small {
    display: block;
    margin-top: 7px;
    color: rgba(222, 230, 244, 0.72);
    font-size: 13px;
    line-height: 1.2;
}

.verified-track-record-section--final .verified-bottom-items {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    padding-left: 30px;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.verified-track-record-section--final .verified-bottom-items .trustee__bullet {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.verified-track-record-section--final .verified-bottom-items .trustee__bullet > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #57a6ff;
}

.verified-track-record-section--final .verified-bottom-items .trustee__bullet svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.verified-track-record-section--final .verified-bottom-items .trustee__bullet:nth-child(2) > span {
    color: #ff4fb8;
}

.verified-track-record-section--final .verified-bottom-items .trustee__bullet:nth-child(3) > span {
    color: #a78bfa;
}

.verified-track-record-section--final .verified-bottom-items .trustee__bullet:nth-child(4) > span {
    color: #57e389;
}

.verified-track-record-section--final .verified-bottom-items .trustee__bullet > div {
    min-width: 0;
}

.verified-track-record-section--final .verified-bottom-items .trustee__bullet div span {
    display: block;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.18;
    color: white;
}

.verified-track-record-section--final .verified-bottom-items .trustee__bullet div p {
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 1.2;
    color: rgba(222, 230, 244, 0.72);
}

.sr-only {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.oddsent-footer {
    position: relative;
    overflow: hidden;
    padding: 70px clamp(20px, 5vw, 64px) 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 107, 0, 0.12), transparent 28%),
        linear-gradient(180deg, rgba(18, 19, 26, 0.98), #07080c 74%);
    color: var(--primary-text);
}

.oddsent-footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.56), rgba(255, 107, 0, 0.68), transparent);
    opacity: 0.72;
}

.oddsent-footer__inner,
.oddsent-footer__bottom {
    position: relative;
    width: 100%;
    max-width: 1640px;
    margin: 0 auto;
}

.oddsent-footer__inner {
    display: grid;
    grid-template-columns: minmax(260px, 0.95fr) minmax(460px, 1.3fr) minmax(360px, 0.9fr);
    gap: clamp(36px, 5vw, 88px);
    align-items: start;
}

.oddsent-footer__brand {
    max-width: 360px;
}

.oddsent-footer__logo {
    display: inline-flex;
    align-items: center;
    margin-bottom: 18px;
}

.oddsent-footer__logo img {
    display: block;
    width: 158px;
    height: auto;
}

.oddsent-footer__brand h2 {
    margin: 0 0 12px;
    color: #ffffff;
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: 0;
}

.oddsent-footer__brand p,
.oddsent-footer__newsletter p,
.oddsent-footer__bottom p {
    color: rgba(222, 230, 244, 0.72);
}

.oddsent-footer__brand p,
.oddsent-footer__newsletter p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.oddsent-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.oddsent-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.055);
    color: rgba(255, 255, 255, 0.82);
    transition: transform 200ms ease, border-color 200ms ease, color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}

.oddsent-footer__social a:hover,
.oddsent-footer__social a:focus-visible {
    border-color: rgba(255, 107, 0, 0.58);
    background: rgba(255, 107, 0, 0.11);
    color: #ff6b00;
    box-shadow: 0 14px 30px rgba(255, 107, 0, 0.16);
}

.oddsent-footer__social svg {
    width: 19px;
    height: 19px;
    fill: currentColor;
}

.oddsent-footer__links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(22px, 3vw, 38px);
}

.oddsent-footer__column h3,
.oddsent-footer__newsletter h3 {
    margin: 0 0 18px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

.oddsent-footer__column a {
    display: block;
    width: max-content;
    max-width: 100%;
    margin-top: 12px;
    color: rgba(222, 230, 244, 0.7);
    font-size: 14px;
    line-height: 1.25;
    transition: color 180ms ease, transform 180ms ease;
}

.oddsent-footer__column a:hover,
.oddsent-footer__column a:focus-visible {
    color: #ff6b00;
    transform: translateX(3px);
}

.oddsent-footer__newsletter {
    max-width: 390px;
    justify-self: end;
    padding-top: 2px;
}

.oddsent-footer__form {
    margin-top: 20px;
}

.oddsent-footer__input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    background: rgba(7, 8, 12, 0.54);
}

.oddsent-footer__input-row input {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    outline: 0;
    background: transparent;
    color: #ffffff;
    font: inherit;
    transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.oddsent-footer__input-row input::placeholder {
    color: rgba(222, 230, 244, 0.45);
}

.oddsent-footer__input-row button {
    min-height: 42px;
    padding: 0 17px;
    border: 0;
    border-radius: 0;
    background: #ff6b00;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: Montserrat, "Montserrat", sans-serif;
    transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.oddsent-footer__input-row button:hover,
.oddsent-footer__input-row button:focus-visible {
    background: #ff7a18;
    box-shadow: 0 14px 30px rgba(255, 107, 0, 0.34);
}

.oddsent-footer__form-status {
    display: block;
    min-height: 18px;
    margin-top: 10px;
    color: rgba(222, 230, 244, 0.7);
    font-size: 13px;
    line-height: 1.3;
}

.oddsent-footer__form-status.is-error {
    color: #ffb199;
}

.oddsent-footer__form-status.is-success {
    color: #57e389;
}

.oddsent-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 54px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.oddsent-footer__bottom p {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
}

.oddsent-footer__bottom p:last-child {
    color: rgba(255, 107, 0, 0.92);
    font-weight: 600;
}

/* Hero Section */
.contact-hero {
    position: relative;
    padding: clamp(80px, 12vw, 140px) clamp(20px, 5vw, 64px);
    text-align: center;
    overflow: hidden;
}

.contact-hero__glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 107, 0, 0.15) 0%, transparent 70%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}

.contact-hero__content {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
    animation: fadeUpAnimation 0.8s ease-out;
}

.contact-hero h1 {
    font-size: clamp(38px, 7vw, 64px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--primary-text);
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

.contact-hero__subtitle {
    font-size: clamp(16px, 2vw, 18.7px);
    color: var(--secondary-text);
    margin-bottom: 40px;
    line-height: 1.6;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

.contact-hero__actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 40px;
}

.contact-hero__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    border: none;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: var(--border-radius-xs);
    background: var(--brand-orange);
    transition: background 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
    text-decoration: none;
}

.contact-hero__btn span {
    display: inline-flex;
    align-items: center;
}

.contact-hero__btn span svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    transition: transform 180ms ease;
}

.contact-hero__btn:hover,
.contact-hero__btn:focus-visible {
    background: #ff7a18;
    color: #000;
}

.contact-hero__btn.btn-secondary {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: var(--secondary-text);
}

.contact-hero__btn.btn-secondary span svg {
    transform: rotate(270deg);
}

.contact-hero__btn.btn-secondary:hover,
.contact-hero__btn.btn-secondary:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--pulse-glow-orange);
}

/* Contact Info Section */
.contact__bx__divider {
    width: 100%;
    height: 1px;
    margin: 0;
    border: 0;
    background: #F5A51C;
    background: linear-gradient(90deg, rgba(245, 165, 28, 0.43) 0%, rgba(253, 29, 29, 0.24) 50%, rgba(252, 176, 69, 0.43) 100%); 
}

.contact__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    padding: clamp(40px, 8vw, 80px) clamp(20px, 5vw, 64px);
    width: 100%;
    margin: 0 auto;
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
}

.contact__info h1 {
    margin: 0;
    color: var(--primary-text);
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 700;
    line-height: 1.2;
}

.contact__info .contact__info__container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    width: 100%;
    max-width: 980px;
}

.contact__info .contact__info__container .contact__info__item__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 32px 28px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--border-radius-sm);
    background: rgba(255, 255, 255, 0.04);
    color: var(--primary-text);
    text-align: center;
    flex: 1;
}

.contact__info__item__card .contact__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border: 1px solid rgba(255, 107, 0, 0.1);
    border-radius: var(--border-radius-lg);
    background: rgba(255, 107, 0, 0.1);
    color: var(--brand-orange);
}

.contact__icon img {
    width: 32px;
    height: 32px;
    display: block;
}

.contact__info__item__card .contact__details {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contact__info__item__card .contact__details h2 {
    margin: 0;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.contact__info__item__card .contact__details .contact__link, .contact__info__item__card .contact__details p {
    color: var(--brand-orange);
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
    transition: color 180ms ease, transform 180ms ease;
}

.contact__info__item__card .contact__details .contact__link:hover, .contact__info__item__card .contact__details p:hover {
    color: #ff7a18;
}

.contact__form {
    display: flex;
    width: 100%;
    padding: clamp(40px, 8vw, 80px) clamp(20px, 5vw, 64px);
}

.contact__form .contact__form__section__container {
    display: flex;
    gap: 32px;
    width: 100%;
    max-width: 1640px;
    margin: 0 auto;
}

.contact__form__section__container .contact__form__container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.contact__form__section__container .contact__form__container .contact__form__header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.contact__form__section__container .contact__form__container .contact__form__header h1 {
    margin: 0;
    color: var(--primary-text);
    font-size: clamp(22px, 4vw, 28px);
    font-weight: 700;
    line-height: 1.2;
}

.contact__form__section__container .contact__form__container .contact__form__header p {
    margin: 0;
    color: var(--secondary-text);
    font-size: 15.7px;
    line-height: 1.6;   
}

.contact__form__container .contact__form__element {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact__form__container .contact__form__element .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contact__form__element .form-group .form-label {
    color: var(--primary-text);
    font-size: 14px;
    font-weight: 500;
}

.contact__form__element .form-group .form-label span {
    color: #ff6b00;
    font-size: 15px;
}

.contact__form__element .form-group input,
.contact__form__element .form-group textarea, 
.contact__form__element .form-group select {
    width: 100%;
    min-height: 40px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--border-radius-xs);
    background: rgba(255, 255, 255, 0.03);
    color: #ffffff;
    font: inherit;
    outline: none;
    transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.contact__form__element .form-group textarea {
    min-height: 154px;
    resize: none;
}

.contact__form__element .form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23ff6b00'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    cursor: pointer;
    color-scheme: dark;
}

.contact__form__element .form-group select option {
    background: #11131a;
    color: var(--primary-text);
}

.contact__form__element .form-group select option:disabled {
    color: rgba(222, 230, 244, 0.48);
}

.contact__form__element .form-group select option:hover,
.contact__form__element .form-group select option:focus {
    background: var(--brand-orange) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 100vmax var(--brand-orange) inset;
}

.contact__form__element .form-group select option:checked {
    background: #11131a !important;
    color: var(--primary-text) !important;
}

.contact__form__element .form-group select.contact-native-select--hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.contact-custom-select {
    position: relative;
    width: 100%;
}

.contact-custom-select__button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--border-radius-xs);
    background: rgba(255, 255, 255, 0.03);
    color: #ffffff;
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.contact-custom-select__button::after {
    content: "";
    width: 16px;
    height: 16px;
    margin-left: 14px;
    background-color: var(--brand-orange);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 180ms ease;
    flex: 0 0 auto;
}

.contact-custom-select.is-open .contact-custom-select__button,
.contact-custom-select__button:focus-visible {
    border-color: rgba(255, 107, 0, 0.72);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.14);
}

.contact-custom-select.is-open .contact-custom-select__button::after {
    transform: rotate(180deg);
}

.contact-custom-select__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--border-radius-xs);
    background: #11131a;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.36);
}

.contact-custom-select__option {
    width: 100%;
    min-height: 36px;
    padding: 9px 14px;
    border: 0;
    background: transparent;
    color: var(--primary-text);
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease;
}

.contact-custom-select__option:hover,
.contact-custom-select__option:focus-visible {
    background: var(--brand-orange);
    color: #ffffff;
    outline: 0;
}

.contact-custom-select__option[aria-selected="true"] {
    color: #ffffff;
}

.contact-custom-select__option[aria-disabled="true"] {
    color: rgba(222, 230, 244, 0.48);
}

.contact__form__container .contact__form__element .form-group input::placeholder,
.contact__form__element .form-group textarea::placeholder,
.contact__form__element .form-group select::placeholder {
    color: rgba(222, 230, 244, 0.45);
}

.contact__form__container .contact__form__element .form-group input:focus,
.contact__form__element .form-group textarea:focus,
.contact__form__element .form-group select:focus {
    border-color: rgba(255, 107, 0, 0.72);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.14);
}

.contact__form__container .contact__form__element .contact__form__submit {
    display: flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    min-height: 44px;
    padding: 10px 24px;
    border: 0;
    border-radius: var(--border-radius-xs);
    background: var(--brand-orange);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.contact__form__container .contact__form__element .contact__form__submit:hover,
.contact__form__element .contact__form__submit:focus-visible {
    background: #ff7a18;
    box-shadow: 0 14px 30px rgba(255, 107, 0, 0.34);
}

/* Checkbox Group */
.contact__form__container .contact__form__element .contact__form-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.contact__form__container .contact__form__element .contact__form-checkbox input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    accent-color: var(--brand-orange);
}

.contact__form__container .contact__form__element .contact__form-checkbox .form-check-label {
    font-size: 14px;
    color: var(--secondary-text);
    cursor: pointer;
    line-height: 1.5;
}

.form-error {
    display: block;
    font-size: 12px;
    color: #dc3545;
    margin-top: 6px;
    /* min-height: 16px; */
}

.contact__form__section__container .contact__form__context__area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: 100%;
    padding: 0% 28px;
}

.contact__form__context__area .contact__form__context__header h2 {
    margin: 0;
    color: var(--primary-text);
    font-size: clamp(18px, 3vw, 22px);
    font-weight: 700;
    line-height: 1.2;
}  

.contact__form__context__area .contact__form__area__content {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.contact__form__context__area .contact__form__area__content .contact__form__general {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 1rem;
}

.contact__form__context__area .contact__form__area__content .contact__form__general h2 {
    margin: 0;
    color: var(--primary-text);
    font-size: clamp(16px, 3vw, 18px);
    font-weight: 600;
    line-height: 1.3;
}

.contact__form__context__area .contact__form__area__content .contact__form__general p {
    margin: 0;
    color: var(--secondary-text);
    line-height: 1.6;
}

/* FAQ Section */
.contact-faq {
    padding: clamp(60px, 10vw, 100px) clamp(20px, 5vw, 64px);
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.02) 0%, rgba(255, 255, 255, 0.01) 100%);
}

.contact-faq__container {
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
}

.contact-faq h2 {
    font-size: clamp(32px, 5vw, 48px);
    text-align: center;
    margin-bottom: clamp(40px, 5vw, 60px);
    animation: fadeUpAnimation 0.8s ease-out;
}

.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-item {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--border-radius-xs);
    overflow: hidden;
    animation: fadeUpAnimation 0.8s ease-out;
}

.faq-item:nth-child(1) { animation-delay: 0.1s; }
.faq-item:nth-child(2) { animation-delay: 0.2s; }
.faq-item:nth-child(3) { animation-delay: 0.3s; }
.faq-item:nth-child(4) { animation-delay: 0.4s; }
.faq-item:nth-child(5) { animation-delay: 0.5s; }

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20px 24px;
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    user-select: none;
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-text);
    border: none;
    text-align: left;
    transition: all 300ms ease;
}

.faq-question:hover {
    background: rgba(255, 107, 0, 0.08);
    border-color: rgba(255, 107, 0, 0.2);
}

.faq-question::after {
    content: '';
    width: 20px;
    height: 20px;
    background-color: var(--brand-orange);
    -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>') center / contain no-repeat;
    mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>') center / contain no-repeat;
    transition: transform 300ms ease;
    flex-shrink: 0;
}

.faq-item[open] .faq-question::after {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 0 24px 20px;
    font-size: 15px;
    color: var(--secondary-text);
    line-height: 1.7;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    animation: slideDownAnimation 0.3s ease-out;
}

.faq-answer p {
    margin-top: 1rem;
}