/* style.css */
/* =========================================================
   FREE SURE BETS
   TARGET DESKTOP DESIGN
========================================================= */

:root {
    --green: #087a45;
    --green-dark: #004d2b;
    --green-deep: #003b22;
    --green-light: #e9f5ee;

    --yellow: #f7b817;
    --yellow-dark: #d99d00;
    --yellow-light: #fff4cf;

    --red: #e92d2d;
    --red-dark: #c91f1f;

    --gray-bg: #f4f4f4;
    --gray-card: #ffffff;
    --gray-border: #e3e6e4;

    --text-dark: #111815;
    --text-medium: #637069;
    --text-light: #8b9590;

    --shadow:
        0 2px 8px rgba(0, 45, 28, 0.09);

    --radius: 9px;
}


:root[data-theme="dark"] {
    --green-light: #173d2b;
    --yellow-light: #4e4014;
    --gray-bg: #111814;
    --gray-card: #1b2620;
    --gray-border: #34443a;
    --text-dark: #edf5ef;
    --text-medium: #b5c2b9;
    --text-light: #8e9c93;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.34);
}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background: var(--gray-bg);

    color: var(--text-dark);

    transition:
        background 0.2s ease,
        color 0.2s ease;
}


/* =========================================================
   HEADER
========================================================= */

.site-header {
    background: var(--green-deep);

    color: white;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.18);

    height: 116px;

    position: relative;

    z-index: 10;
}


.header-inner {
    max-width: 1670px;

    height: 116px;

    margin: 0 auto;

    padding:
        0
        30px;

    display: flex;

    align-items: center;

    gap: 34px;
}


.logo-container {
    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    height: 120px;

    flex-shrink: 0;
}


.site-logo {
    height: 110px;

    width: auto;

    display: block;
}


/* =========================================================
   MAIN NAV
========================================================= */

.main-nav {
    display: flex;

    align-items: center;

    gap: 7px;

    flex: 1;

    height: 100%;
}


.nav-link {
    color: white;

    text-decoration: none;

    font-size: 15px;

    font-weight: 800;

    padding:
        13px
        17px;

    border-radius: 5px;

    white-space: nowrap;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}


.nav-link:hover {
    background:
        rgba(255, 255, 255, 0.08);
}


.nav-link.active {
    color: var(--yellow);

    background: transparent;
}


.telegram-mobile-label {
    display: none;
}


/* =========================================================
   HEADER ACTIONS
========================================================= */

.header-actions {
    display: flex;

    align-items: center;

    gap: 18px;

    flex-shrink: 0;
}


.theme-button,
.favorites-button {
    border: 0;

    cursor: pointer;

    font-weight: 800;
}


.theme-button {
    width: 40px;

    height: 40px;

    border-radius: 50%;

    background: transparent;

    color: white;

    font-size: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}


.theme-button:hover {
    background: rgba(255, 255, 255, 0.12);
}


.theme-button:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 3px;
}


.favorites-button {
    height: 40px;

    padding:
        0
        22px;

    border-radius: 6px;

    border: 1.5px solid var(--yellow);

    background: transparent;

    color: var(--yellow);

    font-size: 13px;

    letter-spacing: 0.2px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

.favorites-icon {
    line-height: 1;
}

.favorites-button.active {
    background: var(--yellow);
    color: #171200;
}


/* =========================================================
   PAGE
========================================================= */

.page-container {
    max-width: 1670px;

    margin: 0 auto;

    padding:
        18px
        28px
        30px;
}


/* =========================================================
   DAY TABS
========================================================= */

.day-tabs {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    gap: 0;

    margin-bottom: 25px;

    background: white;

    border:
        1px solid
        #e1e4e2;

    border-radius: 10px;

    overflow: hidden;

    box-shadow:
        0 2px 7px rgba(0, 0, 0, 0.06);
}


.day-tab {
    position: relative;

    border: 0;

    border-right:
        1px solid
        #e4e6e5;

    background: white;

    min-height: 61px;

    padding:
        8px
        18px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    cursor: pointer;

    text-align: left;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}


.day-tab:last-child {
    border-right: 0;
}

.live-tab .day-icon {
    color: var(--red);
    font-size: 15px;
}

.live-tab.active .day-icon {
    color: var(--yellow);
}

/* Keep the selected Live tab visually identical to selected date tabs. */
.day-tab.live-tab.active {
    background: linear-gradient(135deg, #087a45, #006a3b);
    color: white;
    border-color: transparent;
}


.day-tab:hover {
    background: #f7faf8;
}


.day-tab.active {
    background:
        linear-gradient(
            135deg,
            #087a45,
            #006a3b
        );

    color: white;

    border-color: transparent;
}


.day-tab.active::after {
    content: "";

    position: absolute;

    bottom: 0;

    left: 50%;

    transform:
        translateX(-50%);

    width: 100%;

    height: 4px;

    background: var(--yellow);
}


.day-icon {
    font-size: 21px;

    line-height: 1;
}


.day-tab strong {
    display: block;

    font-size: 14px;

    font-weight: 800;

    line-height: 1.15;
}


.day-tab small {
    display: block;

    margin-top: 4px;

    font-size: 12px;

    opacity: 0.78;
}


.day-tab.active small {
    opacity: 0.95;
}


/* =========================================================
   CONTENT GRID
========================================================= */

.content-grid {
    display: grid;

    grid-template-columns: minmax(0, 1fr);

    gap: 20px;

    align-items: start;
}

/* Keep supplementary navigation beneath the match list, not in a side rail. */
.below-matches {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.below-matches .sidebar-card { height: 100%; }

/* Older page templates retain the sidebar wrapper; render it in the same
   below-content position until those templates are refreshed. */
.content-grid > .sidebar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 20px;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.section-heading {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    margin-bottom: 15px;
}


.section-heading h1 {
    margin: 0;

    font-size: 27px;

    line-height: 1.1;

    font-weight: 800;
}


.section-heading p {
    margin:
        7px
        0
        0;

    color: var(--text-medium);

    font-size: 15px;
}


.filter-button {
    border: 0;

    background: var(--green-deep);

    color: white;

    padding:
        11px
        18px;

    border-radius: 6px;

    font-size: 12px;

    font-weight: 800;

    cursor: pointer;
}

.filter-control { position: relative; }

.filter-panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 20;
    width: 245px;
    max-height: min(65vh, 430px);
    overflow-y: auto;
    border: 1px solid var(--gray-border);
    border-radius: 8px;
    background: var(--gray-card);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .2);
}

.filter-control.open .filter-panel { display: block; }

.filter-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 11px 13px;
    border: 0;
    border-bottom: 1px solid var(--gray-border);
    background: transparent;
    color: var(--text-dark);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.filter-option:last-child { border-bottom: 0; }
.filter-option:hover, .filter-option.active { background: var(--green-light); color: var(--green-dark); }


/* =========================================================
   MATCH CARD
========================================================= */

.match-card {
    position: relative;

    width: 100%;

    background: var(--gray-card);

    border:
        1px solid
        #e2e5e3;

    border-radius: 9px;

    margin-bottom: 10px;

    padding: 0;

    overflow: hidden;

    box-shadow: var(--shadow);

    /*
       IMPORTANT:

       The original HTML has:

       match-league-row
       match-main
       match-bottom

       We flatten match-main and match-bottom so that their
       children can participate in this grid.

       This lets the existing markup produce the compact
       target-style horizontal match card.
    */

    display: grid;

    grid-template-columns:
        minmax(155px, 1fr)
        130px
        minmax(155px, 1fr)
        142px;

    grid-template-rows:
        36px
        109.2px;

    align-items: center;
}


/* =========================================================
   FLATTEN EXISTING MATCH WRAPPERS
========================================================= */

.match-main,
.match-bottom {
    display: contents;
}


/* =========================================================
   LEAGUE HEADER
========================================================= */

.match-league-row {
    grid-column: 1 / -1;

    grid-row: 1;

    align-self: center;

    padding:
        0
        18px;
}


.country-name {
    display: flex;

    align-items: center;

    gap: 6px;

    color: #123e2c;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.1px;
}


.country-flag {
    width: 19px;

    height: 13px;

    object-fit: cover;

    border-radius: 2px;

    flex-shrink: 0;
}


.country-ball {
    font-size: 14px;
}


.league-separator {
    color: #87918c;

    margin:
        0
        1px;
}


.league-name {
    color: #293a32;

    font-weight: 600;
}


/* =========================================================
   TEAM COLUMNS
========================================================= */

.team-column {
    grid-row: 2;

    min-width: 0;

    height: 96px;

    display: grid;

    grid-template-columns: minmax(0, 1fr);

    grid-template-rows: auto auto;

    align-content: center;

    text-align: center;

    gap: 5px;
}


.team-info {
    grid-row: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-width: 0;
}


.team-form {
    grid-row: 2;

    width: 100%;

    display: flex;

    justify-content: center;
}


.home-column {
    grid-column: 1;

    padding:
        0
        6px
        0
        15px;
}


.away-column {
    grid-column: 3;

    padding:
        0
        15px
        0
        6px;
}


/* =========================================================
   TEAM LOGOS
========================================================= */

.team-logo {
    width: 48px;

    height: 48px;

    max-width: 48px;

    max-height: 48px;

    object-fit: contain;

    display: block;

    margin: 0;

    flex-shrink: 0;
}


.team-logo-placeholder {
    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0;

    font-size: 25px;

    flex-shrink: 0;
}


/* =========================================================
   TEAM NAME
========================================================= */

.team-name {
    text-decoration: none;
    max-width: 145px;

    color: #101713;

    font-size: 14px;

    font-weight: 800;

    text-align: left;

    text-transform: uppercase;

    line-height: 1.15;

    word-wrap: break-word;
}


/* =========================================================
   FORM
========================================================= */

.form-row {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 3px;

    margin-top: 0;
}


.form-badge {
    width: 18px;

    height: 18px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 9px;

    font-weight: 800;

    color: white;
}


.form-win {
    background: var(--green);
}


.form-loss {
    background: #ef3434;
}


.form-draw {
    background: #aeb4b0;
}


/* =========================================================
   MATCH CENTER
========================================================= */

.match-center {
    grid-column: 2;

    grid-row: 2;

    min-height: 96px;

    height: 96px;

    padding:
        0
        10px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    border-left:
        1px solid
        #e2e6e3;

    border-right:
        1px solid
        #e2e6e3;
}


/* =========================================================
   MATCH TIME
========================================================= */

.match-time {
    font-size: 18px;

    font-weight: 800;

    color: #101713;

    line-height: 1;
}


.match-timezone {
    margin-top: 5px;

    font-size: 10px;

    color: #77817c;

    font-weight: 700;
}


.match-score {
    margin-top: 5px;
    color: var(--green-dark);
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
}

.match-score-live {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 7px;
}

.live-minute {
    color: var(--red-dark);
    font-size: 12px;
}


/* =========================================================
   VS
========================================================= */

.vs-text {
    margin:
        5px
        0;

    font-size: 15px;

    font-weight: 900;

    color: #0b3d28;
}


/* =========================================================
   STADIUM
========================================================= */

.stadium {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 4px;

    max-width: 135px;

    font-size: 9px;

    font-weight: 700;

    color: #26332d;

    line-height: 1.2;

    text-align: center;
}


.stadium-icon {
    font-size: 11px;

    flex-shrink: 0;
}


.match-location {
    margin-top: 2px;

    font-size: 9px;

    color: #7b847f;
}


.match-status-badge {
    position: center;

    top: 43px;

    right: 58px;

    margin: 0;

    font-size: 9px;

    font-weight: 800;

    color: #5d6661;

    background: #e9ecea;

    border-radius: 5px;

    padding:
        5px
        9px;
}


/* =========================================================
   ANALYSIS / COMPARISON
========================================================= */

.comparison-section {
    grid-column: 4;

    grid-row: 2;

    width: 100%;

    min-width: 0;

    padding:
        0
        8px;
}


/* =========================================================
   COMPARISON ROW
========================================================= */

.comparison-row {
    width: 100%;

    display: grid;

    grid-template-columns:
        66px
        39px
        minmax(80px, 1fr)
        39px;

    align-items: center;

    gap: 5px;

    margin:
        5px
        0;
}


/* =========================================================
   COMPARISON LABEL
========================================================= */

.comparison-label {
    font-size: 10px;

    font-weight: 800;

    color: #25342c;

    letter-spacing: 0.2px;

    white-space: nowrap;
}


/* =========================================================
   COMPARISON VALUES
========================================================= */

.comparison-home-value,
.comparison-away-value {
    font-size: 10px;

    font-weight: 800;
}


.comparison-home-value {
    text-align: right;
}


.comparison-away-value {
    text-align: left;
}


@media (min-width: 851px) {
    .comparison-label,
    .comparison-home-value,
    .comparison-away-value {
        font-size: 15px;
    }
}

/* Keep the compact mockup composition after the legacy responsive rules. */
@media (max-width: 800px) {
    .site-header { height: 162px; }
    .header-inner { height: 80px; min-height: 0; display: block; padding: 0 25px; }
    .logo-container { height: 80px; }
    .main-nav { position: absolute; top: 80px; left: 0; width: 100%; height: 82px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); flex-direction: initial; align-items: stretch; overflow: visible; }
    .nav-home, .nav-about, .nav-contact { display: flex; }
    .nav-link, .country-menu-toggle, .favorites-button { min-height: 82px; padding: 4px; font-size: 9px; }
    .header-actions { display: contents; width: auto; }
    .theme-button { display: none; }
    .day-tabs { display: flex; grid-template-columns: none; overflow-x: auto; }
    .sidebar { display: flex; }
}

@media (max-width: 560px) {
    .site-header { height: 149px; }
    .header-inner { height: 74px; padding: 0 17px; }
    .logo-container { height: 74px; }
    .main-nav { top: 74px; height: 75px; }
    .nav-link, .country-menu-toggle, .favorites-button { min-height: 75px; font-size: 8px; }
}

/* =========================================================
   DARK THEME
========================================================= */

:root[data-theme="dark"] .day-tabs,
:root[data-theme="dark"] .day-tab,
:root[data-theme="dark"] .sidebar-card,
:root[data-theme="dark"] .market-item,
:root[data-theme="dark"] .loading,
:root[data-theme="dark"] .error,
:root[data-theme="dark"] .no-matches {
    background: var(--gray-card);
    color: var(--text-dark);
}


:root[data-theme="dark"] .day-tabs,
:root[data-theme="dark"] .day-tab,
:root[data-theme="dark"] .match-card,
:root[data-theme="dark"] .sidebar-card,
:root[data-theme="dark"] .market-item,
:root[data-theme="dark"] .loading,
:root[data-theme="dark"] .error,
:root[data-theme="dark"] .no-matches,
:root[data-theme="dark"] .match-center {
    border-color: var(--gray-border);
}


:root[data-theme="dark"] .day-tab:hover {
    background: #26352c;
}


:root[data-theme="dark"] .day-tab.active {
    background: linear-gradient(135deg, #0a8650, #006a3b);
    color: white;
    border-color: transparent;
}


:root[data-theme="dark"] .day-tab.live-tab.active {
    background: linear-gradient(135deg, #0a8650, #006a3b);
    color: white;
    border-color: transparent;
}


:root[data-theme="dark"] .country-name,
:root[data-theme="dark"] .league-name,
:root[data-theme="dark"] .team-name,
:root[data-theme="dark"] .match-time,
:root[data-theme="dark"] .stadium,
:root[data-theme="dark"] .comparison-label,
:root[data-theme="dark"] .market-item {
    color: var(--text-dark);
}

:root[data-theme="dark"] .match-score,
:root[data-theme="dark"] .vs-text {
    color: #ffffff;
}


:root[data-theme="dark"] .league-separator,
:root[data-theme="dark"] .match-timezone,
:root[data-theme="dark"] .match-location,
:root[data-theme="dark"] .match-status-badge {
    color: var(--text-medium);
}


:root[data-theme="dark"] .match-status-badge {
    background: #2d3b33;
}


:root[data-theme="dark"] .comparison-bar {
    background: #3b4a41;
}


/* =========================================================
   COMPARISON BAR
========================================================= */

.comparison-bar {
    width: 100%;

    height: 8px;

    display: flex;

    overflow: hidden;

    border-radius: 20px;

    background: #e6e9e7;
}


.comparison-home-bar,
.comparison-away-bar {
    height: 100%;

    flex-shrink: 0;

    transition:
        width 0.25s ease,
        background 0.25s ease;
}


/* =========================================================
   DYNAMIC COMPARISON COLOURS
========================================================= */

.comparison-green {
    color: #087a45 !important;
}


.comparison-red {
    color: #c9111b !important;
}


.comparison-neutral {
    color: #777777 !important;
}


.comparison-home-bar.comparison-green,
.comparison-away-bar.comparison-green {
    background: #087a45;
}


.comparison-home-bar.comparison-red,
.comparison-away-bar.comparison-red {
    background: #c9111b;
}


.comparison-home-bar.comparison-neutral,
.comparison-away-bar.comparison-neutral {
    background: #777777;
}


/* =========================================================
   PREDICTION SECTION
========================================================= */

.prediction-section {
    grid-column: 4;

    grid-row: 2;

    /* Keep the link above adjacent flattened grid content. */
    position: relative;

    z-index: 1;

    height: 96px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        0
        10px;
}


/* =========================================================
   PREDICTION BUTTON
========================================================= */

.prediction-button {
    width: 130px;

    min-height: 37px;

    border: none;

    background: var(--yellow);

    color: #111111;

    text-decoration: none;

    font-size: 10px;

    font-weight: 900;

    padding:
        0
        12px;

    border-radius: 6px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    white-space: nowrap;

    box-shadow:
        0 2px 5px
        rgba(170, 120, 0, 0.16);

    transition:
        transform 0.15s ease,
        background 0.15s ease;
}


.prediction-button span {
    font-size: 16px;

    line-height: 10px;
}


.prediction-button:hover {
    background: #ffca22;

    transform: translateY(-1px);
}


/* =========================================================
   FAVORITES
========================================================= */

.favorite-toggle {
    border: 1px solid #d6a300;
    background: white;
    color: #b18a00;
    cursor: pointer;
    font: inherit;
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
}

.favorite-toggle:hover,
.favorite-toggle:focus-visible,
.favorite-toggle.is-favorite {
    background: var(--yellow);
    color: #191300;
}

.favorite-toggle:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

.favorite-toggle-desktop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 28px;
    margin-bottom: 6px;
    border-radius: 5px;
}

.favorite-toggle-mobile { display: none; }

.prediction-section { flex-direction: column; }


/* =========================================================
   SIDEBAR
========================================================= */

.sidebar {
    display: flex;

    flex-direction: column;

    gap: 14px;
}


.sidebar-card {
    background: white;

    border:
        1px solid
        var(--gray-border);

    border-radius: 9px;

    overflow: hidden;

    box-shadow: var(--shadow);
}


.sidebar-title {
    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        12px
        16px;

    background: var(--green-deep);

    color: white;

    font-size: 13px;

    font-weight: 800;
}


/* =========================================================
   MARKETS
========================================================= */

.market-list {
    padding: 0;
}


.market-item {
    width: 100%;

    min-height: 40px;

    border: 0;

    background: white;

    padding:
        10px
        16px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    cursor: pointer;

    border-bottom:
        1px solid
        #eeeeee;

    font-size: 12px;

    text-align: left;

    color: #214235;

    font-weight: 600;

    text-decoration: none;
}


.market-item:hover,
.market-item.active {
    background: var(--green-light);
}


.market-arrow {
    color: var(--green);

    font-weight: 800;
}


.view-markets {
    width: 100%;

    border: 0;

    background: var(--yellow);

    padding:
        11px;

    font-weight: 900;

    font-size: 11px;

    cursor: pointer;
}


/* =========================================================
   ACCUMULATOR OF THE DAY
========================================================= */

.accumulator-selection {
    padding:
        11px
        16px;

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    align-items: start;

    align-items: center;

    gap: 10px;

    border-bottom:
        1px solid
        #eeeeee;
}


.selection-info strong {
    display: block;

    font-size: 12px;

    line-height: 1.2;
}


.selection-info small {
    display: block;

    margin-top: 3px;

    color: var(--text-medium);

    font-size: 11px;
}


.confidence {
    font-size: 8px;

    font-weight: 800;

    padding:
        4px
        6px;

    border-radius: 4px;
}


.confidence.high {
    background: var(--green-light);

    color: var(--green-dark);
}


.confidence.medium {
    background: var(--yellow-light);

    color: #8a6a00;
}

.accumulator-see-prediction {
    flex-shrink: 0;
    padding: 6px 8px;
    border-radius: 4px;
    background: var(--green);
    color: white;
    font-size: 9px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.accumulator-see-prediction:hover { background: var(--green-dark); }

.accumulator-empty {
    padding: 14px 16px;
    color: var(--text-medium);
    font-size: 12px;
}


.accumulator-summary {
    padding:
        11px
        16px;

    display: flex;

    justify-content: space-between;

    font-size: 11px;
}


.accumulator-summary strong {
    color: var(--green);
}


.accumulator-button {
    width: 100%;

    border: 0;

    background: var(--green);

    color: white;

    padding:
        11px;

    font-size: 11px;

    font-weight: 800;

    cursor: pointer;
}


/* =========================================================
   LOADING
========================================================= */

.loading {
    padding: 50px;

    text-align: center;

    background: white;

    border:
        1px solid
        var(--gray-border);

    border-radius: var(--radius);

    color: var(--text-medium);

    font-weight: 600;
}


/* =========================================================
   ERROR
========================================================= */

.error {
    padding: 30px;

    background: white;

    border-radius: 9px;

    border:
        1px solid
        #e4e7e5;

    color: var(--danger);
}


.error strong {
    display: block;

    margin-bottom: 8px;
}


.error p {
    margin:
        0
        0
        6px;
}


/* =========================================================
   NO MATCHES
========================================================= */

.no-matches {
    padding: 50px;

    text-align: center;

    background: white;

    border:
        1px solid
        var(--gray-border);

    border-radius: 9px;

    color: var(--text-medium);
}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {
    max-width: 1670px;

    margin:
        20px auto
        0;

    padding:
        20px
        28px;

    display: flex;

    justify-content: space-between;

    gap: 20px;

    color: var(--text-medium);

    font-size: 12px;
}


.site-footer .footer-link-group {
    grid-row: 2;
}


.footer-links,
.footer-social-links {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 8px;
}


.footer-links a,
.footer-social-links a {
    color: var(--text-medium);

    font-weight: 800;

    text-decoration: none;
}


.footer-links a:hover,
.footer-social-links a:hover {
    color: var(--green);
}


.footer-link-group {
    display: flex;

    flex-direction: column;

    gap: 7px;
}


.footer-link-label {
    color: var(--text-dark);

    font-size: 11px;

    font-weight: 900;
}

/* -------------------------------------------------------------------------
   Home-page visual system (aligned with frontend/New UI/freesurebets.css)
   The API keeps the existing semantic match markup; these rules bring its
   presentation into the same compact, centered composition as the mockup.
------------------------------------------------------------------------- */
body { font-family: Inter, Arial, Helvetica, sans-serif; background: linear-gradient(#eef9ff 0, #f7fcff 40%, #f0f9fd 100%); color: #073d3d; }
.site-header { max-width: 820px; height: 165px; margin: 0 auto; background: linear-gradient(110deg, #006153, #004f45); box-shadow: none; }
.header-inner { width: 100%; max-width: none; height: 82px; padding: 0 31px; gap: 0; position: relative; }
.logo-container { height: 82px; gap: 13px; justify-content: flex-start; }
.logo-container .site-logo { display: none; }
.logo-ball { width: 52px; height: 52px; border-radius: 50%; border: 3px solid #ffc400; background: #f8faf9; color: #183c4d; display: grid; place-items: center; font-size: 28px; line-height: 1; }
.logo-word { color: #f7fbfb; font-size: 36px; font-weight: 800; letter-spacing: -1.7px; white-space: nowrap; }
.logo-word b { color: #ffc400; }
.main-nav { position: absolute; top: 82px; left: 0; width: 100%; height: 83px; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; background: #fff; border-bottom: 1px solid #e0e8eb; box-shadow: 0 2px 7px rgba(0,0,0,.04); }
.nav-link, .country-menu-toggle { min-height: 83px; padding: 9px 4px; border-radius: 0; color: #294e6f; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; font-size: 11px; font-weight: 700; text-align: center; }
.nav-link:hover, .country-menu-toggle:hover { color: #0a6b5c; background: #f5fbfa; }
.nav-link.active { color: #0a6b5c; }
.nav-link.active::after { content: ""; position: absolute; bottom: 0; left: 22%; right: 22%; height: 4px; background: #087560; border-radius: 4px 4px 0 0; }
.nav-home span:first-child { font-size: 25px; line-height: 1; }
.telegram-desktop-label { font-size: inherit; }
.prediction-menu { position: relative; display: flex; }
.prediction-menu-toggle { width: 100%; border: 0; cursor: pointer; font-family: inherit; }
.prediction-menu-panel { top: calc(100% - 1px); }
.country-menu { display: flex; align-items: stretch; position: relative; }
.country-menu-toggle { width: 100%; border: 0; cursor: pointer; font-family: inherit; }
.header-actions { display: contents; }
.theme-button { display: none; }
.favorites-button { grid-column: 6; grid-row: 1; height: 83px; padding: 9px 4px; border: 0; border-radius: 0; background: transparent; color: #294e6f; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; font-size: 11px; }
.favorites-button:hover { background: #f5fbfa; color: #0a6b5c; }
.favorites-icon { font-size: 25px; color: #0a6b5c; }
.page-container { width: min(100%, 820px); max-width: 820px; padding: 20px 28px 28px; }
.hero-panel { min-height: 126px; margin-bottom: 3px; padding: 20px 22px; border: 1px solid #e0f0f0; border-radius: 15px; background: linear-gradient(110deg, #effbf9, #e6f7f4); box-shadow: 0 3px 13px rgba(20,80,95,.08); display: flex; align-items: center; justify-content: space-between; }
.hero-copy { display: flex; align-items: center; gap: 18px; }
.hero-ball { width: 59px; height: 59px; border-radius: 17px; background: #0b705f; color: #fff; display: grid; place-items: center; flex: 0 0 auto; font-size: 35px; }
.hero-panel h1 { margin: 0 0 9px; font-size: 28px; line-height: 1.08; letter-spacing: -.8px; color: #073d3d; }
.hero-panel p { margin: 0; color: #6680a0; font-size: 17px; line-height: 1.35; font-weight: 600; }
.hero-slogan { margin-right: 18px; color: #075747; font-family: Caveat, cursive; font-size: 20px; line-height: 1.05; font-weight: 700; transform: rotate(-3deg); }
.hero-slogan span { display: block; width: 151px; height: 3px; margin: 7px 0 0 20px; border-radius: 50%; background: #f3b800; transform: rotate(-4deg); }
.day-tabs { display: flex; gap: 10px; overflow: hidden; padding: 13px 0 7px; margin-bottom: 0; background: transparent; border: 0; box-shadow: none; border-radius: 0; }
.day-tab { min-height: 44px; height: 44px; padding: 0 21px; border: 0; border-radius: 24px; background: #edf5fc; color: #31577e; display: inline-flex; flex: 0 0 auto; font-size: 13px; font-weight: 700; }
.day-tab:hover { background: #e4f0fa; }
.day-tab.active, .day-tab.live-tab.active { background: #076b59; color: #fff; border: 0; }
.day-tab.active::after { display: none; }
.day-icon { font-size: 14px; }
.day-tab strong { font-size: 13px; }
.day-tab small { display: none; }
.section-heading { align-items: center; margin: 5px 0 11px; }
.section-heading h1 { color: #173d5f; font-size: 21px; }
.section-heading p { color: #6680a0; font-size: 13px; }
.filter-button { height: 45px; padding: 0 19px; border: 1.8px solid #08775f; border-radius: 23px; background: #fff; color: #0a5f50; }
.match-card { grid-template-columns: minmax(165px, 1fr) 48px minmax(165px, 1fr) 207px; grid-template-rows: 39px 88px; min-height: 0; margin-bottom: 11px; padding: 9px 13px 13px; border: 1px solid #e2edf0; border-radius: 15px; background: #fff; box-shadow: 0 3px 13px rgba(20,80,95,.08); }
.match-league-row { padding: 0; grid-column: 1 / -1; grid-row: 1; }
.country-name { color: #244a70; }
.league-name { color: #244a70; }
.team-column { grid-row: 2; height: 66px; gap: 0; }
.team-info { gap: 12px; justify-content: flex-start; }
.away-column .team-info { justify-content: flex-start; }
.team-name { color: #17385f; font-size: 15px; font-weight: 800; }
.team-logo, .team-logo-placeholder { width: 51px; height: 55px; margin: 0; object-fit: contain; }
.team-logo-placeholder { display: grid; place-items: center; clip-path: polygon(50% 0,90% 16%,87% 76%,50% 100%,13% 76%,10% 16%); background: #0b7080; color: #fff; font-size: 16px; }
.match-center { grid-column: 2; grid-row: 2; height: 42px; min-height: 42px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: #edf9f7; color: #52718d; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.match-time { order: 2; color: #52718d; font-size: 0; }
.match-time::after { content: "VS"; font-size: 13px; font-weight: 800; }
.match-timezone, .match-score, .match-status-badge { display: none; }
.vs-text { display: none; }
.match-bottom { display: contents; }
.prediction-section { grid-column: 4; grid-row: 2; width: auto; height: 62px; padding: 0; display: flex; align-items: center; gap: 8px; }
.favorite-toggle-desktop { display: none; }
.prediction-button { width: 100%; min-height: 62px; padding: 10px 14px; border-radius: 14px; background: linear-gradient(100deg, #e9f8f5, #e3f6f1); color: #08614f; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.prediction-button span { display: none; }
.below-matches { display: block; margin-top: 13px; }
.below-matches .sidebar-card { margin-top: 13px; border: 1px solid #dfebef; border-radius: 15px; background: #fff; box-shadow: 0 3px 13px rgba(20,80,95,.08); }
.below-matches .sidebar-card:first-child { margin-top: 0; }
.sidebar-title { padding: 13px 14px; background: transparent; color: #173d5f; font-size: 21px; }
.sidebar-title span { color: #0b705e; }
.market-list { display: grid; grid-template-columns: repeat(7, minmax(95px, 1fr)); gap: 10px; padding: 0 14px 10px; overflow: hidden; }
.market-item { min-height: 86px; padding: 12px 6px; border: 0; border-radius: 12px; background: #ecf8f5; color: #173d64; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 12px; font-weight: 700; }
.market-item span:first-child { color: inherit; font-size: 13px; }
.market-arrow { display: none; }
.accumulator-day { padding-bottom: 12px; background: linear-gradient(100deg, #f3fcfa, #eaf8f5) !important; }
.accumulator-day .sidebar-title { margin-bottom: 0; }
.accumulator-empty { padding: 15px 16px; color: #7089a8; font-size: 13px; }
.site-footer { width: min(100%, 820px); max-width: 820px; min-height: 181px; margin: 0 auto; padding: 16px 22px 20px; border-radius: 33px 33px 0 0; background: linear-gradient(120deg, #005a4c, #00483f); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; text-align: center; }
.site-footer > div:not(.footer-link-group) { display: none; }
.site-footer::before { content: "FreeSure Bets"; display: block; margin-bottom: 12px; color: #fff; font-size: 25px; font-weight: 800; }
.site-footer .footer-link-group { display: contents; }
.site-footer .footer-link-label { display: none; }
.footer-links, .footer-social-links { flex-direction: row; align-items: center; gap: 20px; margin-top: 20px; font-size: 12px; }
.footer-links::before { content: "We analyze the numbers. You make the call."; position: absolute; margin-top: -40px; color: #fff; font-size: 13px; font-weight: 700; }
.footer-social-links { display: none; }

@media (max-width: 720px) {
    .site-header { height: 162px; }
    .header-inner { height: 80px; padding: 0 25px; }
    .logo-ball { width: 48px; height: 48px; }
    .logo-word { font-size: 31px; }
    .main-nav { top: 80px; height: 82px; }
    .nav-link, .country-menu-toggle, .favorites-button { min-height: 82px; font-size: 9px; }
    .nav-home span:first-child, .favorites-icon { font-size: 22px; }
    .hero-panel { min-height: 126px; padding: 18px; }
    .hero-panel h1 { font-size: 25px; }
    .hero-slogan { font-size: 18px; }
    .page-container { padding: 18px 16px 24px; }
    .match-card { grid-template-columns: minmax(0,1fr) 38px minmax(0,1fr); grid-template-rows: 34px auto auto; padding: 7px 9px 10px; }
    .match-league-row { grid-column: 1 / -1; grid-row: 1; }
    .team-column { grid-row: 2; height: 66px; }
    .match-center { grid-column: 2; grid-row: 2; }
    .prediction-section { grid-column: 1 / -1; grid-row: 3; width: 100%; height: 56px; margin-top: 10px; }
    .prediction-button { min-height: 56px; }
    .market-list { grid-template-columns: repeat(7, 110px); overflow-x: auto; }
}

@media (max-width: 560px) {
    .header-inner { padding: 0 17px; }
    .logo-ball { width: 43px; height: 43px; }
    .logo-word { font-size: 26px; }
    .main-nav { height: 75px; }
    .site-header { height: 149px; }
    .nav-link, .country-menu-toggle, .favorites-button { min-height: 75px; font-size: 8px; gap: 5px; }
    .hero-panel { padding: 15px 13px; min-height: 112px; }
    .hero-copy { gap: 10px; }
    .hero-ball { width: 49px; height: 49px; font-size: 28px; }
    .hero-panel h1 { font-size: 19px; margin-bottom: 5px; }
    .hero-panel p { font-size: 12px; }
    .hero-slogan { display: none; }
    .page-container { padding: 14px 11px 20px; }
    .day-tabs { gap: 7px; padding-top: 10px; }
    .day-tab { height: 40px; min-height: 40px; padding: 0 15px; font-size: 11px; }
    .section-heading h1 { font-size: 18px; }
    .section-heading p { font-size: 11px; }
    .team-name { font-size: 12px; }
    .team-logo, .team-logo-placeholder { width: 40px; height: 44px; }
    .prediction-button { min-height: 51px; font-size: 11px; }
    .sidebar-title { font-size: 17px; }
}


@media (max-width: 800px) {

    .site-footer {
        display: flex;

        flex-direction: column;
    }


    .site-footer .footer-link-group {
        grid-row: auto;
    }
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1200px) {

    .content-grid {
        grid-template-columns: minmax(0, 1fr);
    }


    .match-card {
        grid-template-columns:
            minmax(120px, 1fr)
            115px
            minmax(120px, 1fr)
            125px;
    }


    .team-name {
        font-size: 12px;

        max-width: 110px;
    }


    .team-logo {
        width: 42px;

        height: 42px;

        max-width: 42px;

        max-height: 42px;
    }


    .comparison-row {
        grid-template-columns:
            55px
            34px
            minmax(60px, 1fr)
            34px;
    }
}


/* =========================================================
   RESPONSIVE — SMALL DESKTOP / TABLET
========================================================= */

@media (max-width: 800px) {

    .content-grid {
        grid-template-columns: minmax(0, 1fr);
    }


    .below-matches,
    .content-grid > .sidebar { grid-template-columns: 1fr; }


    .match-card {
        grid-template-columns:
            minmax(130px, 1fr)
            120px
            minmax(130px, 1fr)
            120px;
    }
}


/* =========================================================
   RESPONSIVE — MATCH CARD
========================================================= */

@media (max-width: 850px) {

    .match-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr);
        grid-template-rows: 36px 112px auto;
        padding: 0;
    }

    .match-main,
    .match-bottom { display: contents; }

    .match-league-row {
        grid-column: 1 / -1;
        grid-row: 1;
        padding: 0 12px;
    }

    .team-column {
        grid-row: 2;
        height: 112px;
        padding: 8px;
    }

    .home-column { grid-column: 1; }
    .away-column { grid-column: 3; }

    .team-info {
        /* Keep the desktop team-name/logo relationship on narrow screens. */
        flex-direction: row;
        gap: 6px;
    }

    .team-logo, .team-logo-placeholder {
        width: 38px;
        height: 38px;
    }

    .match-center {
        grid-column: 2;
        grid-row: 2;
        height: 92px;
        min-height: 92px;
        margin: 0;
        padding: 0 6px;
    }

    .prediction-section {
        grid-column: 1 / -1;
        grid-row: 3;
        width: 100%;
        height: auto;
        padding: 10px 12px 12px;
    }

    .favorite-toggle-desktop { display: none; }

    .favorite-toggle-mobile {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        padding: 0;
        border-radius: 50%;
        font-size: 19px;
        flex: 0 0 auto;
    }


    .match-status-badge {
        top: 12px;

        right: 14px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 800px) {

    .content-grid {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    .matches-section {
        width: 100%;
        min-width: 0;
    }

    .match-card {
        width: 100%;
        min-width: 0;
    }

    .site-header {
        height: auto;
    }


    .header-inner {
        height: auto;

        min-height: 0;

        display: grid;

        grid-template-columns:
            auto
            minmax(0, 1fr)
            auto;

        gap: 6px;

        padding: 4px 8px;
    }


    .logo-container {
        height: auto;
    }


    .site-logo {
        height: 62px;
    }


    .main-nav {
        order: initial;

        width: auto;

        overflow: visible;

        height: auto;

        flex-direction: column;

        align-items: flex-start;

        gap: 1px;
    }

    .theme-button {
        width: 26px;
        height: 22px;
        font-size: 14px;
    }


    .nav-home,
    .nav-about,
    .nav-contact {
        display: none;
    }


    .telegram-desktop-label {
        display: none;
    }


    .telegram-mobile-label {
        display: inline;
    }


    .nav-link {
        font-size: 13.5px;

        padding:
            4px
            5px;
    }


    .header-actions {
        margin-left: 0;

        display: grid;
        grid-template-columns: 26px minmax(0, 100px);
        grid-template-rows: 24px 24px;
        align-items: center;
        gap: 3px 4px;
        width: 130px;
    }


    .header-actions .theme-button {
        grid-column: 1;
        grid-row: 1;
    }


    .favorites-button {
        grid-column: 2;
        grid-row: 2;
        width: 100%;
        height: 24px;
        padding: 0 4px;
        font-size: 13.5px;

        border-radius: 4px;
        gap: 4px;
    }


    .header-actions .country-menu {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        width: 100%;
    }


    .header-actions .country-menu-toggle {
        width: 100%;
        min-height: 24px;
        height: 24px;
        padding: 0 4px;
        font-size: 13.5px;
    }


    .prediction-button {
        width: 100%;
        min-height: 44px;
        font-size: 13px;
    }


    .prediction-button span {
        font-size: 18px;
    }


    .page-container {
        padding: 18px 28px 30px;
    }


    .day-tabs {
        grid-template-columns:
            1fr
            1fr;

        border-radius: 8px;
    }


    .day-tab {
        min-height: 56px;

        border-bottom:
            1px solid
            #e4e6e5;
    }


    .day-tab:nth-child(even) { border-right: 0; }
    .day-tab:nth-child(5), .day-tab:nth-child(6) { border-bottom: 0; }


    .sidebar {
        grid-template-columns: 1fr;
    }


    .section-heading {
        align-items: flex-start;
    }


    .section-heading h1 {
        font-size: 22px;
    }


    .section-heading p {
        font-size: 13px;
    }


}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .day-tabs {
        grid-template-columns: 1fr 1fr;
    }


    .day-tab {
        border-right: 0;
    }

    .day-tab:nth-child(odd) {
        border-right: 1px solid #e4e6e5;
    }

    .match-card {
        border-radius: 8px;
    }

    /* Preserve the match composition: home team | match details | away team. */
    .match-card {
        grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1fr);
    }

    .team-column {
        padding-left: 3px;
        padding-right: 3px;
    }

    .team-info {
        gap: 4px;
    }

    .team-logo,
    .team-logo-placeholder {
        width: 30px;
        height: 30px;
        font-size: 18px;
    }

    .team-name {
        max-width: calc(100% - 34px);
        font-size: 10px;
        line-height: 1.1;
    }

    .match-time {
        font-size: 15px;
    }

    .match-timezone {
        max-width: 82px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .vs-text {
        margin: 3px 0;
        font-size: 12px;
    }


    .comparison-row {
        grid-template-columns:
            75px
            42px
            minmax(0, 4fr)
            42px
            minmax(0, 1fr);

        gap: 4px;
    }


    .comparison-row::after {
        content: "";
        grid-column: 5;
    }


    .comparison-bar {
        width: 100%;
        height: 6.4px;
        justify-self: stretch;
    }


    .comparison-label {
        font-size: 16.2px;
    }


    .comparison-home-value,
    .comparison-away-value {
        font-size: 16.2px;
    }


    .prediction-button {
        width: 100%;
    }
}


/* Keep desktop comparison text clear while shortening the bar track. */
.match-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 20px 0;
    color: var(--text-medium);
}

.match-pagination > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pagination-button {
    padding: 8px 12px;
    border: 1px solid var(--green);
    border-radius: 6px;
    background: var(--gray-card);
    color: var(--green-dark);
    cursor: pointer;
}

.pagination-button.active,
.pagination-button:hover:not(:disabled) {
    background: var(--green);
    color: white;
}

.pagination-button:disabled {
    cursor: not-allowed;
    opacity: .45;
}

@media (min-width: 851px) {
    .comparison-row {
        grid-template-columns:
            70px
            44px
            minmax(0, 4fr)
            44px
            minmax(0, 1fr);
    }


    .comparison-row::after {
        content: "";
        grid-column: 5;
    }
}

@media (max-width: 500px) {
    .page-container { padding: 12px; }
}

/* Shared frame: every primary surface uses the same centered measure. */
.site-header,
.page-container,
.site-footer {
    width: min(100%, 820px);
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.matches-section,
#matches-container,
.match-card,
.below-matches,
.below-matches > .sidebar-card {
    width: 100%;
    max-width: none;
}

/* Markets and accumulator follow the complete match list vertically. */
.below-matches {
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin-top: 13px;
}

.below-matches .sidebar-card,
.below-matches .sidebar-card:first-child {
    margin-top: 0;
}

/* countries.css */
.country-rail {
    display: none;
    background: var(--gray-card, #fff);
    border: 1px solid var(--gray-border, #e3e6e4);
    border-radius: 9px;
    box-shadow: var(--shadow, 0 2px 8px rgba(0, 45, 28, .09));
    overflow: hidden;
    position: sticky;
    top: 18px;
}

.country-menu { display: block; position: relative; }

.country-rail-title {
    padding: 13px 16px;
    color: #fff;
    background: var(--green-deep, #003b22);
    font-size: 13px;
    font-weight: 800;
}

.country-list { max-height: calc(100vh - 165px); overflow-y: auto; }

.country-link {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    color: var(--text-dark, #111815);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    border: 0;
    border-bottom: 1px solid var(--gray-border, #e3e6e4);
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.country-link:hover, .country-link.active { background: var(--green-light, #e9f5ee); color: var(--green-dark, #004d2b); }
.country-flag-small { width: 20px; height: 14px; object-fit: contain; }
.country-count { margin-left: auto; color: var(--text-light, #8b9590); font-size: 11px; }
.country-list-error { padding: 14px; color: var(--text-medium, #637069); font-size: 12px; }

.country-league-picker { padding: 10px 12px 12px 41px; border-bottom: 1px solid var(--gray-border, #e3e6e4); background: var(--green-light, #e9f5ee); }
.country-league-link { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 7px 8px; border: 0; border-radius: 5px; background: transparent; color: var(--text-medium, #637069); cursor: pointer; font: inherit; font-size: 12px; text-align: left; text-decoration: none; }
.country-league-link:hover, .country-league-link.active { background: var(--gray-card, #fff); color: var(--green-dark, #004d2b); }
.country-league-link span { color: var(--text-light, #8b9590); font-size: 10px; }
.country-league-section-label { padding: 5px 8px 3px; color: var(--text-light, #8b9590); font-size: 9px; font-weight: 800; letter-spacing: .04em; }
.country-league-loading, .country-league-empty { color: var(--text-medium, #637069); font-size: 11px; }

.league-prediction-group { margin-bottom: 26px; }
.league-prediction-group h2 { margin: 0 0 8px; font-size: 19px; }
.league-prediction-group > p { margin: 0 0 12px; color: var(--text-medium, #637069); }
.league-prediction-card { margin-bottom: 10px; }

:root[data-theme="dark"] .country-link:hover,
:root[data-theme="dark"] .country-link.active {
    color: var(--text-dark, #edf5ef);
}

/* Countries is a header navigation menu on desktop and mobile. */
.country-menu-toggle {
    min-height: 40px;
    padding: 0 13px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}
.country-menu-toggle:hover { background: rgba(255, 255, 255, .08); }
.country-menu-panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 100;
    width: min(280px, calc(100vw - 24px));
    max-height: min(65vh, 460px);
    overflow-y: auto;
    border: 1px solid var(--gray-border, #e3e6e4);
    border-radius: 8px;
    background: var(--gray-card, #fff);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .24);
}
.country-menu.open .country-menu-panel { display: block; }
.country-menu-panel .country-link { padding: 12px 13px; }

@media (max-width: 800px) {
    .country-menu-toggle {
        min-height: 20px;
        padding: 3px 7px;
        border: 1px solid var(--yellow, #f7b817);
        border-radius: 5px;
        background: transparent;
        color: var(--yellow, #f7b817);
        font-size: 13.5px;
        font-weight: 900;
        cursor: pointer;
    }
    .country-menu-panel { right: 0; left: auto; }
}

/* prediction-menu.css */
.prediction-menu { position: relative; }

.prediction-menu-toggle {
    border: 0;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}

.prediction-menu-panel {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 100;
    width: 250px;
    max-height: min(65vh, 460px);
    overflow-y: auto;
    border: 1px solid var(--gray-border, #e3e6e4);
    border-radius: 8px;
    background: var(--gray-card, #fff);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .24);
}

.prediction-menu.open .prediction-menu-panel { display: block; }

.prediction-menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--gray-border, #e3e6e4);
    color: var(--text-dark, #111815);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.prediction-menu-link:last-child { border-bottom: 0; }
.prediction-menu-link:hover,
.prediction-menu-link.active { background: var(--green-light, #e9f5ee); color: var(--green-dark, #004d2b); }
.prediction-menu-arrow { color: var(--green, #087a45); font-size: 18px; }

@media (max-width: 800px) {
    .prediction-menu-panel {
        position: fixed;
        top: 78px;
        left: 8px;
        width: min(300px, calc(100vw - 16px));
    }
}

/* content-pages.css */
.content-page { max-width: 980px; margin: 0 auto; padding: 34px 28px 48px; }
.content-page-card { background: var(--gray-card); border: 1px solid var(--gray-border); border-radius: 12px; box-shadow: var(--shadow); padding: 30px; }
.content-page h1 { margin: 0 0 10px; color: var(--green-dark); font-size: 30px; }
.content-page .page-intro { margin: 0 0 28px; color: var(--text-medium); font-size: 15px; }
.content-page section { margin-top: 26px; }
.content-page h2 { margin: 0 0 8px; color: var(--green-dark); font-size: 19px; }
.content-page p, .content-page li { color: var(--text-medium); line-height: 1.65; }
.content-page ul { padding-left: 22px; }
.content-page a { color: var(--green); }
:root[data-theme="dark"] .content-page h1,
:root[data-theme="dark"] .content-page h2 { color: var(--text-dark); }

@media (max-width: 700px) {
    .content-page { padding: 20px 12px 30px; }
    .content-page-card { padding: 22px 18px; }
    .content-page h1 { font-size: 25px; }
}

/* theme.css */
/* Final FreeSureBets theme layer.
   Loaded after the legacy page styles so every page has one predictable visual system. */

:root {
    --theme-green: #087560;
    --theme-green-dark: #005547;
    --theme-green-deep: #00483f;
    --theme-green-soft: #eaf8f5;
    --theme-green-softer: #f3fcfa;
    --theme-yellow: #ffc400;
    --theme-page: #f3faff;
    --theme-card: #fff;
    --theme-ink: #17385f;
    --theme-muted: #6680a0;
    --theme-line: #dcebef;
    --theme-probability-track: #e8f0f5;
    --theme-home-icon-bg: #d8f7e9;
    --theme-home-icon: #0ab779;
    --theme-draw-icon-bg: #dff8fb;
    --theme-draw-icon: #0d9eb5;
    --theme-away-icon-bg: #e5edff;
    --theme-away-icon: #2664cd;
    --theme-goals-icon-bg: #d9f8e8;
    --theme-goals-icon: #0ab878;
    --theme-shadow: 0 3px 13px rgba(20, 80, 95, .08);
}

:root[data-theme="dark"] {
    --theme-page: #10202a;
    --theme-card: #172d36;
    --theme-ink: #edf7f6;
    --theme-muted: #aec3ca;
    --theme-line: #2b4852;
    --theme-green-soft: #17483f;
    --theme-green-softer: #163d38;
    --theme-probability-track: #2b4852;
    --theme-home-icon-bg: #17483f;
    --theme-home-icon: #65dcae;
    --theme-draw-icon-bg: #164854;
    --theme-draw-icon: #5ed7e7;
    --theme-away-icon-bg: #203d68;
    --theme-away-icon: #78a8ff;
    --theme-goals-icon-bg: #17483f;
    --theme-goals-icon: #65dcae;
    --theme-shadow: 0 3px 13px rgba(0, 0, 0, .28);
}

html, body { min-width: 320px; }
body {
    background: linear-gradient(#eef9ff 0, var(--theme-page) 45%, #eef8fc 100%) !important;
    color: var(--theme-ink) !important;
    font-family: Inter, Arial, Helvetica, sans-serif !important;
}
a { color: inherit; }

/* Shared centered shell */
.site-header, .page-container, .site-footer {
    width: min(100%, 820px) !important;
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.site-header {
    height: 165px !important;
    position: relative;
    background: linear-gradient(110deg, #006153, #004f45) !important;
}
.header-inner { height: 100% !important; padding: 0 25px !important; }
.logo-container { height: 82px !important; gap: 13px; }
.site-logo { display: none !important; }
.logo-ball {
    width: 52px !important; height: 52px !important; display: grid !important; place-items: center;
    border: 3px solid var(--theme-yellow) !important; border-radius: 50%; background: #f8faf9;
    color: #183c4d; font-size: 28px; line-height: 1;
}
.logo-word { color: #f7fbfb !important; font-size: 36px !important; font-weight: 800; letter-spacing: -1.7px; }
.logo-word b { color: var(--theme-yellow) !important; }
.main-nav {
    top: 82px !important; height: 83px !important; width: 100% !important; left: 0 !important;
    display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    background: #fff !important; border-bottom: 1px solid #e0e8eb; box-shadow: 0 2px 7px rgba(0,0,0,.04);
}
.nav-link, .country-menu-toggle, .favorites-button {
    position: relative; min-height: 83px !important; padding: 8px 4px !important; border: 0 !important; border-radius: 0 !important;
    background: transparent !important; color: #294e6f !important; display: flex !important; align-items: center; justify-content: center;
    flex-direction: column !important; gap: 7px; font-size: 11px !important; font-weight: 700; text-align: center;
}
.nav-link:hover, .country-menu-toggle:hover, .favorites-button:hover { background: #f5fbfa !important; color: var(--theme-green) !important; }
.nav-link.active { color: var(--theme-green) !important; }
.nav-link.active::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 0; height: 4px; border-radius: 4px 4px 0 0; background: var(--theme-green); }
.nav-icon, .footer-icon {
    display: block;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.nav-icon { width: 27px; height: 27px; color: var(--theme-green); }
.footer-icon { width: 15px; height: 15px; }
.nav-home span:first-child, .favorites-icon { color: var(--theme-green) !important; font-size: 25px; }
.telegram-desktop-label { display: none !important; }
.telegram-mobile-label { display: inline !important; font-size: inherit; }
.prediction-menu { grid-column: 3; grid-row: 1; display: flex; min-width: 0; }
.country-menu { grid-column: 5; grid-row: 1; display: flex; min-width: 0; }
.header-actions { display: contents !important; }
.theme-button { display: none !important; }
.favorites-button { grid-column: 6; grid-row: 1; width: 100%; }

/* Desktop header: keep the primary navigation focused on match discovery. */
@media (min-width: 801px) {
    .site-header .nav-about,
    .site-header .nav-contact { display: none !important; }
    .site-header .main-nav { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
    .site-header .country-menu { grid-column: 5 !important; }
    .site-header .favorites-button { grid-column: 6 !important; }
}

@media (max-width: 800px) {
    .site-header .nav-about,
    .site-header .nav-contact { display: none !important; }
    .site-header .main-nav { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
    .site-header .country-menu { grid-column: 5 !important; }
    .site-header .favorites-button { grid-column: 6 !important; }
}

/* Home header, tabs and controls */
.page-container, .content-page { width: min(100%, 820px) !important; max-width: 820px !important; padding: 20px 0 28px !important; }
.content-page-card { width: 100% !important; padding: 24px 22px !important; border: 1px solid var(--theme-line) !important; border-radius: 15px !important; background: var(--theme-card) !important; box-shadow: var(--theme-shadow) !important; }
.content-page h1 { margin: 0 0 10px !important; color: var(--theme-ink) !important; font-size: 28px !important; }
.content-page h2 { color: var(--theme-green-dark) !important; }
.content-page p, .content-page li { color: var(--theme-muted) !important; }
.hero-panel {
    min-height: 126px; padding: 20px 22px; margin-bottom: 3px;
    border: 1px solid #e0f0f0; border-radius: 15px; background: linear-gradient(110deg,#effbf9,#e6f7f4); box-shadow: var(--theme-shadow);
}
.hero-copy { display: flex; align-items: center; gap: 18px; }
.hero-ball { width: 59px; height: 59px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 17px; background: #0b705f; color: #fff; font-size: 35px; }
.hero-panel h1 { margin: 0 0 9px; color: #073d3d; font-size: 28px; line-height: 1.08; letter-spacing: -.8px; }
.hero-panel p { margin: 0; color: var(--theme-muted); font-size: 17px; line-height: 1.35; font-weight: 600; }
.hero-slogan { margin-right: 18px; color: #075747; font-family: Caveat, cursive; font-size: 20px; line-height: 1.05; font-weight: 700; transform: rotate(-3deg); }
.hero-slogan span { display: block; width: 151px; height: 3px; margin: 7px 0 0 20px; border-radius: 50%; background: #f3b800; transform: rotate(-4deg); }
.day-tabs { display: flex !important; flex-wrap: wrap !important; justify-content: flex-start; gap: 10px; overflow: visible !important; padding: 13px 0 7px; margin-bottom: 0; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.day-tab { min-height: 44px !important; height: 44px; padding: 0 21px !important; display: inline-flex !important; flex: 0 0 auto; border: 0 !important; border-radius: 24px !important; background: #edf5fc !important; color: #31577e !important; font-size: 13px !important; font-weight: 700; }
.day-tab:hover { background: #e4f0fa !important; }
.day-tab.active, .day-tab.live-tab.active { background: var(--theme-green) !important; color: #fff !important; }
.day-tab.active::after { display: none !important; }
.day-tab small { display: none !important; }
@media (min-width: 801px) {
    .day-tabs {
        flex-wrap: nowrap !important;
        overflow: hidden !important;
        width: 100%;
    }
    .day-tab {
        flex: 1 1 0 !important;
        min-width: 0;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* On small screens the linked team names are the single match title. Keep
   them on one line with VS, then show the date/time, result, and advice. */
@media (max-width: 600px) {
    .prediction-page-body .fixture-card {
        min-height: 0;
    }

    .prediction-page-body .fixture-main {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        grid-template-rows: auto auto auto auto;
        min-height: 0;
        padding: 24px 14px 16px;
        gap: 0 7px;
    }

    .prediction-page-body .fixture-team,
    .prediction-page-body .fixture-center {
        display: contents;
    }

    .prediction-page-body .fixture-team .team-logo,
    .prediction-page-body .fixture-team .fixture-logo-control,
    .prediction-page-body .fixture-team .team-label,
    .prediction-page-body .fixture-center > .fixture-date,
    .prediction-page-body .fixture-center > .fixture-time,
    .prediction-page-body .fixture-center > .fixture-timezone,
    .prediction-page-body .fixture-center > .vs-text,
    .prediction-page-body .fixture-center > .fixture-venue,
    .prediction-page-body .fixture-center > .status-badge {
        display: none !important;
    }

    .prediction-page-body .fixture-team h1,
    .prediction-page-body .fixture-team h2 {
        display: contents;
    }

    .prediction-page-body #home-name,
    .prediction-page-body #away-name {
        min-width: 0;
        max-width: none;
        margin: 0;
        color: var(--theme-ink) !important;
        font-size: 15px;
        font-weight: 850;
        line-height: 1.15;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .prediction-page-body #home-name {
        grid-column: 1;
        grid-row: 1;
        text-align: right;
    }

    .prediction-page-body #away-name {
        grid-column: 3;
        grid-row: 1;
        text-align: left;
    }

    .prediction-page-body .fixture-match-title {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
        padding: 0;
        color: var(--theme-green) !important;
        font-size: 14px;
        line-height: 1.15;
    }

    .prediction-page-body .fixture-match-title em {
        font-size: inherit;
    }

    .prediction-page-body .fixture-match-date {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-top: 12px;
        font-size: 11px;
        line-height: 1.35;
        text-align: center;
    }

    .prediction-page-body .fixture-score:not(.hidden) {
        grid-column: 1 / -1;
        grid-row: 3;
        display: block !important;
        margin-top: 10px;
        color: var(--theme-green-dark) !important;
        font-size: 21px;
        line-height: 1;
    }

    .prediction-page-body .fixture-recommendation {
        grid-column: 1 / -1;
        grid-row: 4;
        width: 100%;
        min-height: 54px;
        margin-top: 14px;
        padding: 8px 14px;
    }
}

/* Match-list cards: show the schedule directly below the league, before the
   teams and result details. */
.match-card {
    grid-template-rows: 39px 34px 112px !important;
}

.match-schedule {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--theme-muted);
    line-height: 1;
}

.match-schedule-time {
    color: var(--theme-green-dark);
    font-size: 14px;
    font-weight: 700;
}

.match-schedule-date {
    font-size: 14px;
    font-weight: 700;
}

.match-schedule-timezone {
    font-size: 9px;
    font-weight: 700;
}

.match-card .team-column,
.match-card .match-center,
.match-card .prediction-section {
    grid-row: 3 !important;
}

.match-card .match-center {
    display: flex !important;
}

.match-card .match-center > .match-time,
.match-card .match-center > .match-timezone {
    display: none !important;
}

.match-card .prediction-section {
    grid-column: 4 !important;
}

@media (max-width: 850px) {
    .match-card {
        grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr) !important;
        grid-template-rows: 34px 40px 112px auto !important;
    }

    .match-card .match-schedule {
        grid-row: 2 !important;
        padding: 0 8px;
    }

    .match-card .team-column,
    .match-card .match-center {
        grid-row: 3 !important;
    }

    .match-card .prediction-section {
        grid-column: 1 / -1 !important;
        grid-row: 4 !important;
        width: 100% !important;
        height: auto !important;
        padding: 10px 12px 12px !important;
    }
}

@media (max-width: 560px) {
    .match-card {
        grid-template-columns: minmax(0, 1fr) 74px minmax(0, 1fr) !important;
    }

    .match-schedule { gap: 5px; }
    .match-schedule-time,
    .match-schedule-date { font-size: 12px; }
    .match-schedule-timezone { font-size: 8px; }
}
.content-grid { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 0 !important; }
.section-heading { align-items: center !important; margin: 5px 0 11px !important; }
.section-heading h1 { color: var(--theme-ink) !important; font-size: 21px !important; }
.section-heading p { color: var(--theme-muted) !important; font-size: 13px !important; }
.filter-button { height: 45px !important; padding: 0 19px !important; border: 1.8px solid var(--theme-green) !important; border-radius: 23px !important; background: var(--theme-card) !important; color: var(--theme-green-dark) !important; }

/* Match cards: scores, status and localized time intentionally remain visible. */
.match-card {
    grid-template-columns: minmax(165px,1fr) 155px minmax(165px,1fr) 207px !important;
    grid-template-rows: 39px 112px !important; min-height: 165px !important; margin-bottom: 11px !important;
    padding: 9px 13px 13px !important; border: 1px solid var(--theme-line) !important; border-radius: 15px !important;
    background: var(--theme-card) !important; box-shadow: var(--theme-shadow) !important;
}
.match-main, .match-bottom { display: contents !important; }
.match-league-row { padding: 0 !important; grid-column: 1 / -1 !important; grid-row: 1 !important; }
.country-name, .league-name { color: #244a70 !important; }
.team-column { grid-row: 2 !important; height: 100px !important; gap: 5px !important; }
.team-info { gap: 12px !important; justify-content: center !important; }
.team-name { color: var(--theme-ink) !important; font-size: 15px !important; font-weight: 800 !important; }
.match-card .team-logo, .match-card .team-logo-placeholder { width: 51px !important; height: 55px !important; max-width: 51px !important; max-height: 55px !important; object-fit: contain; }
.match-card .team-logo-placeholder { display: grid !important; place-items: center; clip-path: polygon(50% 0,90% 16%,87% 76%,50% 100%,13% 76%,10% 16%); background: #0b7080 !important; color: #fff !important; }
.match-center { grid-column: 2 !important; grid-row: 2 !important; height: 104px !important; min-height: 104px !important; margin: 0 !important; padding: 7px 8px !important; border: 0 !important; border-radius: 14px !important; background: var(--theme-green-softer) !important; }
.match-time { display: block !important; order: initial !important; color: var(--theme-ink) !important; font-size: 18px !important; font-weight: 800 !important; }
.match-time::after { content: none !important; }
.match-timezone { display: block !important; max-width: 100%; margin-top: 5px !important; color: var(--theme-muted) !important; font-size: 10px !important; }
.match-score { display: block !important; margin-top: 5px !important; color: var(--theme-green-dark) !important; font-size: 18px !important; font-weight: 900 !important; }
.match-score.score-outcome-won, .fixture-score.score-outcome-won { background: #dcfce7 !important; border: 2px solid #16a34a !important; box-shadow: inset 0 0 0 1px #bbf7d0; color: #166534 !important; }
.match-score.score-outcome-lost, .fixture-score.score-outcome-lost { background: #fee2e2 !important; border: 2px solid #dc2626 !important; box-shadow: inset 0 0 0 1px #fecaca; color: #991b1b !important; }
.match-score.score-outcome-won, .match-score.score-outcome-lost, .fixture-score.score-outcome-won, .fixture-score.score-outcome-lost { display: inline-flex !important; align-items: center; justify-content: center; padding: 4px 9px; border-radius: 8px; line-height: 1; }
.vs-text { display: block !important; margin: 5px 0 !important; color: var(--theme-green-dark) !important; font-size: 13px !important; }
.match-status-badge { display: block !important; position: static !important; margin-top: 3px !important; padding: 3px 8px !important; border-radius: 12px; background: #dff2ed !important; color: var(--theme-green-dark) !important; font-size: 9px !important; }
.prediction-section { grid-column: 4 !important; grid-row: 2 !important; height: 62px !important; padding: 0 0 0 8px !important; }
.prediction-button { width: 100% !important; min-height: 62px !important; padding: 10px 14px !important; border-radius: 14px !important; background: linear-gradient(100deg,#e9f8f5,#e3f6f1) !important; color: #08614f !important; font-size: 13px !important; }
.prediction-button span { display: none !important; }
.favorite-toggle-desktop { display: none !important; }

@media (min-width: 801px) {
    .prediction-section { height: 100px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 7px !important; }
    .favorite-toggle-desktop { display: inline-flex !important; order: 1; width: 36px !important; height: 29px !important; margin: 0 !important; border-radius: 8px !important; }
    .prediction-section .prediction-button { order: 2; min-height: 56px !important; }
}

/* Markets and footer */
.below-matches { display: flex !important; flex-direction: column !important; gap: 13px !important; margin-top: 13px !important; }
.sidebar-card { border: 1px solid var(--theme-line) !important; border-radius: 15px !important; background: var(--theme-card) !important; box-shadow: var(--theme-shadow) !important; }
.sidebar-title { padding: 13px 14px !important; background: transparent !important; color: var(--theme-ink) !important; font-size: 21px !important; }
.sidebar-title span { color: var(--theme-green) !important; }
.market-list { display: grid !important; grid-template-columns: repeat(7,minmax(100px,1fr)) !important; gap: 10px; padding: 0 14px 10px !important; overflow-x: auto; }
.market-item { min-height: 86px !important; padding: 12px 6px !important; border: 0 !important; border-radius: 12px !important; background: #ecf8f5 !important; color: #173d64 !important; display: flex !important; flex-direction: column !important; align-items: center; justify-content: center; gap: 4px; font-size: 12px !important; text-align: center; }
.market-icon { width: 20px !important; height: 20px !important; flex: 0 0 auto; color: var(--theme-green) !important; fill: none; stroke: currentColor; stroke-width: 1.8; }
.market-item > span:first-of-type { display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.2; }
.market-item > span:first-of-type strong { font-size: 13px; }
.market-item > span:first-of-type small { color: inherit; font-size: 10px; font-weight: 700; }
.market-item:hover, .market-item.active { background: #d7f1eb !important; color: var(--theme-green-dark) !important; }
.market-arrow { display: none !important; }
.accumulator-day { background: linear-gradient(100deg,var(--theme-green-softer),var(--theme-green-soft)) !important; }
.accumulator-selection { margin: 0 14px 10px !important; padding: 11px 12px !important; border: 1px solid var(--theme-line) !important; border-radius: 14px !important; background: var(--theme-card) !important; box-shadow: var(--theme-shadow) !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 9px 12px !important; }
.accumulator-selection:last-child { margin-bottom: 2px !important; }
.accumulator-selection-top { grid-column: 1 / -1; display: grid; grid-template-columns: 27px minmax(0, 1fr); align-items: center; gap: 9px; min-width: 0; }
.accumulator-ball { width: 25px; height: 25px; color: var(--theme-green) !important; fill: none; stroke: currentColor; stroke-width: 1.7; }
.accumulator-teams { display: grid; grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); align-items: center; gap: 6px; min-width: 0; }
.accumulator-team { min-width: 0; overflow: hidden; color: var(--theme-ink) !important; font-size: 12px; font-weight: 800; line-height: 1.2; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.accumulator-team:last-child { text-align: right; }
.accumulator-vs { color: var(--theme-green-dark) !important; font-size: 10px; font-weight: 900; text-align: center; }
.accumulator-selection .selection-info { min-width: 0; }
.accumulator-selection .selection-info small { display: block; margin-top: 0; color: var(--theme-muted) !important; font-size: 10px; line-height: 1.25; }
.accumulator-selection .accumulator-see-prediction { min-height: 30px; padding: 7px 9px !important; border: 0; border-radius: 8px; background: var(--theme-green) !important; color: #fff !important; font-size: 9px; font-weight: 800; line-height: 1; text-decoration: none; white-space: nowrap; }
.accumulator-empty { padding: 15px 16px !important; color: var(--theme-muted) !important; }
.site-footer { min-height: 181px !important; margin-top: 0 !important; padding: 16px 22px 20px !important; border-radius: 33px 33px 0 0 !important; background: linear-gradient(120deg,#005a4c,#00483f) !important; color: #fff !important; display: flex !important; flex-direction: column; align-items: center; text-align: center; }
.site-footer > div:not(.footer-link-group) { display: none !important; }
.site-footer::before {
    content: "FreeSureBets";
    display: block;
    margin-bottom: 12px;
    font-size: 25px;
    font-weight: 800;
    background: linear-gradient(90deg, #fff 0 67%, var(--theme-yellow) 67% 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.site-footer .footer-link-group { display: contents !important; }
.site-footer .footer-link-label { display: none !important; }
.footer-links { display: flex !important; flex-direction: row !important; gap: 20px; margin-top: 20px; font-size: 12px; }
.footer-links a, .footer-social-links a { display: inline-flex; align-items: center; gap: 6px; }
.footer-links a { padding: 6px 8px; border-radius: 7px; color: #fff !important; text-decoration: none; text-shadow: 0 1px 2px rgba(0,0,0,.24); }
.footer-links a:hover, .footer-links a:focus-visible { background: rgba(255,255,255,.16); color: var(--theme-yellow) !important; }
.footer-links::before { content: "We analyze the numbers. You make the call."; position: absolute; margin-top: -40px; color: #e7fffa; font-size: 13px; font-weight: 700; }
.footer-social-links { display: none !important; }

/* Header logo rules are centralized in header-consistency.css. */

/* Keep SEO fallback content in the same visual system. */
.match-card-seo { padding: 16px !important; border: 1px solid var(--theme-line) !important; border-radius: 15px !important; background: var(--theme-card) !important; box-shadow: var(--theme-shadow) !important; }
.match-card-seo .match-result { color: var(--theme-green-dark) !important; }
.match-date, .match-header .lead { color: var(--theme-muted) !important; }

:root[data-theme="dark"] .hero-panel { background: linear-gradient(110deg,#173e3c,#153633) !important; border-color: var(--theme-line) !important; }
:root[data-theme="dark"] .hero-panel h1 { color: var(--theme-ink) !important; }
:root[data-theme="dark"] .day-tab { background: #1e3945 !important; color: var(--theme-muted) !important; }
:root[data-theme="dark"] .day-tab.active { background: var(--theme-green) !important; color: #fff !important; }
:root[data-theme="dark"] .match-time, :root[data-theme="dark"] .team-name { color: var(--theme-ink) !important; }
:root[data-theme="dark"] .match-score, :root[data-theme="dark"] .vs-text { color: #fff !important; }
:root[data-theme="dark"] .market-item { background: #1c4945 !important; color: #e8f6f4 !important; }
:root[data-theme="dark"] .accumulator-selection { background: #173638 !important; }
:root[data-theme="dark"] .match-status-badge { background: #286257 !important; color: #e9fffa !important; }

@media (max-width: 720px) {
    .header-inner { height: 80px !important; padding: 0 25px !important; align-items: center !important; }
    .page-container { padding: 18px 16px 24px !important; }
    .content-page { padding: 18px 16px 24px !important; }
    .hero-panel { min-height: 126px; padding: 18px; }
    .hero-panel h1 { font-size: 25px; }
    .match-card { grid-template-columns: minmax(0,1fr) 92px minmax(0,1fr) !important; grid-template-rows: 34px 112px auto !important; padding: 7px 9px 10px !important; }
    .team-column { grid-row: 2 !important; height: 112px !important; padding: 8px 4px !important; }
    .home-column { grid-column: 1 !important; }
    .away-column { grid-column: 3 !important; }
    .match-card .team-logo, .match-card .team-logo-placeholder { width: 40px !important; height: 44px !important; max-width: 40px !important; max-height: 44px !important; }
    .team-name { max-width: 105px; font-size: 12px !important; }
    .match-center { grid-column: 2 !important; grid-row: 2 !important; height: 104px !important; min-height: 104px !important; }
    .prediction-section { grid-column: 1 / -1 !important; grid-row: 3 !important; height: auto !important; padding: 10px 0 0 !important; }
    .prediction-button { min-height: 56px !important; }
    .favorite-toggle-mobile { display: inline-flex !important; }
    .market-list { grid-template-columns: repeat(7,110px) !important; }
    .accumulator-selection { margin-left: 10px !important; margin-right: 10px !important; }
    .accumulator-selection .accumulator-see-prediction { padding-left: 8px !important; padding-right: 8px !important; }
    .profile-stats { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 560px) {
    .site-header { height: 149px !important; }
    .header-inner { height: 74px !important; padding: 0 17px !important; align-items: center !important; }
    .logo-container { height: 74px !important; }
    .logo-container { height: 74px !important; }
    .logo-container .site-logo { width: min(220px, 100%) !important; max-height: 70px !important; }
    .main-nav { top: 74px !important; height: 75px !important; }
    .nav-link, .country-menu-toggle, .favorites-button { min-height: 75px !important; font-size: 8px !important; }
    .nav-home span:first-child, .favorites-icon { font-size: 22px; }
    .page-container { padding: 14px 11px 20px !important; }
    .content-page { padding: 14px 11px 20px !important; }
    .hero-panel { min-height: 112px; padding: 15px 13px; }
    .hero-copy { gap: 10px; }
    .hero-ball { width: 49px; height: 49px; font-size: 28px; }
    .hero-panel h1 { margin-bottom: 5px; font-size: 19px; }
    .hero-panel p { font-size: 12px; }
    .hero-slogan { display: none; }
    .day-tabs { gap: 7px; padding-top: 10px; }
    .day-tab { min-height: 40px !important; padding: 0 15px !important; font-size: 11px !important; }
    .section-heading h1 { font-size: 18px !important; }
    .filter-button { height: 40px !important; padding: 0 15px !important; }
    .match-card { grid-template-columns: minmax(0,1fr) 74px minmax(0,1fr) !important; }
    .team-info { gap: 4px !important; }
    .match-card .team-logo, .match-card .team-logo-placeholder { width: 32px !important; height: 36px !important; max-width: 32px !important; max-height: 36px !important; }
    .team-name { max-width: calc(100% - 36px); font-size: 10px !important; }
    .match-time { font-size: 14px !important; }
    .match-timezone { max-width: 70px; font-size: 9px !important; }
    .match-score { font-size: 15px !important; }
    .match-status-badge { font-size: 8px !important; }
    .match-league-row .country-name { font-size: 10px; }
    .sidebar-title { font-size: 17px !important; }
    .site-footer { min-height: 160px !important; padding-top: 14px !important; }
    .content-page-card { padding: 20px 17px !important; }
    .footer-links { flex-wrap: wrap; justify-content: center; gap: 7px 9px; font-size: 9px; }
    .footer-links a, .footer-social-links a { gap: 3px; }
    .footer-icon { width: 12px; height: 12px; }
}

/* Prediction detail: make the recommendation the visual focal point while
   keeping the supporting match data calm and scannable. */
.prediction-content .fixture-card,
.prediction-content .page-section {
    border: 1px solid var(--theme-line) !important;
    border-radius: 15px !important;
    background: var(--theme-card) !important;
    box-shadow: var(--theme-shadow) !important;
}
.prediction-content .fixture-card { overflow: hidden; border-top: 5px solid var(--theme-yellow) !important; }
.prediction-content .fixture-league { padding: 13px 20px !important; background: linear-gradient(105deg,var(--theme-green-softer),var(--theme-green-soft)) !important; border-bottom: 1px solid var(--theme-line) !important; color: var(--theme-green-dark) !important; font-size: 12px !important; letter-spacing: .4px; text-transform: uppercase; }
.prediction-content .fixture-main { min-height: 245px; padding: 25px 28px; }
.prediction-content .fixture-team h1 a { color: var(--theme-ink) !important; }
.prediction-content .fixture-team .team-label { color: var(--theme-muted) !important; }
.prediction-content .fixture-center { min-height: 180px; border-color: var(--theme-line) !important; background: linear-gradient(145deg,var(--theme-green-softer),#fff7d8); border-radius: 14px; }
.prediction-content .fixture-time { color: var(--theme-green-dark) !important; }
.prediction-content .fixture-date, .prediction-content .fixture-timezone, .prediction-content .fixture-venue { color: var(--theme-muted) !important; }
.prediction-content .fixture-center .vs-text { color: var(--theme-green-dark) !important; }
.prediction-content .status-badge { background: var(--theme-green) !important; color: #fff !important; }
.prediction-content .page-section { padding: 22px !important; }
.prediction-content .section-title { margin-bottom: 17px; }
.prediction-content .section-title h2 { color: var(--theme-ink) !important; font-size: 19px; }
.prediction-content .section-title p { color: var(--theme-muted) !important; }
.prediction-content .section-number { width: 12px; height: 12px; border: 3px solid var(--theme-yellow); background: var(--theme-green) !important; box-shadow: 0 0 0 4px var(--theme-green-soft); font-size: 0; }
.prediction-content .prediction-card { overflow: hidden; padding-top: 0 !important; border-top: 0 !important; }
.prediction-content .prediction-card .section-title { margin: 0 -22px 18px; padding: 15px 22px; background: linear-gradient(110deg,var(--theme-green-deep),var(--theme-green)); }
.prediction-content .prediction-card .section-title h2 { color: #fff !important; }
.prediction-content .prediction-card .section-number { border-color: var(--theme-yellow); background: var(--theme-yellow) !important; box-shadow: none; }
.prediction-content .winner-box { background: linear-gradient(145deg,var(--theme-green-deep),var(--theme-green)) !important; border: 2px solid var(--theme-yellow) !important; border-radius: 13px !important; box-shadow: 0 7px 18px rgba(0,84,71,.16); }
.prediction-content .winner-box .eyebrow, .prediction-content .winner-box .prediction-label { color: #eafff8 !important; }
.prediction-content .winner-box strong { color: #fff !important; }
.prediction-content .prediction-advice { margin-top: 13px; padding: 13px 14px; border: 2px solid rgba(255,255,255,.72); border-left: 5px solid var(--theme-yellow); border-radius: 10px; background: linear-gradient(105deg,#ffd85a,#f6b817) !important; color: #17385f !important; box-shadow: 0 4px 10px rgba(90,65,0,.18); font-size: clamp(14px,1.6vw,19px); font-weight: 900; line-height: 1.25; }
.prediction-content .probability-box, .prediction-content .prediction-meta { border-color: var(--theme-line) !important; border-radius: 11px !important; background: var(--theme-green-softer) !important; }
.prediction-content .probability-box span, .prediction-content .prediction-meta span { color: var(--theme-muted) !important; }
.prediction-content .prediction-meta strong { color: var(--theme-green-dark) !important; }
.prediction-content .ai-summary { border: 1px solid #d5eee5; border-left: 5px solid var(--theme-yellow); border-radius: 11px; background: linear-gradient(110deg,var(--theme-green-softer),#fffdf1) !important; color: var(--theme-ink) !important; }
.prediction-content .team-data-card { border-color: var(--theme-line) !important; border-radius: 12px; background: var(--theme-card) !important; }
.prediction-content .team-data-header { background: var(--theme-green-soft) !important; }
.prediction-content .team-data-header h3, .prediction-content .team-data-header span { color: var(--theme-green-dark) !important; }

/* Match the server-rendered, no-JavaScript view to the interactive card. */
#prediction-seo-content { color: var(--theme-ink); }
#prediction-seo-content > article { padding: 22px !important; border: 1px solid var(--theme-line); border-radius: 15px; background: var(--theme-card); box-shadow: var(--theme-shadow); }
#prediction-seo-content .breadcrumbs { color: var(--theme-muted); }
#prediction-seo-content .breadcrumbs a, #prediction-seo-content .eyebrow a { color: var(--theme-green) !important; }
#prediction-seo-content .match-header { padding: 18px; border-radius: 12px; background: linear-gradient(110deg,var(--theme-green-softer),#fff8dc); border: 1px solid #d7eee7; }
#prediction-seo-content .match-header h1 { color: var(--theme-ink); }
#prediction-seo-content .match-date, #prediction-seo-content .teams span { color: var(--theme-muted); }
#prediction-seo-content .match-result { color: var(--theme-green-dark); }
#prediction-seo-content section[aria-labelledby="prediction-heading"] { margin-top: 22px; padding: 18px; border: 1px solid var(--theme-line); border-top: 4px solid var(--theme-yellow); border-radius: 13px; background: var(--theme-card); }
#prediction-seo-content section[aria-labelledby="prediction-heading"] > h2 { margin: 0 0 14px; color: var(--theme-ink); }
#prediction-seo-content .prediction-grid { grid-template-columns: 2fr repeat(3,minmax(0,1fr)); gap: 10px; }
#prediction-seo-content .prediction-grid > div { border: 1px solid var(--theme-line); border-radius: 10px; background: var(--theme-green-softer); }
#prediction-seo-content .prediction-grid .seo-prediction-winner { grid-row: span 2; background: linear-gradient(145deg,var(--theme-green-deep),var(--theme-green)); border: 2px solid var(--theme-yellow); color: #fff; }
#prediction-seo-content .prediction-grid .seo-prediction-advice { grid-column: 2 / -1; background: linear-gradient(105deg,#ffd85a,#f6b817); border: 2px solid var(--theme-yellow-dark); color: #17385f; }
#prediction-seo-content .prediction-grid dt { color: var(--theme-muted); }
#prediction-seo-content .seo-prediction-winner dt { color: #eafff8; }
#prediction-seo-content .prediction-grid dd { color: var(--theme-ink); }
#prediction-seo-content .seo-prediction-winner dd { color: #fff; font-size: 1.35rem; }
#prediction-seo-content .seo-prediction-advice dd { color: #17385f; font-size: 1.2rem; }
#prediction-seo-content section:not([aria-labelledby="prediction-heading"]) { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--theme-line); }
#prediction-seo-content section:not([aria-labelledby="prediction-heading"]) h2 { color: var(--theme-green-dark); }

:root[data-theme="dark"] .prediction-content .fixture-center { background: linear-gradient(145deg,#173d38,#4d4018); }
:root[data-theme="dark"] .prediction-content .ai-summary { background: linear-gradient(110deg,#173d38,#3e371b) !important; border-color: var(--theme-line); }
:root[data-theme="dark"] #prediction-seo-content > article,
:root[data-theme="dark"] #prediction-seo-content .match-header,
:root[data-theme="dark"] #prediction-seo-content section[aria-labelledby="prediction-heading"] { background: var(--theme-card); }

@media (max-width: 800px) {
    .prediction-content .fixture-main { padding: 22px 12px; }
    .prediction-content .prediction-card .section-title { margin-left: -22px; margin-right: -22px; }
    #prediction-seo-content .prediction-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    #prediction-seo-content .prediction-grid .seo-prediction-winner,
    #prediction-seo-content .prediction-grid .seo-prediction-advice { grid-column: 1 / -1; grid-row: auto; }
}

@media (max-width: 500px) {
    .prediction-content .page-section { padding: 16px !important; }
    .prediction-content .prediction-card .section-title { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
    #prediction-seo-content > article { padding: 16px !important; }
    #prediction-seo-content .match-header, #prediction-seo-content section[aria-labelledby="prediction-heading"] { padding: 14px; }
}

/* New UI prediction composition: summary and comparison beside each other,
   followed by form and head-to-head, while retaining the existing data hooks. */
.prediction-content .prediction-detail-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 14px; }
.prediction-content .prediction-detail-grid .page-section { min-width: 0; margin-bottom: 0 !important; }
.prediction-content > .page-section:not(.prediction-card) { margin-bottom: 14px !important; }
.prediction-content .fixture-center { overflow: visible; }
.fixture-recommendation, .seo-recommendation { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 7px 9px; border: 1px solid #b9e8ce; border-radius: 12px; background: linear-gradient(105deg,#d9f8e9,#fff1b8); text-align: left; }
.fixture-recommendation { width: 100%; margin-top: 10px; }
.recommendation-icon { width: 27px; height: 27px; display: grid; place-items: center; flex: 0 0 27px; border-radius: 50%; background: var(--theme-green); color: #fff; font-size: 17px; font-weight: 900; }
.fixture-recommendation small, .seo-recommendation small { display: block; color: var(--theme-green-dark); font-size: 8px; font-weight: 900; letter-spacing: .4px; }
.fixture-recommendation strong, .seo-recommendation strong { display: block; color: var(--theme-ink); font-size: 10px; line-height: 1.2; overflow-wrap: anywhere; }
#prediction-seo-content .seo-recommendation { justify-content: flex-start; max-width: 560px; margin: 14px 0; }
#prediction-seo-content .seo-recommendation strong { font-size: 14px; }

/* Probability cards follow the New UI: icon, circular percentage, progress
   track, and supporting label, with green/gold ranking states. */
.prediction-content .prediction-card .prediction-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.prediction-content .prediction-card .winner-box { grid-column: 1 / -1; grid-row: auto; }
.prediction-content .prediction-card .probability-box { min-height: 132px; padding: 14px 12px; display: flex; align-items: center; gap: 11px; overflow: hidden; }
.probability-ring { --probability: 0%; --ring-color: var(--theme-green); position: relative; width: 70px; height: 70px; flex: 0 0 70px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--ring-color) var(--probability),var(--theme-probability-track) 0); }
.probability-ring::before { content: ""; position: absolute; width: 53px; height: 53px; border-radius: 50%; background: var(--theme-card); }
.probability-ring span { position: relative; z-index: 1; color: var(--theme-ink) !important; font-size: 17px !important; font-weight: 900 !important; }
.probability-box.probability-high .probability-ring { --ring-color: var(--theme-green); }
.probability-box.probability-medium .probability-ring,
.probability-box.probability-low .probability-ring { --ring-color: var(--theme-green); }
.probability-copy { min-width: 0; flex: 1; }
.probability-title { display: flex; align-items: center; gap: 5px; color: var(--theme-ink) !important; font-size: 10px; font-weight: 900; white-space: nowrap; }
.probability-title span { color: inherit !important; font-size: inherit !important; font-weight: inherit !important; }
.probability-box .metric-icon { width: 18px; height: 18px; flex: 0 0 18px; color: var(--theme-green) !important; fill: none; stroke: currentColor; stroke-width: 1.9; }
.probability-team { min-height: 17px; overflow: hidden; color: var(--theme-muted) !important; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.probability-bar { height: 7px; width: 100%; margin: 8px 0 4px; overflow: hidden; border-radius: 99px; background: var(--theme-probability-track); }
.probability-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg,var(--theme-green),#4bd597); transition: width .3s ease; }
    .probability-copy small { display: block; color: var(--theme-muted) !important; font-size: 9px; }
.prediction-content .prediction-card .probability-box.probability-high { --ring-color: var(--theme-green); background: var(--theme-green-soft) !important; border-color: var(--theme-green) !important; color: var(--theme-ink) !important; }
.prediction-content .prediction-card .probability-box.probability-medium { --ring-color: var(--theme-yellow); background: #fff8dc !important; border-color: #e8b600 !important; color: var(--theme-ink) !important; }
.prediction-content .prediction-card .probability-box.probability-low { --ring-color: #8aa4bd; background: #f0f5f7 !important; border-color: #c8d8df !important; color: var(--theme-ink) !important; }
.prediction-content .prediction-card .probability-box.probability-medium .metric-icon { color: #b18400 !important; }
.prediction-content .prediction-card .probability-box.probability-low .metric-icon { color: #6680a0 !important; }
.prediction-content .prediction-card .prediction-meta { min-height: 74px; background: var(--theme-green-softer) !important; }
.prediction-content .prediction-card .prediction-meta:nth-last-child(2) { grid-column: 1 / 4; }
.prediction-content .prediction-card .prediction-meta:last-child { grid-column: 4; }
.prediction-content .prediction-meta { display: flex; align-items: center; gap: 9px; }
.prediction-content .meta-icon { width: 24px; height: 24px; flex: 0 0 24px; color: var(--theme-green) !important; fill: none; stroke: currentColor; stroke-width: 1.8; }
.prediction-content .prediction-meta > div { min-width: 0; }

.prediction-content .section-number { width: 36px !important; height: 36px !important; border: 0 !important; background: var(--theme-green-soft) !important; box-shadow: none !important; color: var(--theme-green) !important; }
.prediction-content .prediction-card .section-number { background: var(--theme-yellow) !important; color: var(--theme-green-dark) !important; }
.prediction-content .section-icon { width: 19px; height: 19px; display: block; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 800px) {
    .prediction-content .fixture-main { grid-template-columns: minmax(0,1fr) minmax(145px,1.4fr) minmax(0,1fr); }
    .prediction-content .prediction-card .prediction-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .prediction-content .prediction-card .prediction-meta:nth-last-child(2) { grid-column: 1 / -1; }
    .prediction-content .prediction-card .prediction-meta:last-child { grid-column: auto; }
}

@media (max-width: 500px) {
    .prediction-content .fixture-main { grid-template-columns: minmax(0,1fr) 96px minmax(0,1fr); }
    .fixture-recommendation { padding: 6px; gap: 5px; }
    .recommendation-icon { width: 22px; height: 22px; flex-basis: 22px; font-size: 14px; }
    .fixture-recommendation small { font-size: 7px; }
    .fixture-recommendation strong { font-size: 8px; }
    .prediction-content .prediction-card .prediction-grid { grid-template-columns: 1fr 1fr; }
    .prediction-content .prediction-card .winner-box { grid-column: 1 / -1; }
    .prediction-content .prediction-card .probability-box { min-height: 116px; padding: 11px 8px; gap: 7px; }
    .probability-ring { width: 58px; height: 58px; flex-basis: 58px; }
    .probability-ring::before { width: 43px; height: 43px; }
    .probability-ring span { font-size: 14px !important; }
    .probability-title { font-size: 9px; }
    .probability-team { font-size: 9px; }
}

/* Prediction dashboard: the New UI composition, translated to the site's
   mint, deep-green and gold palette while keeping all live data hooks. */
.prediction-content .fixture-card {
    position: relative;
    isolation: isolate;
    border-top: 0 !important;
    overflow: hidden;
}
.prediction-content .fixture-card::before,
.prediction-content .fixture-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    width: 22%;
    pointer-events: none;
    opacity: .8;
}
.prediction-content .fixture-card::before {
    left: 0;
    background: linear-gradient(125deg, rgba(8,117,96,.18), transparent 70%);
    clip-path: polygon(0 0, 100% 0, 55% 100%, 0 100%);
}
.prediction-content .fixture-card::after {
    right: 0;
    background: linear-gradient(225deg, rgba(8,117,96,.18), transparent 70%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 45% 100%);
}
.prediction-content .fixture-main { min-height: 230px; padding: 24px 28px; }
.prediction-content .fixture-team .team-logo { width: 92px; height: 92px; margin-bottom: 11px; }
.prediction-content .fixture-team h1 { max-width: 210px; color: var(--theme-ink); font-size: 19px; font-weight: 850; }
.prediction-content .fixture-center {
    min-height: 188px;
    margin: 0 8px;
    padding: 15px 12px;
    border: 1px solid #d6eee7;
    border-radius: 14px;
    background: linear-gradient(145deg, var(--theme-green-softer), #fff8dc);
}
.prediction-content .fixture-date::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 5px;
    vertical-align: -2px;
    background: var(--theme-green);
    -webkit-mask: url("/site-icons.svg#i-calendar") center / contain no-repeat;
    mask: url("/site-icons.svg#i-calendar") center / contain no-repeat;
}
.prediction-content .fixture-time { color: var(--theme-green-dark); font-size: 26px; }
.prediction-content .fixture-center .vs-text { margin: 9px 0; color: var(--theme-green); font-size: 13px; }
.prediction-content .fixture-recommendation { max-width: 100%; }

.prediction-content .prediction-card { border-top: 0 !important; }
.prediction-content .prediction-card .prediction-grid { align-items: stretch; }
.prediction-content .winner-box {
    position: relative;
    min-height: 95px;
    justify-content: center;
    padding: 16px 18px;
    background: linear-gradient(115deg, var(--theme-green-deep), var(--theme-green)) !important;
}
.prediction-content .winner-box::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 32%;
    height: 100%;
    background: linear-gradient(135deg, transparent 35%, rgba(255,196,0,.19));
    pointer-events: none;
}
.prediction-content .winner-box strong { font-size: clamp(21px, 2.3vw, 30px); }
.prediction-content .prediction-advice { position: relative; z-index: 1; }

.prediction-content .section-title { align-items: center; }
.prediction-content .section-title h2 { font-size: 18px; letter-spacing: -.15px; }
.prediction-content .section-title p { margin-top: 3px; }
.prediction-content .section-number { display: grid; place-items: center; }
.prediction-content .section-icon { color: var(--theme-green); }

.prediction-content .ai-summary {
    min-height: 0;
    padding: 13px 15px;
    border-left-width: 4px;
    background: linear-gradient(105deg, var(--theme-green-softer), #fffdf1) !important;
}
.prediction-synthesis-list { display: grid; gap: 9px; padding: 0; list-style: none; }
.prediction-synthesis-list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 !important;
    color: var(--theme-ink);
    font-size: 13px;
    line-height: 1.45;
}
.analysis-check-icon {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    padding: 4px;
    border-radius: 50%;
    background: var(--theme-green);
    color: #fff;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.comparison-teams {
    display: flex;
    justify-content: space-between;
    margin: 0 0 12px;
    padding: 0 3px;
    color: var(--theme-green-dark);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}
.comparison-rows { display: grid; gap: 5px; }
.comparison-row {
    grid-template-columns: minmax(88px, 1fr) 54px minmax(120px, 2fr) 54px !important;
    gap: 8px !important;
    min-height: 43px;
    margin: 0 !important;
    padding: 5px 7px;
    border: 1px solid var(--theme-line);
    border-radius: 9px;
    background: var(--theme-green-softer);
}
.comparison-label {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--theme-ink);
    font-size: 10px;
    text-transform: uppercase;
}
.comparison-icon {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    padding: 5px;
    border-radius: 50%;
    background: var(--theme-green-soft);
    color: var(--theme-green);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.comparison-bar { height: 9px; background: #e6eef0; }
.comparison-bar .comparison-green { background: var(--theme-green); }
.comparison-bar .comparison-red { background: #d06b67; }
.comparison-bar .comparison-neutral { background: #9aafb9; }
.comparison-row strong.comparison-green { color: var(--theme-green-dark); }
.comparison-row strong.comparison-red { color: #ad4c47; }

.prediction-content .team-analysis-grid { gap: 12px; }
.prediction-content .team-data-card { box-shadow: none; }
.prediction-content .team-data-header { padding: 12px 14px; }
.prediction-content .recent-team-header { min-height: 86px; align-items: center; }
.team-heading-copy { display: flex; align-items: center; min-width: 0; gap: 10px; }
.team-heading-copy img, .team-logo-fallback {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    object-fit: contain;
}
.team-logo-fallback { display: grid; place-items: center; border-radius: 50%; background: rgba(8,117,96,.12); color: var(--theme-green); }
.team-logo-fallback svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.team-heading-copy h3 { color: var(--theme-green-dark) !important; font-size: 13px; }
.team-heading-copy span { color: var(--theme-muted) !important; }
.recent-form-summary { display: grid; justify-items: end; gap: 4px; min-width: 115px; }
.recent-form-label { color: var(--theme-muted); font-size: 8px; font-weight: 900; letter-spacing: .45px; }
.recent-form-badges { display: flex; gap: 3px; }
.recent-form-badges b {
    display: grid;
    place-items: center;
    width: 21px;
    height: 21px;
    border-radius: 5px;
    color: #fff;
    font-size: 10px;
}
.recent-form-badges em { color: var(--theme-muted); font-style: normal; }
.recent-form-badges .form-w { background: var(--theme-green); }
.recent-form-badges .form-d { background: #d6a400; }
.recent-form-badges .form-l { background: #d05b56; }
.recent-goals { display: flex; align-items: baseline; gap: 4px; }
.recent-goals strong { color: var(--theme-green-dark); font-size: 17px; }
.recent-goals small { color: var(--theme-muted); font-size: 8px; font-weight: 800; }

.prediction-content .table-wrap { border: 1px solid var(--theme-line); border-radius: 8px; }
.prediction-content table { min-width: 0; }
.prediction-content th { background: var(--theme-green-softer); color: var(--theme-green-dark); }
.prediction-content td, .prediction-content th { padding: 9px 10px; border-color: var(--theme-line); }
.prediction-content .result { font-weight: 900; }
.prediction-content .h2h-table-wrap { overflow-x: auto; }
.prediction-content table.h2h-table { min-width: 560px; }
.h2h-team-cell { display: inline-flex; align-items: center; gap: 7px; }
.h2h-team-cell img { width: 27px; height: 27px; object-fit: contain; }
.h2h-table td:nth-child(3) { color: var(--theme-green-dark); font-size: 14px; font-weight: 900; text-align: center; }
.h2h-table th:nth-child(3) { text-align: center; }

.prediction-content .stat-grid { background: var(--theme-line); }
.prediction-content .stat { background: var(--theme-card); }
.prediction-content .stat strong { color: var(--theme-green-dark); }
.prediction-content .goal-breakdown { border-color: var(--theme-line); }
.prediction-content .goal-breakdown-row { background: #fff9df; border: 1px solid #f3e1a4; }
.prediction-content .goal-line { color: var(--theme-green-dark); }

@media (max-width: 600px) {
    .prediction-content .fixture-main { min-height: 420px; padding: 18px 12px; }
    .prediction-content .fixture-team .team-logo { width: 70px; height: 70px; }
    .prediction-content .fixture-center { margin: 0; }
    .comparison-row { grid-template-columns: 78px 45px minmax(70px, 1fr) 45px !important; gap: 5px !important; }
    .comparison-label { font-size: 8px; }
    .comparison-icon { width: 21px; height: 21px; flex-basis: 21px; padding: 4px; }
    .recent-team-header { align-items: flex-start !important; flex-direction: column; gap: 9px; }
    .recent-form-summary { width: 100%; justify-items: start; }
    .team-heading-copy img, .team-logo-fallback { width: 39px; height: 39px; flex-basis: 39px; }
}

/* Pixel-match pass for the uploaded New UI reference. The existing page
   structure remains data-driven; these rules translate it into the reference
   hero and four-column market strip. */
.prediction-page-body .page-container {
    width: min(100%, 968px) !important;
    max-width: 968px !important;
    padding-top: 0 !important;
}
.prediction-page-body .site-header,
.prediction-page-body .page-container,
.prediction-page-body .site-footer,
.prediction-page-body .prediction-content,
.prediction-page-body .prediction-detail-grid,
.prediction-page-body .page-section,
.prediction-page-body .fixture-card {
    width: min(100%, 968px) !important;
    max-width: 968px !important;
}
.prediction-page-body .prediction-content { width: 100%; }
.prediction-page-body .prediction-breadcrumbs {
    height: 44px;
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--theme-ink);
    font-size: 12px;
}
.prediction-page-body .prediction-breadcrumbs svg { width: 18px; height: 18px; fill: var(--theme-green); stroke: var(--theme-green); stroke-width: 1.2; stroke-linejoin: round; }
.prediction-page-body .prediction-breadcrumbs b { color: var(--theme-muted); font-weight: 500; }
.prediction-page-body .fixture-card {
    min-height: 192px;
    margin-bottom: 0;
    border-radius: 10px !important;
    border: 1px solid #dfeaf2 !important;
    background: #fff;
}
.prediction-page-body .fixture-league {
    position: absolute;
    z-index: 4;
    top: 0;
    left: 50%;
    width: auto;
    padding: 4px 18px 5px !important;
    transform: translateX(-50%);
    border: 0 !important;
    border-radius: 15px;
    background: var(--theme-green) !important;
    color: #fff !important;
    font-size: 10px !important;
    line-height: 1;
    white-space: nowrap;
}
.prediction-page-body .fixture-main {
    grid-template-columns: 245px minmax(0, 1fr) 245px;
    min-height: 192px;
    padding: 0 25px;
}
.prediction-page-body .fixture-team { z-index: 2; gap: 7px; }
.prediction-page-body .fixture-team .team-logo { width: 94px; height: 104px; }
.prediction-page-body .fixture-team h1 { font-size: 20px; line-height: 1.1; text-transform: none; }
.prediction-page-body .fixture-team .team-label { display: none; }
.prediction-page-body .fixture-center {
    min-height: 192px;
    margin: 0;
    padding: 22px 0 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.prediction-page-body .fixture-match-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    color: var(--theme-ink);
    font-size: 28px;
    font-weight: 850;
    line-height: 1.1;
    white-space: nowrap;
}
.prediction-page-body .fixture-match-title em { color: var(--theme-green); font-style: normal; font-size: 21px; }
.prediction-page-body .fixture-match-date {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 16px;
    color: var(--theme-ink);
    font-size: 12px;
    font-weight: 600;
}
.prediction-page-body .fixture-match-date svg { width: 17px; height: 17px; fill: none; stroke: var(--theme-green-dark); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.prediction-page-body .fixture-center > .fixture-date,
.prediction-page-body .fixture-center > .fixture-time,
.prediction-page-body .fixture-center > .fixture-timezone,
.prediction-page-body .fixture-center > .vs-text,
.prediction-page-body .fixture-center > .fixture-venue,
.prediction-page-body .fixture-center > .status-badge { display: none !important; }
.prediction-page-body .fixture-recommendation {
    width: 414px;
    min-height: 58px;
    margin-top: 22px;
    padding: 0 28px;
    gap: 15px;
    border: 0;
    border-radius: 24px;
    background: linear-gradient(90deg, #c6f4e6, #dcf8f0);
}
.prediction-page-body .recommendation-icon { width: 42px; height: 42px; flex-basis: 42px; }
.prediction-page-body .recommendation-icon svg { width: 25px; height: 25px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.prediction-page-body .fixture-recommendation small { margin-bottom: 3px; color: #05a96e; font-size: 10px; }
.prediction-page-body .fixture-recommendation strong { color: #08295e; font-size: 14px; }

.prediction-page-body .prediction-card {
    margin-top: 17px;
    padding: 16px 14px !important;
    border-radius: 10px !important;
}
.prediction-page-body .prediction-card > .section-title,
.prediction-page-body .prediction-card .winner-box,
.prediction-page-body .prediction-card .prediction-meta:nth-last-child(2) { display: none !important; }
.prediction-page-body .prediction-card .prediction-grid {
    grid-template-columns: 1fr 1px 1fr 1px 1fr 1px 1.03fr;
    align-items: center;
    gap: 0;
    padding: 0;
}
.prediction-page-body #home-probability-box { grid-column: 1; }
.prediction-page-body #draw-probability-box { grid-column: 3; }
.prediction-page-body #away-probability-box { grid-column: 5; }
.prediction-page-body .prediction-meta:last-child { grid-column: 7; }
.prediction-page-body .fixture-favorite-toggle { display: none !important; }
.prediction-page-body .prediction-card .probability-box {
    min-height: 98px;
    padding: 0 14px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}
.prediction-page-body .prediction-card .probability-box.probability-high,
.prediction-page-body .prediction-card .probability-box.probability-medium,
.prediction-page-body .prediction-card .probability-box.probability-low { background: transparent !important; border-color: transparent !important; }
.prediction-page-body .prediction-card .probability-box:nth-of-type(2)::after,
.prediction-page-body .prediction-card .probability-box:nth-of-type(3)::after,
.prediction-page-body .prediction-card .probability-box:nth-of-type(4)::after {
    content: "";
    width: 1px;
    height: 92px;
    position: absolute;
    right: 0;
    top: 3px;
    background: #dfe9f1;
}
.prediction-page-body .prediction-card .probability-box { position: relative; }
.prediction-page-body .probability-ring {
    width: 83px;
    height: 83px;
    flex-basis: 83px;
}
.prediction-page-body .probability-ring::before { width: 63px; height: 63px; }
.prediction-page-body .probability-ring span { font-size: 17px !important; }
.prediction-page-body .probability-title { gap: 10px; font-size: 11px; }
.prediction-page-body .probability-box .metric-icon {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
    padding: 7px;
    border-radius: 50%;
    background: var(--theme-home-icon-bg);
    color: var(--theme-home-icon) !important;
}
.prediction-page-body #draw-probability-box .metric-icon { background: var(--theme-draw-icon-bg); color: var(--theme-draw-icon) !important; }
.prediction-page-body #away-probability-box .metric-icon { background: var(--theme-away-icon-bg); color: var(--theme-away-icon) !important; }
.prediction-page-body .probability-team { margin-top: 4px; font-size: 12px; }
.prediction-page-body .probability-bar { height: 9px; margin-top: 9px; }
.prediction-page-body #away-probability-bar { background: #46a9ea; }
.prediction-page-body #away-probability-box .probability-ring { --ring-color: var(--theme-green); }
.prediction-page-body .prediction-meta:last-child {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 98px;
    gap: 15px;
    padding: 0 12px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}
.prediction-page-body .prediction-meta:last-child .meta-icon {
    width: 55px;
    height: 55px;
    flex: 0 0 55px;
    padding: 12px;
    border-radius: 50%;
    background: var(--theme-goals-icon-bg);
    color: var(--theme-goals-icon) !important;
    stroke-width: 1.7;
}
.prediction-page-body .prediction-meta:last-child span { color: var(--theme-ink) !important; font-size: 11px; font-weight: 800; }
.prediction-page-body .prediction-meta:last-child strong { margin-top: 5px; color: var(--theme-ink) !important; font-size: 28px; line-height: 1.05; }
.prediction-page-body .prediction-meta:last-child strong::after { content: ""; display: block; margin-top: 4px; color: var(--theme-muted); font-size: 10px; font-weight: 500; content: "Total goals"; }
.prediction-page-body .page-section:not(.prediction-card) { padding: 0 14px 15px !important; }
.prediction-page-body .page-section:not(.prediction-card) .section-title { height: 55px; margin-bottom: 0; }
.prediction-page-body .page-section:not(.prediction-card) .section-title::after { content: ""; width: 37px; height: 2px; margin: 0 7px 0 auto; background: var(--theme-green); }
.prediction-page-body .page-section:not(.prediction-card) .section-number { width: 49px !important; height: 49px !important; }
.prediction-page-body .page-section:not(.prediction-card) .section-icon { width: 27px; height: 27px; }

@media (max-width: 900px) and (min-width: 601px) {
    .prediction-page-body .fixture-main { grid-template-columns: 190px minmax(0, 1fr) 190px; }
    .prediction-page-body .fixture-match-title { font-size: 23px; }
    .prediction-page-body .fixture-recommendation { width: min(100%, 390px); }
}
@media (max-width: 600px) {
    .prediction-page-body .fixture-card { min-height: 430px; }
    .prediction-page-body .fixture-main { display: flex; flex-direction: column; min-height: 430px; padding: 20px; }
    .prediction-page-body .fixture-team { width: 100%; height: 118px; flex: 0 0 118px; }
    .prediction-page-body .fixture-center { min-height: 0; }
    .prediction-page-body .fixture-match-title { font-size: 21px; white-space: normal; text-align: center; }
    .prediction-page-body .fixture-recommendation { width: min(100%, 414px); margin-top: 16px; }
    .prediction-page-body .prediction-card .prediction-grid { grid-template-columns: 1fr 1fr; }
    .prediction-page-body #home-probability-box,
    .prediction-page-body #draw-probability-box,
    .prediction-page-body #away-probability-box { grid-column: auto; }
    .prediction-page-body .prediction-card .probability-box { padding: 8px; }
    .prediction-page-body .prediction-card .probability-box:nth-of-type(3)::after,
    .prediction-page-body .prediction-card .probability-box:nth-of-type(4)::after { display: none; }
    .prediction-page-body .prediction-meta:last-child { grid-column: 1 / -1; min-height: 82px; }
}

@media (min-width: 801px) {
    .prediction-page-body .prediction-card .prediction-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1.03fr) !important;
        grid-template-rows: 98px !important;
        grid-auto-flow: column;
        width: 100%;
        min-width: 0;
        overflow: hidden;
    }
    .prediction-page-body .prediction-card #home-probability-box,
    .prediction-page-body .prediction-card #draw-probability-box,
    .prediction-page-body .prediction-card #away-probability-box,
    .prediction-page-body .prediction-card .prediction-meta:last-child {
        grid-row: 1;
        min-width: 0;
        min-height: 98px;
    }
    .prediction-page-body .prediction-card .probability-copy,
    .prediction-page-body .prediction-card .probability-title,
    .prediction-page-body .prediction-card .probability-team { min-width: 0; }
}

/* Final match-card order: keep the schedule directly below the league and
   hide the legacy duplicate time that still exists in the centre column. */
.match-card .match-schedule {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
}

.match-card .team-column,
.match-card .match-center {
    grid-row: 3 !important;
}

.match-card .match-center > .match-time,
.match-card .match-center > .match-timezone {
    display: none !important;
}

/* Keep the reference-sized rings on desktop while preventing them from
   crowding the two-column mobile cards. */
@media (max-width: 600px) {
    .prediction-page-body .probability-ring {
        width: 58px;
        height: 58px;
        flex-basis: 58px;
    }
    .prediction-page-body .probability-ring::before {
        width: 43px;
        height: 43px;
    }
    .prediction-page-body .probability-ring span { font-size: 14px !important; }
}

/* Final match-list ordering overrides the legacy responsive card rules. */
.match-card {
    grid-template-rows: 39px 34px 112px !important;
}

@media (max-width: 850px) {
    .match-card {
        grid-template-rows: 34px 40px 112px auto !important;
    }
}

/* Keep the compact fixture order above the reference-page mobile defaults. */
@media (max-width: 600px) {
    .prediction-page-body .fixture-card { min-height: 0 !important; }
    .prediction-page-body .fixture-main {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto auto !important;
        min-height: 0 !important;
        padding: 24px 14px 16px !important;
        gap: 0 7px !important;
    }
    .prediction-page-body .fixture-match-title {
        font-size: 14px !important;
        white-space: nowrap !important;
    }
    .prediction-page-body .fixture-recommendation {
        width: 100% !important;
        min-height: 54px !important;
        margin-top: 14px !important;
        padding: 8px 14px !important;
    }
}

/* Final footer flow override: keep the slogan and links in normal flow so
   narrow screens can wrap them without collisions. */
.site-footer {
    min-height: 0 !important;
    height: auto !important;
    padding: 18px 16px 24px !important;
}

.site-footer .footer-link-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
}

.footer-links {
    position: static !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 8px 12px !important;
    margin: 10px 0 0 !important;
}

.footer-links::before {
    position: static !important;
    display: block !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: 0 0 4px !important;
    line-height: 1.25 !important;
}

/* Final prediction layout: keep the schedule in its own row between the
   league label and the team information. */
.prediction-page-body .fixture-main {
    display: grid !important;
    grid-template-columns: 245px minmax(0, 1fr) 245px !important;
    grid-template-rows: 34px 192px !important;
    min-height: 240px !important;
    padding: 34px 25px 14px !important;
}

.prediction-page-body .fixture-match-date {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100%;
    min-height: 34px;
    margin: 0 !important;
    padding: 0 !important;
}

.prediction-page-body .fixture-team,
.prediction-page-body .fixture-center { grid-row: 2 !important; }
.prediction-page-body .home-team { grid-column: 1 !important; }
.prediction-page-body .fixture-center { grid-column: 2 !important; }
.prediction-page-body .away-team { grid-column: 3 !important; }

/* Use a stable goals-market hook instead of relying on :last-child. */
.prediction-page-body .prediction-card .goals-market {
    grid-column: 7 !important;
    grid-row: 1 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 98px;
    gap: 15px;
    padding: 0 12px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.prediction-page-body .prediction-card .goals-market .meta-icon {
    width: 55px;
    height: 55px;
    flex: 0 0 55px;
    padding: 12px;
    border-radius: 50%;
    background: var(--theme-goals-icon-bg);
    color: var(--theme-goals-icon) !important;
    stroke-width: 1.7;
}

/* Use explicit conic-gradient stops and a higher-specificity text rule so
   the legacy prediction stylesheet cannot mute or flatten the circles. */
:is(#prediction-page, .ssr-probability-markets) .prediction-card .probability-ring {
    background: conic-gradient(
        var(--ring-color) 0 var(--probability),
        var(--theme-probability-track) var(--probability) 100%
    );
}

:is(#prediction-page, .ssr-probability-markets) .prediction-card .probability-ring > span {
    color: var(--theme-ink) !important;
    font-size: 17px !important;
    font-weight: 900 !important;
}

@media (max-width: 800px) {
    .prediction-page-body .prediction-card .prediction-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: auto auto auto !important;
        grid-auto-flow: row !important;
    }
    .prediction-page-body .prediction-card #home-probability-box,
    .prediction-page-body .prediction-card #draw-probability-box,
    .prediction-page-body .prediction-card #away-probability-box {
        grid-column: auto !important;
        grid-row: auto !important;
    }
    .prediction-page-body .prediction-card .goals-market {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }
}

@media (max-width: 600px) {
    .prediction-page-body .fixture-main {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto auto !important;
        min-height: 0 !important;
        padding: 34px 14px 16px !important;
    }
    .prediction-page-body .fixture-match-date {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        margin: 0 !important;
    }
    .prediction-page-body #home-name,
    .prediction-page-body #away-name,
    .prediction-page-body .fixture-match-title {
        grid-row: 2 !important;
    }
    .prediction-page-body .home-team,
    .prediction-page-body .away-team,
    .prediction-page-body .fixture-center { grid-row: 2 !important; }
    .prediction-page-body .home-team { grid-column: 1 !important; }
    .prediction-page-body .fixture-center { grid-column: 2 !important; }
    .prediction-page-body .away-team { grid-column: 3 !important; }
}

/* Header layout and navigation rules are centralized in header-consistency.css. */

/* Historical prediction results in the homepage hero */
.hero-panel { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.hero-stats { display: grid; grid-template-columns: repeat(4, minmax(88px, 1fr)); gap: 10px; flex: 0 1 580px; }
.hero-stat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 78px; padding: 10px 8px; background: var(--theme-card); border: 1px solid var(--theme-line); border-radius: 12px; text-align: center; }
.hero-stat strong { color: var(--theme-green-dark); font-size: clamp(18px, 2vw, 27px); line-height: 1.1; font-variant-numeric: tabular-nums; }
.hero-stat span { color: var(--theme-muted); font-size: 12px; font-weight: 700; }
.hero-stat-won strong, .hero-stat-rate strong { color: #16834d; }
.hero-stat-lost strong { color: #c54343; }
@media (max-width: 900px) { .hero-panel { flex-direction: column; align-items: stretch; } .hero-stats { flex: none; width: 100%; } }
@media (max-width: 520px) { .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .hero-stat { min-height: 65px; } }

/* Stacked homepage hero: heading first, four premium statistic tiles below. */
.hero-panel.hero-panel-stats {
    display: flex; flex-direction: column; align-items: stretch; justify-content: center;
    gap: 20px; padding: clamp(20px, 3vw, 34px);
    background: linear-gradient(120deg, #ecfaf6 0%, #e5f5f5 55%, #f7fbef 100%);
}
.hero-panel-stats .hero-copy { width: 100%; }
.hero-panel-stats #hero-title { margin: 0; font-size: clamp(23px, 3vw, 36px); line-height: 1.2; letter-spacing: -.65px; }
.hero-panel-stats .hero-stats {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%; max-width: none; flex: none; gap: 14px;
}
.hero-panel-stats .hero-stat {
    position: relative; min-height: 104px; padding: 18px 12px; gap: 10px;
    background: #fff; border: 1px solid #d6e9e4; border-radius: 15px;
    box-shadow: 0 6px 18px rgba(9, 64, 56, .07);
}
.hero-panel-stats .hero-stat strong { font-size: clamp(24px, 3vw, 37px); font-weight: 800; letter-spacing: -.8px; }
.hero-panel-stats .hero-stat span { font-size: 12px; text-transform: uppercase; letter-spacing: .8px; }
.hero-panel-stats .hero-stat-won { border-top: 4px solid #198754; }
.hero-panel-stats .hero-stat-lost { border-top: 4px solid #d9534f; }
.hero-panel-stats .hero-stat-rate { border-top: 4px solid #e5b600; }
.hero-panel-stats .hero-stat:first-child { border-top: 4px solid #116c60; }
:root[data-theme="dark"] .hero-panel.hero-panel-stats { background: linear-gradient(120deg, #173e3c, #153633) !important; }
:root[data-theme="dark"] .hero-panel-stats .hero-stat { background: var(--theme-card); border-color: var(--theme-line); }
@media (max-width: 650px) {
    .hero-panel-stats .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .hero-panel-stats .hero-stat { min-height: 88px; padding: 14px 8px; }
    .hero-panel-stats .hero-ball { width: 46px; height: 46px; font-size: 27px; }
}

/* Compact hero: approximately half the previous vertical footprint. */
.hero-panel.hero-panel-stats {
    min-height: 0; gap: 9px; padding: 12px 18px;
}
.hero-panel-stats .hero-copy { gap: 10px; }
.hero-panel-stats .hero-ball { width: 34px; height: 34px; font-size: 21px; border-radius: 9px; }
.hero-panel-stats #hero-title { font-size: clamp(17px, 2.2vw, 25px); line-height: 1.12; }
.hero-panel-stats .hero-stats { gap: 9px; }
.hero-panel-stats .hero-stat {
    min-height: 52px; padding: 7px 9px; gap: 3px;
    border-radius: 10px; box-shadow: 0 3px 9px rgba(9,64,56,.05);
}
.hero-panel-stats .hero-stat strong { font-size: clamp(17px, 2.2vw, 25px); line-height: 1; }
.hero-panel-stats .hero-stat span { font-size: 10px; letter-spacing: .45px; line-height: 1.1; }
.hero-panel-stats .hero-stat:first-child,
.hero-panel-stats .hero-stat-won,
.hero-panel-stats .hero-stat-lost,
.hero-panel-stats .hero-stat-rate { border-top-width: 3px; }
@media (max-width: 650px) {
    .hero-panel.hero-panel-stats { gap: 8px; padding: 10px 12px; }
    .hero-panel-stats .hero-stats { gap: 7px; }
    .hero-panel-stats .hero-stat { min-height: 46px; padding: 6px; }
    .hero-panel-stats .hero-stat strong { font-size: 19px; }
    .hero-panel-stats .hero-stat span { font-size: 9px; }
    .hero-panel-stats .hero-ball { width: 30px; height: 30px; font-size: 18px; }
}

/* header-consistency.css */
/* Single source of truth for the shared logo and primary navigation.
   All icons are inline in _site_header.html, never dependent on JavaScript. */
.site-header { position: relative !important; height: 165px !important; }
.site-header .header-inner { height: 82px !important; padding: 0 25px !important; align-items: center !important; }
.site-header .logo-container {
  display: flex !important; align-items: center !important; justify-content: flex-start !important;
  gap: 12px !important; width: auto !important; max-width: calc(100% - 20px) !important;
  height: 82px !important; text-decoration: none !important; overflow: visible !important;
}
.site-header .logo-container::before, .site-header .logo-container::after { display: none !important; content: none !important; }
.site-header .logo-container .logo-ball {
  display: grid !important; place-items: center !important;
  width: 52px !important; height: 52px !important; min-width: 52px !important; min-height: 52px !important; flex: 0 0 52px !important; aspect-ratio: 1 / 1 !important; border-radius: 50% !important; box-sizing: border-box !important;
  border: 3px solid var(--theme-yellow, #ffc400) !important; border-radius: 50% !important;
  background: #f8faf9 !important; color: #183c4d !important;
  font-size: 27px !important; line-height: 1 !important;
}
.site-header .logo-container .logo-word {
  display: inline-flex !important; align-items: baseline !important; flex-wrap: nowrap !important;
  color: #fff !important; font-size: clamp(20px, 4vw, 32px) !important;
  font-weight: 900 !important; line-height: 1.1 !important; letter-spacing: -1px !important;
  white-space: nowrap !important;
}
.site-header .logo-container .logo-word > span { color: #fff !important; }
.site-header .logo-container .logo-word > b { color: var(--theme-yellow, #ffc400) !important; font-weight: 900 !important; white-space: pre !important; }
.site-header .main-nav {
  display: grid !important; position: absolute !important; top: 82px !important; left: 0 !important;
  width: 100% !important; height: 83px !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  grid-template-rows: 1fr !important; grid-auto-flow: row !important; gap: 0 !important;
  align-items: stretch !important; background: #fff !important;
}
.site-header .main-nav > .nav-home { grid-column: 1 !important; grid-row: 1 !important; }
.site-header .main-nav > .nav-super-tips { grid-column: 2 !important; grid-row: 1 !important; }
.site-header .main-nav > .prediction-menu { grid-column: 3 !important; grid-row: 1 !important; }
.site-header .main-nav > .nav-telegram { grid-column: 4 !important; grid-row: 1 !important; }
.site-header .main-nav > .country-menu { grid-column: 5 !important; grid-row: 1 !important; }
.site-header .main-nav > .favorites-button { grid-column: 6 !important; grid-row: 1 !important; }
.site-header .main-nav > .nav-about, .site-header .main-nav > .nav-contact { display: none !important; }
.site-header .main-nav > .prediction-menu, .site-header .main-nav > .country-menu {
  display: flex !important; align-items: stretch !important; min-width: 0 !important;
}
.site-header .main-nav .nav-link,
.site-header .main-nav .country-menu-toggle,
.site-header .main-nav .favorites-button {
  display: flex !important; flex-direction: column !important; justify-content: center !important;
  align-items: center !important; text-align: center !important; gap: 5px !important;
  width: 100% !important; height: 83px !important; min-height: 83px !important;
  min-width: 0 !important; padding: 6px 2px !important;
  color: #294e6f !important; background: transparent !important;
  font-size: 10px !important; line-height: 1.2 !important; font-weight: 800 !important;
  white-space: normal !important;
}
.site-header .main-nav .nav-icon {
  display: block !important; width: 25px !important; height: 25px !important;
  flex: 0 0 25px !important; fill: none !important;
  stroke: var(--theme-green, #087560) !important; stroke-width: 2 !important;
  visibility: visible !important; opacity: 1 !important;
}
.site-header .main-nav .super-tips-icon {
  display: block !important; height: 25px !important; font-size: 23px !important; line-height: 25px !important;
}
.site-header .main-nav .super-tips-label { display: block !important; font-size: inherit !important; color: inherit !important; }
.site-header .main-nav .nav-link:hover, .site-header .main-nav .country-menu-toggle:hover,
.site-header .main-nav .favorites-button:hover { background: #f5fbfa !important; color: var(--theme-green, #087560) !important; }
.site-header .main-nav .nav-link.active, .site-header .main-nav .nav-link.active .super-tips-label {
  color: var(--theme-green, #087560) !important;
}
.site-header .main-nav .nav-link.active::after {
  content: "" !important; position: absolute !important; bottom: 0 !important;
  left: 22% !important; right: 22% !important; height: 4px !important;
  background: var(--theme-green, #087560) !important;
}
@media (max-width: 560px) {
  .site-header { height: 149px !important; }
  .site-header .header-inner { height: 74px !important; padding: 0 12px !important; }
  .site-header .logo-container { height: 74px !important; gap: 8px !important; }
  .site-header .logo-container .logo-ball { width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; flex-basis: 42px !important; aspect-ratio: 1 / 1 !important; font-size: 22px !important; }
  .site-header .logo-container .logo-word { font-size: clamp(14px, 4.5vw, 25px) !important; letter-spacing: -0.7px !important; flex-wrap: nowrap !important; white-space: nowrap !important; }
  .site-header .logo-container .logo-word > span, .site-header .logo-container .logo-word > b { white-space: nowrap !important; }
  .site-header .main-nav { top: 74px !important; height: 75px !important; }
  .site-header .main-nav .nav-link, .site-header .main-nav .country-menu-toggle,
  .site-header .main-nav .favorites-button { height: 75px !important; min-height: 75px !important; font-size: 8px !important; gap: 4px !important; }
  .site-header .main-nav .nav-icon { width: 20px !important; height: 20px !important; flex-basis: 20px !important; }
  .site-header .main-nav .super-tips-icon { height: 20px !important; line-height: 20px !important; font-size: 18px !important; }
}

/* Mobile: keep the desktop brand lockup on one row; wrap only tab labels. */
@media (max-width: 560px) {
  .site-header .header-inner .logo-container {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
  }
  .site-header .logo-container .logo-ball { flex-shrink: 0 !important; aspect-ratio: 1 / 1 !important; border-radius: 50% !important; }
  .site-header .logo-container .logo-word {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: baseline !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }
  .site-header .main-nav { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; align-items: stretch !important; }
  .site-header .main-nav .nav-link,
  .site-header .main-nav .country-menu-toggle,
  .site-header .main-nav .favorites-button {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 8px 1px 4px !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    white-space: normal !important;
  }
  .site-header .main-nav .nav-icon,
  .site-header .main-nav .super-tips-icon {
    flex-shrink: 0 !important;
    align-self: center !important;
  }
  .site-header .main-nav .nav-link > span:not(.super-tips-icon),
  .site-header .main-nav .country-menu-toggle > span,
  .site-header .main-nav .favorites-button > span,
  .site-header .main-nav .super-tips-label {
    display: block !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    line-height: 1.15 !important;
  }
}

/* Match the footer FreeSureBets wordmark: same font weight, gradient and clipping. */
.site-header .logo-container .logo-word {
  display: inline-block !important;
  flex: 0 1 auto !important;
  font-size: clamp(20px, 4vw, 32px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: normal !important;
  white-space: nowrap !important;
  background: linear-gradient(90deg, #fff 0 67%, var(--theme-yellow, #ffc400) 67% 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.site-header .logo-container .logo-word > span,
.site-header .logo-container .logo-word > b {
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  -webkit-text-fill-color: transparent !important;
}
@media (max-width: 560px) {
  .site-header .logo-container .logo-word {
    font-size: clamp(14px, 4.5vw, 25px) !important;
    white-space: nowrap !important;
  }
}

/* Match footer wordmark font size exactly on all viewport widths. */
.site-header .logo-container .logo-word {
  font-size: 25px !important;
}
@media (max-width: 560px) {
  .site-header .logo-container .logo-word {
    font-size: 25px !important;
    letter-spacing: normal !important;
  }
}

/* Use the exact 25px footer wordmark size at every viewport width. */
.site-header .logo-container .logo-word {
  font-size: 25px !important;
}
@media (max-width: 560px) {
  .site-header .logo-container .logo-word {
    font-size: 25px !important;
  }
}

/* Mobile Telegram tab: show only the uppercase label, not the smaller duplicate. */
@media (max-width: 560px) {
  .site-header .main-nav .nav-telegram .telegram-desktop-label {
    display: none !important;
  }
  .site-header .main-nav .nav-telegram .telegram-mobile-label {
    display: block !important;
  }
}

/* Android download stays at the right edge of the green brand row. */
.site-header .header-inner { gap: 8px !important; }
.site-header .header-actions {
  display: flex !important;
  margin-left: auto !important;
  width: auto !important;
  flex-shrink: 0;
}
.site-header .app-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 8px;
  background: var(--theme-yellow, #ffc400);
  color: #004f45;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.site-header .app-download:hover { background: #ffdb59; }
.site-header .app-download:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.site-header .app-download svg { width: 20px; height: 20px; flex-shrink: 0; }
.site-header .app-download-mobile-label { display: none; }
@media (max-width: 560px) {
  .site-header .app-download { flex-direction: column; gap: 1px; min-width: 44px; padding: 3px 5px; font-size: 10px; }
  .site-header .app-download-label { display: none; }
  .site-header .app-download-mobile-label { display: inline; }
}
@media (max-width: 360px) {
  .site-header .logo-container .logo-word { font-size: 21px !important; }
}

/* sketch-match-card.css */
/* Homepage match cards and Super Tips. Loaded after theme.css; keep component styles scoped. */
.sketch-match-card {
  display:grid; grid-template-columns: 1fr 1fr; min-height:260px;
  margin:0 0 14px; overflow:hidden; border:1px solid #d5e4df;
  border-radius:18px; background:#fff; box-shadow:0 8px 24px rgba(8,45,32,.08);
  color:#063b2b;
}
.sketch-match-left {min-width:0; border-right:1px solid #dbe5e2;}
.sketch-league {display:flex; align-items:center; gap:12px; padding:15px 20px; min-height:62px;
  background:#f1f8f4; font-size:17px; font-weight:800;}
.sketch-league a {color:#61777a; font-weight:600; text-decoration:none;}
.sketch-dot {color:#84999a;}
.sketch-flag {width:34px;height:25px;object-fit:contain;}
.sketch-fixture {display:grid;grid-template-columns:minmax(0,1fr) minmax(110px,1fr) minmax(0,1fr);
  align-items:center; gap:6px; padding:18px 14px; min-height:196px;}
.sketch-team {min-width:0;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;}
.sketch-team a {font-size:19px;font-weight:800;color:#063b2b;text-decoration:none;overflow-wrap:anywhere;}
.sketch-team-logo,.sketch-team-logo-placeholder {width:86px;height:86px;object-fit:contain;}
.sketch-team-logo-placeholder {display:grid;place-items:center;font-size:38px;}
.sketch-kickoff {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  border-left:1px solid #dbe5e2;border-right:1px solid #dbe5e2;min-height:120px;text-align:center;}
.sketch-kickoff span {font-size:15px;color:#697f81;font-weight:700;}
.sketch-kickoff strong {font-size:35px;line-height:1.1;font-weight:900;color:#065c35;}
.sketch-kickoff small {font-size:11px;color:#697f81;}
.sketch-match-right {position:relative;min-width:0;display:flex;flex-direction:column;justify-content:center;
  gap:16px;padding:28px 20px 18px;background:#f8fbf9;}
.sketch-stats {display:grid;grid-template-columns:1.25fr 1fr .9fr;gap:9px;}
.sketch-stat {min-width:0;min-height:126px;padding:14px 10px;border-radius:13px;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;}
.sketch-stat span {font-size:12px;font-weight:800;letter-spacing:.05em;color:#637777;}
.sketch-stat strong {font-size:clamp(21px,2.1vw,34px);line-height:1.15;font-weight:900;
  color:#06402b;overflow-wrap:anywhere;}
.sketch-tip {background:#eaf6ee;}
.sketch-confidence {background:#fff8e6;}
.sketch-score {background:#eaf4fc;}
.sketch-view-prediction {display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:36px;padding:8px 12px;border:0;border-radius:14px;
  background:linear-gradient(100deg,#e9f8f5,#e3f6f1);color:#08614f;
  text-decoration:none;text-transform:uppercase;font-size:13px;font-weight:800;box-shadow:none;}
.sketch-view-prediction span {display:none;}
.sketch-view-prediction:hover,.sketch-view-prediction:focus-visible {background:#d5efe7;color:#065c35;}
.sketch-view-unavailable {text-align:center;color:#697f81;padding:20px;}
.sketch-favorite {position:absolute;top:4px;right:5px;transform:scale(.8);}
@media(max-width:900px) {
  .sketch-match-card {grid-template-columns:1fr;}
  .sketch-match-left {border-right:0;border-bottom:1px solid #dbe5e2;}
  .sketch-match-right {padding:18px 14px;}
}
/* Super Tips first navigation item and pre-publication preview. */
.main-nav .nav-super-tips {display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 16px;border-radius:10px;background:#065c35;color:#fff !important;font-weight:800;text-decoration:none;}
.main-nav .nav-super-tips span {font-size:19px;}
.day-tabs .super-tips-day-tab {display:flex;align-items:center;justify-content:center;gap:10px;
  background:#065c35 !important;color:#fff !important;border-radius:10px;padding:12px 18px;}
.day-tabs .super-tips-day-tab strong {color:#fff !important;}
.super-tips-preview-notice {padding:44px 24px;text-align:center;background:#fff;border:1px solid #d5e4df;
  border-radius:18px;box-shadow:0 8px 24px rgba(8,45,32,.08);}
.super-tips-stats {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 18px;
  padding:12px;background:#f8fbf9;border:1px solid #d5e4df;border-radius:18px;box-shadow:0 8px 24px rgba(8,45,32,.08);}
.super-tips-stat {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  min-height:78px;padding:10px 8px;background:#fff;border:1px solid #d5e4df;border-radius:12px;text-align:center;}
.super-tips-stat strong {color:#065c35;font-size:clamp(18px,2vw,27px);line-height:1.1;font-variant-numeric:tabular-nums;}
.super-tips-stat span {color:#61777a;font-size:12px;font-weight:800;}
.super-tips-stat-won strong,.super-tips-stat-rate strong {color:#16834d;}
.super-tips-stat-lost strong {color:#c54343;}
.super-tips-preview-icon {font-size:42px;}
.super-tips-preview-notice h2 {font-size:28px;color:#065c35;margin:10px 0;}
.super-tips-preview-notice p {max-width:570px;margin:12px auto;color:#526e66;line-height:1.55;}
.super-tips-all-link {display:inline-block;margin-top:18px;padding:14px 24px;border-radius:10px;
  background:#f1b51c;color:#102d21 !important;text-decoration:none;font-weight:800;}

@media(max-width:480px) {
  .super-tips-stats {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:8px;margin-bottom:12px;}
  .super-tips-stat {min-height:68px;padding:8px 5px;}
  .super-tips-stat span {font-size:10px;}
}

/* Compact match cards: approximately half the previous desktop height. */
@media (min-width: 901px) {
  .sketch-match-card { min-height: 130px; }
  .sketch-league { min-height: 30px; padding: 5px 12px; gap: 7px; font-size: 12px; }
  .sketch-flag { width: 34px; height: 25px; }
  .sketch-fixture { min-height: 100px; padding: 7px 10px; gap: 5px; grid-template-columns: minmax(0,1fr) minmax(85px,.85fr) minmax(0,1fr); }
  .sketch-team { gap: 4px; }
  .sketch-team-logo,.sketch-team-logo-placeholder { width: 44px; height: 44px; }
  .sketch-team-logo-placeholder { font-size: 24px; }
  .sketch-team a { font-size: 13px; line-height: 1.15; }
  .sketch-kickoff { min-height: 70px; gap: 3px; }
  .sketch-kickoff span { font-size: 11px; }
  .sketch-kickoff strong { font-size: 23px; }
  .sketch-kickoff small { font-size: 9px; }
  .sketch-match-right { padding: 10px 12px 8px; gap: 8px; }
  .sketch-stats { gap: 6px; }
  .sketch-stat { min-height: 62px; padding: 6px 5px; gap: 4px; border-radius: 8px; }
  .sketch-stat span { font-size: 9px; letter-spacing: 0; }
  .sketch-stat strong { font-size: clamp(13px, 1.35vw, 20px); line-height: 1.1; }
  .sketch-view-prediction { min-height: 36px; font-size: 13px; }
  
  .sketch-favorite { top: 0; right: 1px; transform: scale(.65); }
}

/* Compact, legible match cards on phones and tablets as well as desktop. */
@media (max-width: 900px) {
  .sketch-match-card { min-height: 0; margin-bottom: 10px; border-radius: 12px; }
  .sketch-league { min-height: 30px; padding: 6px 10px; gap: 7px; font-size: 12px; line-height: 1.2; }
  .sketch-flag { width: 34px; height: 25px; }
  .sketch-fixture { min-height: 92px; padding: 8px 10px; gap: 5px; grid-template-columns: minmax(0,1fr) minmax(74px,.75fr) minmax(0,1fr); }
  .sketch-team { gap: 4px; }
  .sketch-team-logo,.sketch-team-logo-placeholder { width: 42px; height: 42px; }
  .sketch-team-logo-placeholder { font-size: 22px; }
  .sketch-team a { font-size: 12px; line-height: 1.2; }
  .sketch-kickoff { min-height: 64px; gap: 3px; }
  .sketch-kickoff span { font-size: 10px; }
  .sketch-kickoff strong { font-size: 21px; }
  .sketch-kickoff small { font-size: 9px; }
  .sketch-match-right { padding: 8px 10px 10px; gap: 7px; }
  .sketch-stats { gap: 6px; }
  .sketch-stat { min-height: 60px; padding: 6px 4px; gap: 4px; border-radius: 8px; }
  .sketch-stat span { font-size: 9px; letter-spacing: 0; }
  .sketch-stat strong { font-size: clamp(13px, 3.5vw, 18px); line-height: 1.15; }
  .sketch-view-prediction { min-height: 38px; font-size: 13px; }
  
  .sketch-favorite { top: 0; right: 1px; transform: scale(.65); }
}
@media (max-width: 360px) {
  .sketch-fixture { grid-template-columns: minmax(0,1fr) 68px minmax(0,1fr); padding-inline: 6px; }
  .sketch-team-logo,.sketch-team-logo-placeholder { width: 36px; height: 36px; }
  .sketch-team a { font-size: 11px; }
  .sketch-stat strong { font-size: 12px; }
}

/* Live score and provider-reported match minute beneath the scheduled kickoff. */
.sketch-kickoff .sketch-live-score {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 3px; padding: 3px 7px; border-radius: 7px;
  background: #e6f6ee; white-space: nowrap;
}
.sketch-kickoff .sketch-live-score[hidden] { display: none; }
.sketch-kickoff .sketch-live-scoreline { color: #065c35; font-size: 15px; font-weight: 900; }
.sketch-kickoff .sketch-live-minute { color: #c52c26; font-size: 11px; font-weight: 800; }
@media (max-width: 900px) {
  .sketch-kickoff .sketch-live-score { gap: 5px; padding: 3px 5px; }
  .sketch-kickoff .sketch-live-scoreline { font-size: 13px; }
  .sketch-kickoff .sketch-live-minute { font-size: 10px; }
}

/* Date and kickoff time use identical typography at every viewport width. */
.sketch-match-card .sketch-kickoff > strong,
.sketch-match-card .sketch-kickoff > a > time > strong,
.sketch-match-card .sketch-kickoff > time > strong {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: 700 !important;
  line-height: inherit !important;
  color: #697f81 !important;
}
.sketch-match-card .sketch-kickoff > a > time > span,
.sketch-match-card .sketch-kickoff > time > span {
  font-size: inherit !important;
  font-weight: 700 !important;
  line-height: inherit !important;
}
.sketch-match-card .sketch-kickoff {
  font-size: 11px;
  line-height: 1.3;
}
@media (max-width: 900px) {
  .sketch-match-card .sketch-kickoff { font-size: 10px; }
}

/* Published Super Tips editions — newest UTC date first. */
.super-tips-edition { margin: 0 0 18px; padding: 15px; border: 1px solid #d5e4df; border-radius: 14px; background: #fff; }
.super-tips-edition h2 { margin: 0 0 5px; color: #065c35; font-size: 20px; }
.super-tips-edition-note { margin: 0 0 12px; color: #61777a; font-size: 12px; }
.super-tips-picks { display: grid; gap: 14px; }
.super-tips-edition .sketch-match-card { margin-bottom: 0; }
@media (max-width: 700px) {
  .super-tips-edition { padding: 10px; }
  .super-tips-edition h2 { font-size: 16px; }
}

/* Strong settled-result highlighting; neutral until a supported tip resolves. */
.sketch-match-card .sketch-stat.sketch-score.sketch-score-won {
  background: #dcfce7 !important;
  border: 2px solid #16a34a !important;
  box-shadow: inset 0 0 0 1px #bbf7d0;
}
.sketch-match-card .sketch-stat.sketch-score.sketch-score-won span,
.sketch-match-card .sketch-stat.sketch-score.sketch-score-won strong {
  color: #166534 !important;
}
.sketch-match-card .sketch-stat.sketch-score.sketch-score-lost {
  background: #fee2e2 !important;
  border: 2px solid #dc2626 !important;
  box-shadow: inset 0 0 0 1px #fecaca;
}
.sketch-match-card .sketch-stat.sketch-score.sketch-score-lost span,
.sketch-match-card .sketch-stat.sketch-score.sketch-score-lost strong {
  color: #991b1b !important;
}

/* Prevent long API-Football tip descriptions from widening match-card columns. */
.sketch-match-card .sketch-stats { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .9fr); min-width: 0; }
.sketch-match-card .sketch-tip { min-width: 0; overflow: hidden; }
.sketch-match-card .sketch-tip strong {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  line-clamp: 3; overflow: hidden; max-width: 100%;
  overflow-wrap: anywhere; word-break: normal; hyphens: auto;
  font-size: clamp(10px, 1vw, 13px); line-height: 1.18;
}
.sketch-match-card .sketch-view-prediction {
  position: relative; z-index: 2; pointer-events: auto;
  flex: 0 0 auto; box-sizing: border-box;
}
@media (max-width: 900px) {
  .sketch-match-card .sketch-tip strong { font-size: 12px; }
}

/* page-shell.css */
/* Global page shell: keep main and prediction pages on the same 968px width.
   Applied after theme.css and all page-specific styles. */
:root { --fsb-shell-width: 968px; }
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
html, body { width: 100%; max-width: 100%; }
.site-header,
.site-footer,
main.page-container,
main:has(> .content-grid),
body > main {
  width: min(100%, var(--fsb-shell-width)) !important;
  max-width: var(--fsb-shell-width) !important;
  min-width: 0 !important;
  margin-inline: auto !important;
}
body > main,
main.page-container {
  padding-inline: 0 !important;
}
.site-header,
.site-footer { padding-inline: 0 !important; }
body > main > article,
main.page-container > article,
main.page-container > section,
main.page-container > .content-grid,
body > main > .content-grid,
.content-grid,
.matches-section,
.profile-content-column,
.profile-layout,
#prediction-seo-content,
#prediction-seo-content > article,
.match-list,
.sketch-ssr-list,
.sketch-match-card,
.match-card,
.fixture-card {
  max-width: 100% !important;
  min-width: 0 !important;
}
body > main > article,
main.page-container > article,
main.page-container > .content-grid,
body > main > .content-grid { width: 100% !important; }
.content-grid { width: 100% !important; }
.sketch-ssr-list { width: 100% !important; }
.sketch-ssr-list > .sketch-match-card { width: 100% !important; }
#prediction-seo-content img,
.profile-layout img { max-width: 100%; }
#prediction-seo-content table { max-width: 100%; }
#prediction-seo-content { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .site-header,
  .site-footer,
  body > main { width: 100% !important; }
  .sketch-match-card { min-width: 0 !important; }
}

/* Crawlable prediction listing pagination, consistent on mobile and desktop. */
.ssr-match-pagination { margin: 20px 0 24px; text-align: center; }
.ssr-match-pagination p { margin: 0 0 10px; font-size: 12px; color: #61777a; }
.ssr-pagination-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.ssr-pagination-links a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; min-height: 38px; padding: 7px 11px;
  border: 1px solid #d5e4df; border-radius: 8px; background: #fff;
  color: #065c35; text-decoration: none; font-size: 13px; font-weight: 800;
}
.ssr-pagination-links a[aria-current="page"] { background: #065c35; color: #fff; border-color: #065c35; }
.ssr-pagination-links a:hover { border-color: #065c35; }

/* SSR daily and market listings: exactly one complete match card per row. */
main.page-container .match-list.sketch-ssr-list {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
}
main.page-container .match-list.sketch-ssr-list > article.sketch-match-card {
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  grid-column: 1 / -1 !important;
  box-sizing: border-box !important;
}
@media (max-width: 900px) {
  main.page-container .match-list.sketch-ssr-list > article.sketch-match-card {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Browse pages load SEO article defaults; don't let them pad the shared Today card. */
main.page-container .match-list.sketch-ssr-list > article.sketch-match-card {
  padding: 0 !important;
  color: #063b2b;
}

/* listing-spacing.css */
/* Match the Super Tips article inset without adding padding to match cards. */
.seo-listing-page {
  --listing-content-inset: 24px;
}
.seo-listing-page > article,
.seo-listing-page .matches-section:not(.profile-content-column),
.seo-listing-page .profile-layout {
  box-sizing: border-box;
  padding: var(--listing-content-inset);
}
.seo-listing-page .seo-intro,
.seo-listing-page .seo-market-explainer,
.seo-listing-page .seo-summary {
  max-width: 90ch;
  line-height: 1.7;
}
.seo-listing-page .seo-intro,
.seo-listing-page .seo-market-explainer {
  margin-block: 16px;
}
.seo-listing-page .seo-summary {
  margin-block: 24px;
}
.seo-listing-page .seo-summary > h2 {
  margin-block: 2rem .83em;
}
.seo-listing-page .seo-summary > p {
  margin-block: 1em;
}
.seo-listing-page nav[aria-label="Football predictions navigation"] {
  margin-block: 16px;
  line-height: 1.7;
}
@media (max-width: 620px) {
  .seo-listing-page { --listing-content-inset: 16px; }
}

.stats-methodology { margin: 10px 0; font-size: 13px; line-height: 1.5; }
.stats-methodology summary { cursor: pointer; color: var(--theme-muted, #45699a); }
@media (max-width: 620px) {
  .seo-listing-page .day-tabs { gap: 6px; margin-block: 12px; }
  .seo-listing-page .section-heading { margin-bottom: 12px; }
  .seo-listing-page .section-heading h2 { font-size: 21px; line-height: 1.25; }
  .seo-listing-page nav[aria-label="Football predictions navigation"] { font-size: 13px; margin-block: 10px; }
}