/* =========================================================
   H2HFACTS MATCH PAGE CSS - ONLY ACTIVE CLASSES
   Use this for resources/views/match.blade.php + partials/match/summary.blade.php
   Everything old/unneeded is removed/commented in the other file.
========================================================= */

:root {
    --h2h-green: #23ff55;
    --h2h-green-2: #12b62d;
    --h2h-bg: #050806;
    --h2h-card: #07140c;
    --h2h-border: rgba(60, 255, 80, .24);
    --h2h-border-soft: rgba(60, 255, 80, .13);
    --h2h-text: #f7fff6;
    --h2h-muted: rgba(232,255,236,.68);
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
    background: var(--h2h-bg) !important;
}

.modern-match-page::before,
.modern-match-page::after {
    display: none !important;
}

/* ===== Extracted from match.blade inline style ===== */
.h2h-match-layout {
            grid-template-columns: 270px minmax(0, 1fr) 300px;
            gap: 18px;
            align-items: start;
        }

        .h2h-match-main {
            min-width: 0;
        }

        .modern-match-page {
            display: grid;
            gap: 14px;
        }

        .match-pro-hero {
            position: relative;
            overflow: hidden;
            border-radius: 18px;
            padding: 22px;
            border: 1px solid rgba(55, 255, 95, .28);
            background:
                radial-gradient(circle at 18% 20%, rgba(49, 255, 89, .16), transparent 28%),
                radial-gradient(circle at 82% 18%, rgba(49, 255, 89, .13), transparent 28%),
                linear-gradient(180deg, rgba(8, 36, 17, .96), rgba(3, 13, 8, .97));
            box-shadow: 0 18px 50px rgba(0,0,0,.30), inset 0 0 0 1px rgba(255,255,255,.03);
        }

        .match-pro-breadcrumbs {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            color: rgba(232,255,235,.62);
            font-size: 11px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: .08em;
            margin-bottom: 10px;
        }

        .match-pro-league-pill {
            width: max-content;
            max-width: 80%;
            margin: 0 auto 14px;
            padding: 8px 46px;
            border-radius: 8px;
            background: linear-gradient(180deg, #5bf53d, #23a71e);
            color: #071006;
            font-size: 13px;
            font-weight: 1000;
            text-transform: uppercase;
            text-align: center;
            box-shadow: 0 0 26px rgba(54,255,81,.24);
        }

        .match-pro-hero-main {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 190px minmax(0, 1fr);
            align-items: center;
            gap: 22px;
        }

        .match-pro-team {
            display: grid;
            place-items: center;
            gap: 12px;
            text-align: center;
            min-width: 0;
        }

        .match-pro-team-logo {
            width: 104px;
            height: 76px;
            object-fit: contain;
            filter: drop-shadow(0 12px 20px rgba(0,0,0,.35));
        }

        .match-pro-team h1 {
            margin: 0;
            color: #fff;
            font-size: 23px;
            line-height: 1.1;
            font-weight: 1000;
            text-transform: uppercase;
        }

        .match-pro-center {
            display: grid;
            justify-items: center;
            gap: 8px;
            text-align: center;
        }

        /* Center date in match hero */
.match-pro-date {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    margin: 10px 0 14px !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
}

.match-pro-date .js-local-kickoff,
.match-pro-date .js-kickoff-date {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: auto !important;
}

/* optional: keep league pill and date nicely stacked */
.match-pro-league-pill {
    margin-left: auto !important;
    margin-right: auto !important;
}

.match-pro-hero {
    text-align: center;
}

        .match-pro-vs {
            width: 78px;
            height: 78px;
            display: grid;
            place-items: center;
            border-radius: 999px;
            border: 1px solid rgba(77,255,86,.23);
            background: radial-gradient(circle, rgba(55,255,68,.15), rgba(0,0,0,.16));
            color: #fff;
            font-size: 27px;
            font-weight: 1000;
            box-shadow: inset 0 0 30px rgba(66,255,70,.10);
        }

        .match-pro-scoreline {
            display: flex;
            align-items: center;
            gap: 10px;
            color: #fff;
            font-size: 36px;
            font-weight: 1000;
            line-height: 1;
        }

        .match-pro-time {
            color: #fff;
            font-size: 24px;
            font-weight: 1000;
        }

        .match-pro-tz,
        .match-pro-status {
            color: rgba(237,255,240,.62);
            font-size: 11px;
            font-weight: 900;
        }

        .match-pro-status.is-live {
            color: #23ff55;
            text-shadow: 0 0 12px rgba(35,255,85,.45);
        }

        .match-pro-venue {
            margin-top: 14px;
            text-align: center;
            color: rgba(237,255,240,.62);
            font-size: 12px;
            font-weight: 800;
        }

        .match-pro-stat-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 10px;
            margin: -22px 34px 0;
            position: relative;
            z-index: 2;
        }

        .match-pro-stat-card {
            min-height: 66px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 12px;
            border-radius: 12px;
            background: linear-gradient(180deg, rgba(14,50,24,.96), rgba(4,18,9,.98));
            border: 1px solid rgba(62,255,82,.32);
            box-shadow: 0 8px 25px rgba(0,0,0,.24);
        }

        .match-pro-stat-card i {
            width: 36px;
            height: 36px;
            display: grid;
            place-items: center;
            border-radius: 999px;
            background: rgba(55,255,85,.10);
            color: #4dff43;
            font-size: 16px;
        }

        .match-pro-stat-card span {
            display: block;
            color: rgba(238,255,240,.72);
            font-size: 10px;
            font-weight: 1000;
            text-transform: uppercase;
        }

        .match-pro-stat-card strong {
            display: block;
            color: #fff;
            font-size: 20px;
            font-weight: 1000;
            line-height: 1.05;
        }

        .match-pro-compare {
            margin-top: 12px;
            padding: 15px;
            border-radius: 16px;
            border: 1px solid rgba(255,255,255,.08);
            background: rgba(0,0,0,.18);
        }

        .match-pro-compare-grid {
            display: grid;
            grid-template-columns: 1fr 130px 1fr;
            align-items: center;
            gap: 16px;
        }

        .match-pro-compare-team {
            display: grid;
            gap: 9px;
        }

        .match-pro-compare-team h3 {
            margin: 0 0 4px;
            color: #fff;
            font-size: 13px;
            font-weight: 1000;
            text-align: center;
            text-transform: uppercase;
        }

        .match-pro-bar-row {
            display: grid;
            grid-template-columns: 145px 1fr;
            align-items: center;
            gap: 10px;
            color: rgba(238,255,240,.70);
            font-size: 12px;
            font-weight: 800;
        }

        .match-pro-bar-row.is-away {
            grid-template-columns: 1fr 145px;
        }

        .match-pro-bar {
            height: 8px;
            overflow: hidden;
            border-radius: 999px;
            background: rgba(255,255,255,.10);
        }

        .match-pro-bar i {
            display: block;
            height: 100%;
            width: var(--w, 40%);
            border-radius: inherit;
            background: linear-gradient(90deg, #52ff3d, #1e9b25);
        }

        .match-pro-bar.danger i {
            background: linear-gradient(90deg, #ff385b, #ad162f);
        }

        .match-pro-compare-center {
            display: grid;
            justify-items: center;
            gap: 7px;
            color: rgba(238,255,240,.75);
            font-size: 11px;
            font-weight: 1000;
            text-transform: uppercase;
        }

        .match-pro-compare-ball {
            width: 58px;
            height: 58px;
            display: grid;
            place-items: center;
            border-radius: 999px;
            background: radial-gradient(circle, rgba(76,255,62,.22), rgba(0,0,0,.20));
            border: 1px solid rgba(76,255,62,.22);
            color: #fff;
            font-size: 24px;
        }

        .match-subtabs.h2h-match-tabs {
            position: sticky;
            top: 74px;
            z-index: 20;
            padding: 8px;
            border-radius: 14px;
            border: 1px solid rgba(255,255,255,.08);
            background: rgba(8,14,11,.88);
            backdrop-filter: blur(10px);
        }

        .h2h-match-rightbar {
            position: sticky;
            top: 92px;
            display: grid;
            gap: 14px;
            min-width: 0;
        }

        .h2h-match-side-card {
            border-radius: 14px;
            padding: 15px;
            border: 1px solid rgba(61,255,80,.18);
            background: linear-gradient(180deg, rgba(8,31,15,.96), rgba(3,12,8,.98));
            box-shadow: 0 14px 38px rgba(0,0,0,.22);
        }

        .h2h-match-side-card h3 {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 0 0 12px;
            color: #56ff43;
            font-size: 14px;
            font-weight: 1000;
            text-transform: uppercase;
        }

        .h2h-side-list {
            display: grid;
            gap: 10px;
        }

        .h2h-side-list div {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 8px;
            padding-bottom: 9px;
            border-bottom: 1px solid rgba(255,255,255,.07);
            color: rgba(238,255,240,.72);
            font-size: 12px;
            font-weight: 800;
        }

        .h2h-side-list div:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

        .h2h-side-list strong {
            color: #fff;
            font-weight: 1000;
        }

        .h2h-side-form-team {
            margin-top: 10px;
        }

        .h2h-side-form-title {
            display: flex;
            align-items: center;
            gap: 7px;
            color: #fff;
            font-size: 12px;
            font-weight: 1000;
            margin-bottom: 8px;
        }

        .h2h-side-form-title img {
            width: 20px;
            height: 20px;
            object-fit: contain;
        }

        .h2h-side-form-badges {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }

        .h2h-side-form-badges span {
            width: 24px;
            height: 24px;
            display: grid;
            place-items: center;
            border-radius: 6px;
            color: #fff;
            font-size: 11px;
            font-weight: 1000;
            background: rgba(255,255,255,.10);
        }

        .h2h-side-form-badges .w { background: rgba(55,255,85,.25); color: #56ff43; }
        .h2h-side-form-badges .d { background: rgba(255,195,67,.20); color: #ffc44d; }
        .h2h-side-form-badges .l { background: rgba(255,72,94,.22); color: #ff6b7c; }



        /* STEP 2: closer to reference screenshot - compact centered dashboard */
        html,
        body {
            background: #050806 !important;
        }

        .h2h-dashboard-layout.h2h-match-layout {
            max-width: 1510px !important;
            margin: 0 auto !important;
            padding: 18px 14px 34px !important;
            grid-template-columns: 232px minmax(0, 1fr) 265px !important;
            gap: 16px !important;
            background: transparent !important;
        }

        .h2h-match-layout > .h2h-sidebar,
        .h2h-match-layout > aside:first-child {
            width: auto !important;
            max-width: 232px !important;
        }

        .h2h-match-main,
        .modern-match-page,
        .match-page {
            background: transparent !important;
            min-width: 0 !important;
        }

        .modern-match-page {
            gap: 11px !important;
        }

        .match-pro-hero {
            min-height: 190px !important;
            border-radius: 12px !important;
            padding: 14px 18px 22px !important;
            border-color: rgba(72,255,70,.23) !important;
            background:
                radial-gradient(circle at 12% 18%, rgba(54,255,74,.13), transparent 28%),
                radial-gradient(circle at 86% 18%, rgba(54,255,74,.10), transparent 30%),
                linear-gradient(180deg, rgba(7,23,13,.96), rgba(3,9,6,.98)) !important;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 16px 42px rgba(0,0,0,.22) !important;
        }

        .match-pro-breadcrumbs {
            margin-bottom: 7px !important;
            font-size: 10px !important;
            letter-spacing: .10em !important;
        }

        .match-pro-league-pill {
            margin-bottom: 10px !important;
            padding: 8px 46px !important;
            min-width: 150px !important;
            border-radius: 7px !important;
            font-size: 12px !important;
        }

        .match-pro-hero-main {
            grid-template-columns: minmax(0, 1fr) 148px minmax(0, 1fr) !important;
            gap: 18px !important;
        }

        .match-pro-team {
            gap: 10px !important;
        }

        .match-pro-team-logo {
            width: 88px !important;
            height: 68px !important;
            object-fit: contain !important;
        }

        .match-pro-team h1 {
            font-size: 22px !important;
            line-height: 1.05 !important;
            letter-spacing: .01em !important;
        }

        .match-pro-center {
            gap: 6px !important;
        }

        .match-pro-date {
            font-size: 11px !important;
            letter-spacing: .08em !important;
        }

        .match-pro-vs {
            width: 64px !important;
            height: 64px !important;
            font-size: 24px !important;
        }

        .match-pro-time {
            font-size: 22px !important;
        }

        .match-pro-status,
        .match-pro-tz {
            font-size: 10px !important;
        }

        .match-pro-venue {
            margin-top: 9px !important;
            font-size: 11px !important;
        }

        .match-pro-stat-grid {
            margin: -8px 30px 0 !important;
            gap: 8px !important;
        }

        .match-pro-stat-card {
            min-height: 58px !important;
            border-radius: 10px !important;
            padding: 9px 12px !important;
            gap: 10px !important;
        }

        .match-pro-stat-card i {
            width: 31px !important;
            height: 31px !important;
            font-size: 14px !important;
        }

        .match-pro-stat-card span {
            font-size: 9px !important;
        }

        .match-pro-stat-card strong {
            font-size: 18px !important;
        }

        .match-pro-compare {
            margin-top: 10px !important;
            padding: 13px 15px !important;
            border-radius: 12px !important;
            background: rgba(7,11,10,.84) !important;
            border-color: rgba(255,255,255,.07) !important;
        }

        .match-pro-compare-grid {
            grid-template-columns: 1fr 112px 1fr !important;
            gap: 14px !important;
        }

        .match-pro-compare-team h3 {
            font-size: 12px !important;
        }

        .match-pro-bar-row {
            grid-template-columns: 138px 1fr !important;
            gap: 9px !important;
            font-size: 11px !important;
        }

        .match-pro-bar-row.is-away {
            grid-template-columns: 1fr 138px !important;
        }

        .match-pro-compare-ball {
            width: 48px !important;
            height: 48px !important;
            font-size: 21px !important;
        }

        .match-pro-compare-center {
            font-size: 10px !important;
        }

        .match-pro-facts-grid {
            gap: 9px !important;
        }

        .match-subtabs.h2h-match-tabs {
            position: relative !important;
            top: auto !important;
            padding: 7px !important;
            border-radius: 10px !important;
            background: rgba(12,17,16,.92) !important;
            border-color: rgba(76,255,80,.14) !important;
        }

        .match-subtab {
            min-height: 35px !important;
            border-radius: 8px !important;
            font-size: 12px !important;
            font-weight: 1000 !important;
        }

        .h2h-match-rightbar {
            top: 86px !important;
            gap: 10px !important;
            max-width: 265px !important;
        }

        .h2h-match-side-card {
            border-radius: 11px !important;
            padding: 13px !important;
            background: linear-gradient(180deg, rgba(6,23,12,.96), rgba(3,10,7,.98)) !important;
            border-color: rgba(77,255,80,.20) !important;
        }

        .h2h-match-side-card h3 {
            font-size: 13px !important;
            margin-bottom: 10px !important;
        }

        .h2h-side-list div {
            font-size: 11px !important;
            padding-bottom: 8px !important;
        }

        .h2h-side-form-badges span {
            width: 21px !important;
            height: 21px !important;
            border-radius: 5px !important;
            font-size: 10px !important;
        }

        .match-tab-content,
        .tab-pane.active {
            min-width: 0 !important;
        }

        @media (min-width: 1511px) {
            .h2h-dashboard-layout.h2h-match-layout {
                max-width: 1510px !important;
            }
        }

        @media (max-width: 1260px) {
            .h2h-match-layout {
                grid-template-columns: 250px minmax(0, 1fr);
            }
            .h2h-match-rightbar {
                display: none;
            }
        }

        @media (max-width: 900px) {
            .h2h-match-layout {
                display: block;
            }
            .match-pro-hero-main,
            .match-pro-compare-grid,
            .match-pro-stat-grid {
                grid-template-columns: 1fr;
                margin-left: 0;
                margin-right: 0;
            }
            .match-pro-league-pill {
                max-width: 100%;
                padding-inline: 18px;
            }
            .match-pro-team-logo {
                width: 76px;
                height: 62px;
            }
            .match-pro-team h1 {
                font-size: 18px;
            }
        }

        /* STEP 3: FULL SCREEN DASHBOARD LAYOUT - same width feeling as homepage */
        .h2h-dashboard-layout.h2h-match-layout {
            width: 100% !important;
            max-width: none !important;
            margin: 0 !important;
            padding: 20px 18px 42px !important;
            display: grid !important;
            grid-template-columns: 300px minmax(0, 1fr) 340px !important;
            gap: 20px !important;
            align-items: start !important;
            background:
                radial-gradient(circle at 22% 0%, rgba(0,255,60,.08), transparent 34%),
                linear-gradient(180deg, #050806 0%, #020503 100%) !important;
        }

        .h2h-match-layout > .h2h-sidebar,
        .h2h-match-layout > aside:first-child {
            width: 300px !important;
            max-width: 300px !important;
            min-width: 300px !important;
        }

        .h2h-match-main {
            width: 100% !important;
            max-width: none !important;
            min-width: 0 !important;
        }

        .modern-match-page {
            width: 100% !important;
            max-width: none !important;
            display: grid !important;
            gap: 13px !important;
        }

        .h2h-match-rightbar {
            width: 340px !important;
            max-width: 340px !important;
            min-width: 340px !important;
        }

        .match-pro-hero {
            min-height: 230px !important;
            padding: 20px 24px 28px !important;
            border-radius: 14px !important;
        }

        .match-pro-teams {
            grid-template-columns: minmax(260px, 1fr) 190px minmax(260px, 1fr) !important;
            gap: 32px !important;
        }

        .match-pro-logo {
            width: 78px !important;
            height: 78px !important;
        }

        .match-pro-name {
            font-size: 24px !important;
        }

        .match-pro-vs {
            width: 74px !important;
            height: 74px !important;
            font-size: 28px !important;
        }

        .match-pro-time {
            font-size: 25px !important;
        }

        .match-pro-metrics {
            grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
            gap: 12px !important;
        }

        .match-pro-compare {
            padding: 16px 20px !important;
            border-radius: 13px !important;
        }

        .match-pro-facts-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
            gap: 12px !important;
        }

        .h2h-match-tabs {
            border-radius: 12px !important;
            background: rgba(9,15,14,.90) !important;
            border: 1px solid rgba(60,255,80,.16) !important;
        }

        .h2h-match-tabs .match-subtab.active {
            background: linear-gradient(180deg, #34ff43, #0c8f22) !important;
            color: #031006 !important;
            box-shadow: 0 0 22px rgba(35,255,70,.25) !important;
        }

        @media (max-width: 1450px) {
            .h2h-dashboard-layout.h2h-match-layout {
                grid-template-columns: 270px minmax(0, 1fr) 310px !important;
                gap: 16px !important;
            }
            .h2h-match-layout > .h2h-sidebar,
            .h2h-match-layout > aside:first-child {
                width: 270px !important;
                min-width: 270px !important;
                max-width: 270px !important;
            }
            .h2h-match-rightbar {
                width: 310px !important;
                min-width: 310px !important;
                max-width: 310px !important;
            }
        }

        @media (max-width: 1180px) {
            .h2h-dashboard-layout.h2h-match-layout {
                grid-template-columns: 250px minmax(0, 1fr) !important;
            }
            .h2h-match-rightbar {
                display: none !important;
            }
            .match-pro-teams {
                grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr) !important;
                gap: 18px !important;
            }
        }

        @media (max-width: 900px) {
            .h2h-dashboard-layout.h2h-match-layout {
                display: block !important;
                padding: 12px 10px 28px !important;
            }
            .h2h-match-layout > .h2h-sidebar,
            .h2h-match-layout > aside:first-child {
                display: none !important;
            }
            .match-pro-hero {
                min-height: auto !important;
                padding: 16px 12px !important;
            }
            .match-pro-teams {
                grid-template-columns: 1fr 92px 1fr !important;
                gap: 10px !important;
            }
            .match-pro-logo {
                width: 54px !important;
                height: 54px !important;
            }
            .match-pro-name {
                font-size: 14px !important;
            }
            .match-pro-vs {
                width: 54px !important;
                height: 54px !important;
                font-size: 20px !important;
            }
        }

/* ===== Full screen dashboard overrides ===== */
/* =========================================================
   H2HFACTS MATCH PAGE - FULL SCREEN DASHBOARD PATCH
   Add this at the very bottom of public/css/match.css
========================================================= */
html,body{max-width:100%;overflow-x:hidden;background:#050806!important;}
.h2h-dashboard-layout.h2h-match-layout{width:100%!important;max-width:none!important;margin:0!important;padding:20px 18px 42px!important;display:grid!important;grid-template-columns:300px minmax(0,1fr) 340px!important;gap:20px!important;align-items:start!important;background:radial-gradient(circle at 22% 0%,rgba(0,255,60,.08),transparent 34%),linear-gradient(180deg,#050806 0%,#020503 100%)!important;}
.h2h-match-layout>.h2h-sidebar,.h2h-match-layout>aside:first-child{width:300px!important;max-width:300px!important;min-width:300px!important;}
.h2h-match-main,.modern-match-page,.match-page{width:100%!important;max-width:none!important;min-width:0!important;background:transparent!important;}
.modern-match-page{display:grid!important;gap:13px!important;}
.h2h-match-rightbar{width:340px!important;max-width:340px!important;min-width:340px!important;}
.match-pro-hero{min-height:230px!important;padding:20px 24px 28px!important;border-radius:14px!important;background:radial-gradient(circle at 16% 16%,rgba(42,255,64,.16),transparent 31%),radial-gradient(circle at 84% 14%,rgba(42,255,64,.13),transparent 31%),linear-gradient(180deg,rgba(7,27,13,.98),rgba(2,8,5,.99))!important;border:1px solid rgba(50,255,65,.28)!important;box-shadow:0 18px 48px rgba(0,0,0,.30),inset 0 0 0 1px rgba(255,255,255,.025)!important;}
.match-pro-teams{grid-template-columns:minmax(260px,1fr) 190px minmax(260px,1fr)!important;gap:32px!important;}
.match-pro-logo{width:78px!important;height:78px!important;}
.match-pro-name{font-size:24px!important;}
.match-pro-vs{width:74px!important;height:74px!important;font-size:28px!important;}
.match-pro-time{font-size:25px!important;}
.match-pro-metrics{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important;}
.match-pro-compare{padding:16px 20px!important;border-radius:13px!important;background:rgba(7,12,13,.94)!important;border:1px solid rgba(60,255,80,.15)!important;}
.match-pro-facts-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important;}
.h2h-match-tabs,.pp-pro-tabs,.modern-match-tabs{border-radius:12px!important;background:rgba(9,15,14,.90)!important;border:1px solid rgba(60,255,80,.16)!important;}
.h2h-match-tabs .match-subtab.active,.pp-pro-tabs .match-subtab.active,.modern-match-tabs .match-subtab.active{background:linear-gradient(180deg,#34ff43,#0c8f22)!important;color:#031006!important;box-shadow:0 0 22px rgba(35,255,70,.25)!important;}
@media(max-width:1450px){.h2h-dashboard-layout.h2h-match-layout{grid-template-columns:270px minmax(0,1fr) 310px!important;gap:16px!important}.h2h-match-layout>.h2h-sidebar,.h2h-match-layout>aside:first-child{width:270px!important;min-width:270px!important;max-width:270px!important}.h2h-match-rightbar{width:310px!important;min-width:310px!important;max-width:310px!important}}
@media(max-width:1180px){.h2h-dashboard-layout.h2h-match-layout{grid-template-columns:250px minmax(0,1fr)!important}.h2h-match-rightbar{display:none!important}.match-pro-teams{grid-template-columns:minmax(0,1fr) 150px minmax(0,1fr)!important;gap:18px!important}}
@media(max-width:900px){.h2h-dashboard-layout.h2h-match-layout{display:block!important;padding:12px 10px 28px!important}.h2h-match-layout>.h2h-sidebar,.h2h-match-layout>aside:first-child{display:none!important}.match-pro-hero{min-height:auto!important;padding:16px 12px!important}.match-pro-teams{grid-template-columns:1fr 92px 1fr!important;gap:10px!important}.match-pro-logo{width:54px!important;height:54px!important}.match-pro-name{font-size:14px!important}.match-pro-vs{width:54px!important;height:54px!important;font-size:20px!important}}

/* ===== Small safety overrides for summary.blade class names ===== */
.match-pro-hero-main {
    display: grid !important;
    grid-template-columns: minmax(260px, 1fr) 190px minmax(260px, 1fr) !important;
    gap: 32px !important;
    align-items: center !important;
}

.match-pro-team-logo {
    width: 86px !important;
    height: 72px !important;
}

.match-pro-team h1 {
    font-size: 23px !important;
}

.match-pro-bar i {
    width: var(--w, 0%);
}

.h2h-fact-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 1180px) {
    .match-pro-hero-main {
        grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr) !important;
        gap: 18px !important;
    }
}

@media (max-width: 900px) {
    .match-pro-hero-main {
        grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    .h2h-fact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .h2h-fact-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   MATCH SUMMARY CLEAN PATCH
   - remove top stat cards if old HTML/cache remains
   - comparison bars with visible numbers + percentages
   Put at bottom of public/css/match.css
========================================================= */

/* Hide old top cards row completely */
.match-pro-stat-grid,
.match-pro-metrics {
    display: none !important;
}

/* Keep comparison directly under hero */
.match-pro-hero + .match-pro-compare,
.match-pro-compare {
    margin-top: 12px !important;
}

/* Comparison rows with values */
.match-pro-bar-row.has-values {
    grid-template-columns: 170px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
}

.match-pro-bar-row.has-values.away-row {
    grid-template-columns: minmax(0, 1fr) 170px !important;
}

.match-pro-bar-label {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
}

.match-pro-compare-away .match-pro-bar-label {
    grid-template-columns: auto minmax(0, 1fr) !important;
}

.match-pro-bar-label span {
    min-width: 0 !important;
    color: rgba(235,255,236,.70) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
}

.match-pro-bar-label b {
    min-width: 36px !important;
    min-height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 7px !important;
    border-radius: 999px !important;
    background: rgba(83,255,80,.13) !important;
    border: 1px solid rgba(83,255,80,.22) !important;
    color: #55f041 !important;
    font-size: 11px !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
}

.match-pro-bar {
    position: relative !important;
    height: 8px !important;
    background: rgba(255,255,255,.11) !important;
}

.match-pro-bar i {
    min-width: 6px !important;
}

@media (max-width: 900px) {
    .match-pro-bar-row.has-values,
    .match-pro-bar-row.has-values.away-row {
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }

    .match-pro-compare-away .match-pro-bar-label,
    .match-pro-bar-label {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }
}


/* =========================================================
   MATCH TABS COMPLETE CSS - ACTIVE
   Keeps Predictions / H2H / Form / Odds / Standings working
========================================================= */
.match-subtabs,
.modern-match-tabs,
.pp-pro-tabs,
.h2h-match-tabs {
    position: relative !important;
    z-index: 10 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin: 0 0 13px !important;
    padding: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 13px !important;
    background: linear-gradient(180deg, rgba(9,15,14,.96), rgba(4,9,7,.98)) !important;
    border: 1px solid rgba(62,255,82,.17) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.02) !important;
}

.match-subtabs::-webkit-scrollbar,
.modern-match-tabs::-webkit-scrollbar,
.pp-pro-tabs::-webkit-scrollbar,
.h2h-match-tabs::-webkit-scrollbar {
    display: none !important;
}

.match-subtab,
.match-subtabs .match-subtab,
.modern-match-tabs .match-subtab,
.pp-pro-tabs .match-subtab,
.h2h-match-tabs .match-subtab {
    appearance: none !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    height: 36px !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 17px !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.055) !important;
    color: rgba(239,255,241,.82) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}

.match-subtab:hover,
.match-subtabs .match-subtab:hover,
.modern-match-tabs .match-subtab:hover,
.pp-pro-tabs .match-subtab:hover,
.h2h-match-tabs .match-subtab:hover {
    background: rgba(68,255,83,.12) !important;
    border-color: rgba(68,255,83,.25) !important;
    color: #ffffff !important;
    transform: none !important;
}

.match-subtab.active,
.match-subtabs .match-subtab.active,
.modern-match-tabs .match-subtab.active,
.pp-pro-tabs .match-subtab.active,
.h2h-match-tabs .match-subtab.active {
    background: linear-gradient(180deg, #38ff45 0%, #0fa927 100%) !important;
    border-color: rgba(70,255,83,.62) !important;
    color: #031006 !important;
    box-shadow: 0 0 18px rgba(47,255,72,.26) !important;
}

.match-tab-content {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
}

.tab-pane {
    display: none !important;
    width: 100% !important;
    min-width: 0 !important;
}

.tab-pane.active {
    display: block !important;
    animation: h2hMatchTabFade .18s ease both !important;
}

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

@media (max-width: 900px) {
    .match-subtabs,
    .modern-match-tabs,
    .pp-pro-tabs,
    .h2h-match-tabs {
        margin-bottom: 10px !important;
        padding: 7px !important;
        gap: 7px !important;
    }

    .match-subtab,
    .match-subtabs .match-subtab,
    .modern-match-tabs .match-subtab,
    .pp-pro-tabs .match-subtab,
    .h2h-match-tabs .match-subtab {
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 14px !important;
        font-size: 11px !important;
    }
}

/* =========================================================
   H2HFACTS - H2H TAB PRO STYLE
   Append at bottom of public/css/match.css
========================================================= */

.h2h-tab-pro {
    display: grid;
    gap: 12px;
    color: #f6fff6;
}

.h2h-tab-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    background:
        radial-gradient(circle at top left, rgba(83,255,80,.12), transparent 34%),
        linear-gradient(180deg, rgba(12,27,15,.96), rgba(5,12,8,.98));
    border: 1px solid rgba(83,255,80,.22);
}

.h2h-tab-head span {
    display: block;
    color: #55f041;
    font-size: 11px;
    font-weight: 1000;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 5px;
}

.h2h-tab-head h2 {
    margin: 0;
    color: #fff;
    font-size: 23px;
    line-height: 1.1;
    font-weight: 1000;
}

.h2h-tab-head p {
    margin: 6px 0 0;
    color: rgba(230,255,232,.62);
    font-size: 13px;
    font-weight: 800;
}

.h2h-tab-badge {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border-radius: 999px;
    background: rgba(83,255,80,.12);
    border: 1px solid rgba(83,255,80,.24);
    color: #55f041;
    font-size: 12px;
    font-weight: 1000;
    white-space: nowrap;
}

.h2h-empty-pro {
    min-height: 150px;
    display: grid;
    place-items: center;
    text-align: center;
    gap: 5px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(12,27,15,.96), rgba(5,12,8,.98));
    border: 1px dashed rgba(83,255,80,.24);
}

.h2h-empty-pro strong {
    color: #fff;
    font-size: 18px;
    font-weight: 1000;
}

.h2h-empty-pro span {
    color: rgba(230,255,232,.62);
    font-size: 13px;
    font-weight: 800;
}

.h2h-tab-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.h2h-tab-stat-card {
    min-height: 68px;
    display: grid;
    grid-template-columns: 38px 1fr;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(16,40,20,.95), rgba(7,18,10,.98));
    border: 1px solid rgba(83,255,80,.22);
}

.h2h-tab-icon,
.h2h-tab-trend-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(83,255,80,.13);
    color: #55f041;
    border: 1px solid rgba(83,255,80,.18);
}

.h2h-tab-stat-card span {
    display: block;
    color: rgba(230,255,232,.62);
    font-size: 10px;
    font-weight: 1000;
    text-transform: uppercase;
    line-height: 1.2;
}

.h2h-tab-stat-card strong {
    display: block;
    margin-top: 4px;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    font-weight: 1000;
}

.h2h-tab-compare-card {
    display: grid;
    gap: 12px;
    padding: 15px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(7,13,13,.96), rgba(5,10,7,.98));
    border: 1px solid rgba(255,255,255,.08);
}

.h2h-tab-compare-row {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.h2h-tab-compare-row > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.h2h-tab-compare-row strong {
    min-width: 0;
    color: #fff;
    font-size: 12px;
    font-weight: 1000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h2h-tab-compare-row span {
    color: #55f041;
    font-size: 12px;
    font-weight: 1000;
}

.h2h-tab-bar {
    height: 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    overflow: hidden;
}

.h2h-tab-bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #6cff55, #22c83d);
    box-shadow: 0 0 12px rgba(83,255,80,.25);
}

.h2h-tab-bar.draw i {
    background: linear-gradient(90deg, #ffd84a, #d7a913);
}

.h2h-tab-bar.away i {
    background: linear-gradient(90deg, #55f041, #0ea62c);
}

.h2h-tab-trends-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.h2h-tab-trend-card {
    min-height: 66px;
    display: grid;
    grid-template-columns: 38px 1fr;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(16,40,20,.95), rgba(7,18,10,.98));
    border: 1px solid rgba(83,255,80,.20);
}

.h2h-tab-trend-card span {
    display: block;
    color: rgba(230,255,232,.62);
    font-size: 10px;
    font-weight: 1000;
    text-transform: uppercase;
}

.h2h-tab-trend-card strong {
    display: block;
    margin-top: 4px;
    color: #fff;
    font-size: 16px;
    font-weight: 1000;
}

.h2h-tab-list-card {
    overflow: hidden;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(12,27,15,.96), rgba(5,12,8,.98));
    border: 1px solid rgba(83,255,80,.20);
}

.h2h-tab-list-head {
    min-height: 54px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(83,255,80,.13);
}

.h2h-tab-list-head h3 {
    margin: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 1000;
}

.h2h-tab-list-head span {
    color: rgba(230,255,232,.62);
    font-size: 12px;
    font-weight: 900;
}

.h2h-tab-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.h2h-tab-table {
    width: 100%;
    min-width: 740px;
    border-collapse: collapse;
}

.h2h-tab-table th {
    padding: 11px 14px;
    text-align: left;
    color: rgba(230,255,232,.58);
    font-size: 10px;
    font-weight: 1000;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: rgba(0,0,0,.18);
    border-bottom: 1px solid rgba(83,255,80,.12);
}

.h2h-tab-table td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    color: #fff;
    font-size: 12px;
    font-weight: 850;
}

.h2h-tab-table tr:hover td {
    background: rgba(83,255,80,.045);
}

.h2h-tab-table .center {
    text-align: center;
}

.h2h-tab-date {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    color: #fff;
    font-size: 11px;
    font-weight: 1000;
}

.h2h-tab-league {
    color: rgba(230,255,232,.62);
    font-size: 12px;
    font-weight: 900;
}

.h2h-tab-match-teams {
    display: grid;
    gap: 7px;
}

.h2h-tab-match-teams div {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.h2h-tab-match-teams img {
    width: 21px;
    height: 21px;
    object-fit: contain;
    flex: 0 0 21px;
}

.h2h-tab-match-teams strong {
    min-width: 0;
    color: #fff;
    font-size: 12px;
    font-weight: 1000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h2h-tab-score {
    display: inline-flex;
    min-width: 54px;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(83,255,80,.10);
    border: 1px solid rgba(83,255,80,.18);
    color: #55f041;
    font-size: 13px;
    font-weight: 1000;
}

.h2h-tab-result {
    width: 26px;
    height: 26px;
    display: inline-grid;
    place-items: center;
    border-radius: 6px;
    color: #fff;
    font-size: 11px;
    font-weight: 1000;
    background: rgba(255,255,255,.10);
}

.h2h-tab-result.win {
    background: linear-gradient(180deg, #55f041, #15a92a);
    color: #031006;
}

.h2h-tab-result.draw {
    background: linear-gradient(180deg, #f5ce43, #a98210);
    color: #130f02;
}

.h2h-tab-result.loss {
    background: linear-gradient(180deg, #ff536b, #b51935);
}

@media (max-width: 900px) {
    .h2h-tab-head {
        flex-direction: column;
    }

    .h2h-tab-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .h2h-tab-trends-grid {
        grid-template-columns: 1fr;
    }

    .h2h-tab-compare-row {
        grid-template-columns: 1fr;
        gap: 7px;
    }
}

@media (max-width: 560px) {
    .h2h-tab-stats-grid {
        grid-template-columns: 1fr;
    }

    .h2h-tab-head h2 {
        font-size: 19px;
    }
}

/* =========================================================
   H2HFACTS - H2H TAB PRO STYLE + ANGLES + STREAKS
   Put this at the bottom of public/css/match.css
========================================================= */

.h2h-tab-pro {
    display: grid;
    gap: 12px;
    color: #f6fff6;
}

/* Header */
.h2h-tab-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    background:
        radial-gradient(circle at top left, rgba(83,255,80,.12), transparent 34%),
        linear-gradient(180deg, rgba(12,27,15,.96), rgba(5,12,8,.98));
    border: 1px solid rgba(83,255,80,.22);
}

.h2h-tab-head span {
    display: block;
    color: #55f041;
    font-size: 11px;
    font-weight: 1000;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 5px;
}

.h2h-tab-head h2 {
    margin: 0;
    color: #fff;
    font-size: 23px;
    line-height: 1.1;
    font-weight: 1000;
}

.h2h-tab-head p {
    margin: 6px 0 0;
    color: rgba(230,255,232,.62);
    font-size: 13px;
    font-weight: 800;
}

.h2h-tab-badge {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border-radius: 999px;
    background: rgba(83,255,80,.12);
    border: 1px solid rgba(83,255,80,.24);
    color: #55f041;
    font-size: 12px;
    font-weight: 1000;
    white-space: nowrap;
}

/* Empty */
.h2h-empty-pro {
    min-height: 150px;
    display: grid;
    place-items: center;
    text-align: center;
    gap: 5px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(12,27,15,.96), rgba(5,12,8,.98));
    border: 1px dashed rgba(83,255,80,.24);
}

.h2h-empty-pro strong {
    color: #fff;
    font-size: 18px;
    font-weight: 1000;
}

.h2h-empty-pro span {
    color: rgba(230,255,232,.62);
    font-size: 13px;
    font-weight: 800;
}

/* Top Stats */
.h2h-tab-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.h2h-tab-stat-card {
    min-height: 68px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(16,40,20,.95), rgba(7,18,10,.98));
    border: 1px solid rgba(83,255,80,.22);
}

.h2h-tab-icon,
.h2h-tab-trend-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(83,255,80,.13);
    color: #55f041;
    border: 1px solid rgba(83,255,80,.18);
}

.h2h-tab-stat-card span {
    display: block;
    color: rgba(230,255,232,.62);
    font-size: 10px;
    font-weight: 1000;
    text-transform: uppercase;
    line-height: 1.2;
}

.h2h-tab-stat-card strong {
    display: block;
    margin-top: 4px;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    font-weight: 1000;
}

/* Win/Draw/Away comparison */
.h2h-tab-compare-card {
    display: grid;
    gap: 12px;
    padding: 15px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(7,13,13,.96), rgba(5,10,7,.98));
    border: 1px solid rgba(255,255,255,.08);
}

.h2h-tab-compare-row {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.h2h-tab-compare-row > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.h2h-tab-compare-row strong {
    min-width: 0;
    color: #fff;
    font-size: 12px;
    font-weight: 1000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h2h-tab-compare-row span {
    color: #55f041;
    font-size: 12px;
    font-weight: 1000;
}

.h2h-tab-bar {
    height: 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    overflow: hidden;
}

.h2h-tab-bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #6cff55, #22c83d);
    box-shadow: 0 0 12px rgba(83,255,80,.25);
}

.h2h-tab-bar.draw i {
    background: linear-gradient(90deg, #ffd84a, #d7a913);
}

.h2h-tab-bar.away i {
    background: linear-gradient(90deg, #55f041, #0ea62c);
}

/* BTTS / Over / Avg Goals */
.h2h-tab-trends-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.h2h-tab-trend-card {
    min-height: 66px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(16,40,20,.95), rgba(7,18,10,.98));
    border: 1px solid rgba(83,255,80,.20);
}

.h2h-tab-trend-card span {
    display: block;
    color: rgba(230,255,232,.62);
    font-size: 10px;
    font-weight: 1000;
    text-transform: uppercase;
}

.h2h-tab-trend-card strong {
    display: block;
    margin-top: 4px;
    color: #fff;
    font-size: 16px;
    font-weight: 1000;
}

/* H2H Angles */
.h2h-angles-card {
    padding: 14px;
    border-radius: 12px;
    background:
        radial-gradient(circle at top left, rgba(83,255,80,.12), transparent 34%),
        linear-gradient(180deg, rgba(12,27,15,.96), rgba(5,12,8,.98));
    border: 1px solid rgba(83,255,80,.20);
}

.h2h-angles-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.h2h-angles-head span {
    display: block;
    color: #55f041;
    font-size: 10px;
    font-weight: 1000;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 4px;
}

.h2h-angles-head h3 {
    margin: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 1000;
}

.h2h-angles-head p {
    margin: 5px 0 0;
    color: rgba(230,255,232,.58);
    font-size: 12px;
    font-weight: 800;
}

.h2h-angles-head em {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(83,255,80,.11);
    border: 1px solid rgba(83,255,80,.22);
    color: #55f041;
    font-size: 11px;
    font-style: normal;
    font-weight: 1000;
    white-space: nowrap;
}

.h2h-angles-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.h2h-angle-card {
    min-height: 116px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 11px;
    padding: 12px;
    border-radius: 11px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.08);
}

.h2h-angle-card.hot {
    background:
        radial-gradient(circle at top right, rgba(83,255,80,.14), transparent 38%),
        rgba(255,255,255,.045);
    border-color: rgba(83,255,80,.22);
}

.h2h-angle-card.safe {
    background:
        radial-gradient(circle at top right, rgba(255,216,74,.13), transparent 38%),
        rgba(255,255,255,.045);
    border-color: rgba(255,216,74,.18);
}

.h2h-angle-card.team {
    background:
        radial-gradient(circle at top right, rgba(83,255,80,.11), transparent 38%),
        rgba(255,255,255,.045);
    border-color: rgba(83,255,80,.18);
}

.h2h-angle-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(83,255,80,.13);
    border: 1px solid rgba(83,255,80,.18);
    color: #55f041;
    font-size: 15px;
}

.h2h-angle-card.safe .h2h-angle-icon {
    background: rgba(255,216,74,.13);
    border-color: rgba(255,216,74,.20);
    color: #ffd84a;
}

.h2h-angle-body {
    min-width: 0;
}

.h2h-angle-body span {
    display: block;
    color: rgba(230,255,232,.56);
    font-size: 10px;
    font-weight: 1000;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.h2h-angle-body strong {
    display: block;
    color: #fff;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 1000;
}

.h2h-angle-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}

.h2h-angle-meta b {
    color: #fff;
    font-size: 13px;
    font-weight: 1000;
}

.h2h-angle-meta small {
    color: #55f041;
    font-size: 13px;
    font-weight: 1000;
}

.h2h-angle-bar {
    height: 7px;
    margin-top: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    overflow: hidden;
}

.h2h-angle-bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #6cff55, #22c83d);
    box-shadow: 0 0 12px rgba(83,255,80,.22);
}

.h2h-angles-empty {
    min-height: 90px;
    display: grid;
    place-items: center;
    text-align: center;
    gap: 4px;
    border-radius: 10px;
    border: 1px dashed rgba(83,255,80,.20);
    background: rgba(255,255,255,.035);
}

.h2h-angles-empty strong {
    color: #fff;
    font-size: 15px;
    font-weight: 1000;
}

.h2h-angles-empty span {
    color: rgba(230,255,232,.58);
    font-size: 12px;
    font-weight: 800;
}

/* H2H Consecutive Streaks */
.h2h-streaks-card {
    padding: 14px;
    border-radius: 12px;
    background:
        radial-gradient(circle at top left, rgba(83,255,80,.12), transparent 34%),
        linear-gradient(180deg, rgba(12,27,15,.96), rgba(5,12,8,.98));
    border: 1px solid rgba(83,255,80,.20);
}

.h2h-streaks-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.h2h-streaks-head span {
    display: block;
    color: #55f041;
    font-size: 10px;
    font-weight: 1000;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 4px;
}

.h2h-streaks-head h3 {
    margin: 0;
    color: #fff;
    font-size: 17px;
    font-weight: 1000;
}

.h2h-streaks-head em {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 0 11px;
    border-radius: 999px;
    background: rgba(83,255,80,.11);
    border: 1px solid rgba(83,255,80,.22);
    color: #55f041;
    font-size: 11px;
    font-style: normal;
    font-weight: 1000;
    white-space: nowrap;
}

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

.h2h-streak-card {
    min-height: 72px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding: 12px;
    border-radius: 11px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.08);
}

.h2h-streak-card.hot {
    background:
        radial-gradient(circle at top right, rgba(83,255,80,.13), transparent 36%),
        rgba(255,255,255,.045);
    border-color: rgba(83,255,80,.20);
}

.h2h-streak-card.safe {
    background:
        radial-gradient(circle at top right, rgba(255,216,74,.12), transparent 36%),
        rgba(255,255,255,.045);
    border-color: rgba(255,216,74,.18);
}

.h2h-streak-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(83,255,80,.13);
    border: 1px solid rgba(83,255,80,.18);
    color: #55f041;
    font-size: 15px;
}

.h2h-streak-card.safe .h2h-streak-icon {
    background: rgba(255,216,74,.13);
    border-color: rgba(255,216,74,.20);
    color: #ffd84a;
}

.h2h-streak-card span {
    display: block;
    color: rgba(230,255,232,.56);
    font-size: 10px;
    font-weight: 1000;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.h2h-streak-card strong {
    display: block;
    color: #fff;
    font-size: 13px;
    line-height: 1.28;
    font-weight: 1000;
}

/* Recent H2H Table */
.h2h-tab-list-card {
    overflow: hidden;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(12,27,15,.96), rgba(5,12,8,.98));
    border: 1px solid rgba(83,255,80,.20);
}

.h2h-tab-list-head {
    min-height: 54px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(83,255,80,.13);
}

.h2h-tab-list-head h3 {
    margin: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 1000;
}

.h2h-tab-list-head span {
    color: rgba(230,255,232,.62);
    font-size: 12px;
    font-weight: 900;
}

.h2h-tab-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.h2h-tab-table {
    width: 100%;
    min-width: 740px;
    border-collapse: collapse;
}

.h2h-tab-table th {
    padding: 11px 14px;
    text-align: left;
    color: rgba(230,255,232,.58);
    font-size: 10px;
    font-weight: 1000;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: rgba(0,0,0,.18);
    border-bottom: 1px solid rgba(83,255,80,.12);
}

.h2h-tab-table td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    color: #fff;
    font-size: 12px;
    font-weight: 850;
}

.h2h-tab-table tr:hover td {
    background: rgba(83,255,80,.045);
}

.h2h-tab-table .center {
    text-align: center;
}

.h2h-tab-date {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    color: #fff;
    font-size: 11px;
    font-weight: 1000;
}

.h2h-tab-league {
    color: rgba(230,255,232,.62);
    font-size: 12px;
    font-weight: 900;
}

.h2h-tab-match-teams {
    display: grid;
    gap: 7px;
}

.h2h-tab-match-teams div {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.h2h-tab-match-teams img {
    width: 21px;
    height: 21px;
    object-fit: contain;
    flex: 0 0 21px;
}

.h2h-tab-match-teams strong {
    min-width: 0;
    color: #fff;
    font-size: 12px;
    font-weight: 1000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h2h-tab-score {
    display: inline-flex;
    min-width: 54px;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(83,255,80,.10);
    border: 1px solid rgba(83,255,80,.18);
    color: #55f041;
    font-size: 13px;
    font-weight: 1000;
}

.h2h-tab-result {
    width: 26px;
    height: 26px;
    display: inline-grid;
    place-items: center;
    border-radius: 6px;
    color: #fff;
    font-size: 11px;
    font-weight: 1000;
    background: rgba(255,255,255,.10);
}

.h2h-tab-result.win {
    background: linear-gradient(180deg, #55f041, #15a92a);
    color: #031006;
}

.h2h-tab-result.draw {
    background: linear-gradient(180deg, #f5ce43, #a98210);
    color: #130f02;
}

.h2h-tab-result.loss {
    background: linear-gradient(180deg, #ff536b, #b51935);
}

/* Responsive */
@media (max-width: 1100px) {
    .h2h-angles-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .h2h-tab-head {
        flex-direction: column;
    }

    .h2h-tab-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .h2h-tab-trends-grid {
        grid-template-columns: 1fr;
    }

    .h2h-tab-compare-row {
        grid-template-columns: 1fr;
        gap: 7px;
    }
}

@media (max-width: 760px) {
    .h2h-streaks-grid {
        grid-template-columns: 1fr;
    }

    .h2h-streaks-head,
    .h2h-angles-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .h2h-angles-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .h2h-tab-stats-grid {
        grid-template-columns: 1fr;
    }

    .h2h-tab-head h2 {
        font-size: 19px;
    }

    .h2h-tab-table {
        min-width: 680px;
    }
}

/* =========================================================
   MATCH FORM TAB - H2HFACTS GREEN STYLE
   - no H2H section at bottom
   - colors adapted to H2HFACTS, not Topbet blue
========================================================= */

.fs-pro-form,
.fs-form-wrapper,
.fs-h2h-theme {
    display: grid !important;
    gap: 14px !important;
    padding: 16px !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(4,18,10,.92), rgba(3,12,8,.96)) !important;
    border: 1px solid rgba(54,255,110,.18) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(90,255,120,.06), 0 8px 30px rgba(0,0,0,.18) !important;
}

.fs-form-tabs {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin: 0 0 4px !important;
}

.fs-form-tab {
    min-height: 38px !important;
    padding: 0 16px !important;
    border: 1px solid rgba(98,255,70,.14) !important;
    border-radius: 11px !important;
    background: rgba(20,30,23,.82) !important;
    color: #c8d8cc !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
    text-transform: uppercase !important;
    letter-spacing: .03em !important;
    cursor: pointer !important;
    transition: .18s ease !important;
}

.fs-form-tab:hover {
    color: #fff !important;
    border-color: rgba(98,255,70,.28) !important;
    background: rgba(26,42,30,.9) !important;
}

.fs-form-tab.active {
    background: linear-gradient(180deg, #62ff46, #1fcb37) !important;
    color: #061208 !important;
    border-color: transparent !important;
    box-shadow: 0 0 18px rgba(83,255,80,.20) !important;
}

.fs-form-pane {
    display: none !important;
    gap: 16px !important;
}

.fs-form-pane.active {
    display: grid !important;
}

.fs-form-list-box {
    display: grid !important;
    gap: 0 !important;
    padding: 0 !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, rgba(7,22,13,.88), rgba(6,17,11,.96)) !important;
    border: 1px solid rgba(66,255,117,.12) !important;
    overflow: hidden !important;
}

.fs-form-list-title {
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    background: linear-gradient(90deg, rgba(18,50,26,.72), rgba(16,33,24,.40)) !important;
    border-bottom: 1px solid rgba(66,255,117,.08) !important;
    color: #f1fff3 !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
}

.fs-form-list-title > span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.fs-form-list-title em {
    color: #9fbe9f !important;
    font-size: 11px !important;
    font-style: normal !important;
    font-weight: 1000 !important;
    white-space: nowrap !important;
}

.fs-title-form {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-left: auto !important;
}

.fs-mini-result {
    width: 22px !important;
    height: 22px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 6px !important;
    color: #fff !important;
    font-size: 10px !important;
    font-style: normal !important;
    font-weight: 1000 !important;
    background: rgba(255,255,255,.12) !important;
}

.fs-mini-result.win { background: #22c55e !important; }
.fs-mini-result.draw { background: #d8a31a !important; }
.fs-mini-result.loss { background: #ef4444 !important; }

.fs-match-row {
    display: grid !important;
    grid-template-columns: 86px 46px minmax(0, 1fr) 44px 34px !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 70px !important;
    padding: 12px !important;
    border-bottom: 1px solid rgba(66,255,117,.08) !important;
    color: #e8f7ea !important;
    background: transparent !important;
}

.fs-match-row:last-of-type { border-bottom: 0 !important; }
.fs-match-row:hover { background: rgba(70,255,126,.03) !important; }
.fs-hidden-match { display: none !important; }

.fs-col-date {
    color: #c7ddcb !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
}

.fs-col-comp {
    color: #95b298 !important;
    font-size: 11px !important;
    font-weight: 1000 !important;
    text-transform: uppercase !important;
}

.fs-col-teams {
    display: grid !important;
    gap: 7px !important;
    min-width: 0 !important;
}

.fs-team-line {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
}

.fs-team-logo {
    width: 21px !important;
    height: 21px !important;
    object-fit: contain !important;
    flex: 0 0 21px !important;
}

.fs-team-name {
    min-width: 0 !important;
    color: #d5ead7 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1.15 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.fs-team-name-main {
    color: #ffffff !important;
    font-weight: 1000 !important;
}

.fs-col-score {
    display: grid !important;
    gap: 5px !important;
    justify-items: center !important;
}

.fs-score-line {
    min-width: 34px !important;
    min-height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 7px !important;
    background: rgba(34,197,94,.12) !important;
    border: 1px solid rgba(34,197,94,.20) !important;
    color: #eaffea !important;
    font-size: 13px !important;
    font-weight: 1000 !important;
}

.fs-col-result {
    display: flex !important;
    justify-content: flex-end !important;
}

.fs-result-badge {
    width: 30px !important;
    height: 30px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
    background: rgba(255,255,255,.12) !important;
}

.fs-result-win { background: #22c55e !important; }
.fs-result-draw { background: #d8a31a !important; }
.fs-result-loss { background: #ef4444 !important; }

.fs-show-more {
    width: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(66,255,117,.08) !important;
    background: linear-gradient(90deg, rgba(16,44,20,.85), rgba(8,26,12,.85)) !important;
    color: #9dff86 !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
    cursor: pointer !important;
}

.fs-show-more:hover {
    color: #dfffd2 !important;
    background: linear-gradient(90deg, rgba(22,58,28,.92), rgba(10,30,15,.92)) !important;
}

.fs-show-more span { color: #bfffad !important; }

.fs-form-empty {
    min-height: 94px !important;
    display: grid !important;
    place-items: center !important;
    color: #9fb0a2 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

@media (max-width: 760px) {
    .fs-pro-form,
    .fs-form-wrapper { padding: 12px !important; }

    .fs-match-row {
        grid-template-columns: 70px 38px minmax(0, 1fr) 36px 30px !important;
        gap: 8px !important;
        padding: 11px 10px !important;
    }

    .fs-form-list-title {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 7px !important;
    }

    .fs-title-form { margin-left: 0 !important; }

    .fs-team-logo {
        width: 19px !important;
        height: 19px !important;
        flex-basis: 19px !important;
    }

    .fs-team-name { font-size: 11px !important; }
    .fs-col-date, .fs-col-comp { font-size: 10px !important; }
    .fs-score-line { min-width: 30px !important; font-size: 12px !important; }
    .fs-result-badge { width: 26px !important; height: 26px !important; font-size: 11px !important; }
}

@media (max-width: 540px) {
    .fs-match-row { grid-template-columns: 1fr auto auto !important; }
    .fs-col-date, .fs-col-comp { grid-column: 1 / -1 !important; }
    .fs-col-teams { grid-column: 1 !important; }
    .fs-col-score { grid-column: 2 !important; grid-row: 3 !important; }
    .fs-col-result { grid-column: 3 !important; grid-row: 3 !important; }
}

/* =========================================================
   H2HFACTS - MATCH STANDINGS TAB STYLE
   Put this at the bottom of public/css/match.css
========================================================= */

#tab-standings .pp-section-card,
#tab-standings .pp-standings-wrap {
    padding: 16px !important;
    border-radius: 16px !important;
    background:
        radial-gradient(circle at top left, rgba(83,255,80,.10), transparent 34%),
        linear-gradient(180deg, rgba(5,19,10,.96), rgba(2,8,5,.98)) !important;
    border: 1px solid rgba(83,255,80,.18) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 16px 40px rgba(0,0,0,.20) !important;
    color: #f6fff6 !important;
}

#tab-standings .pp-standings-inner {
    display: grid !important;
    gap: 14px !important;
}

#tab-standings .pp-standings-top {
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
}

#tab-standings .pp-section-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 20px !important;
    line-height: 1.1 !important;
    font-weight: 1000 !important;
}

#tab-standings .pp-section-title::before {
    content: "\f0cb";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(83,255,80,.13);
    border: 1px solid rgba(83,255,80,.20);
    color: #55f041;
    font-size: 14px;
}

#tab-standings .pp-standings-group-title {
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 13px !important;
    border-radius: 11px !important;
    background: linear-gradient(90deg, rgba(20,58,28,.78), rgba(8,24,12,.72)) !important;
    border: 1px solid rgba(83,255,80,.16) !important;
    color: #55f041 !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
}

#tab-standings .pp-standings-table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, rgba(6,20,11,.95), rgba(3,12,7,.98)) !important;
    border: 1px solid rgba(83,255,80,.13) !important;
}

#tab-standings .pp-standings-table {
    width: 100% !important;
    min-width: 840px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    color: #f6fff6 !important;
}

#tab-standings .pp-standings-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 12px 10px !important;
    background: rgba(2,10,5,.96) !important;
    border-bottom: 1px solid rgba(83,255,80,.16) !important;
    color: rgba(230,255,232,.62) !important;
    font-size: 10px !important;
    font-weight: 1000 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    white-space: nowrap !important;
}

#tab-standings .pp-standings-table thead th.pp-col-team {
    text-align: left !important;
}

#tab-standings .pp-standings-table tbody td {
    padding: 12px 10px !important;
    border-bottom: 1px solid rgba(255,255,255,.055) !important;
    background: transparent !important;
    color: rgba(246,255,246,.86) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-align: center !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

#tab-standings .pp-standings-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

#tab-standings .pp-standings-table tbody tr:hover td {
    background: rgba(83,255,80,.045) !important;
}

#tab-standings .pp-col-rank {
    width: 52px !important;
}

#tab-standings .pp-col-team {
    min-width: 260px !important;
    text-align: left !important;
}

#tab-standings .pp-col-form {
    min-width: 128px !important;
}

#tab-standings .pp-rank-badge {
    min-width: 30px !important;
    height: 30px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 9px !important;
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    color: #d8eadb !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
}

#tab-standings .pp-rank-badge.pp-rank-cl,
#tab-standings tr.pp-rank-cl .pp-rank-badge,
#tab-standings .pp-rank-badge.pp-rank-promotion,
#tab-standings tr.pp-rank-promotion .pp-rank-badge {
    background: rgba(34,197,94,.16) !important;
    border-color: rgba(34,197,94,.28) !important;
    color: #55f041 !important;
}

#tab-standings .pp-rank-badge.pp-rank-el,
#tab-standings tr.pp-rank-el .pp-rank-badge {
    background: rgba(59,130,246,.16) !important;
    border-color: rgba(59,130,246,.25) !important;
    color: #73a7ff !important;
}

#tab-standings .pp-rank-badge.pp-rank-ecl,
#tab-standings tr.pp-rank-ecl .pp-rank-badge {
    background: rgba(168,85,247,.15) !important;
    border-color: rgba(168,85,247,.25) !important;
    color: #c084fc !important;
}

#tab-standings .pp-rank-badge.pp-rank-playoff,
#tab-standings tr.pp-rank-playoff .pp-rank-badge {
    background: rgba(250,204,21,.15) !important;
    border-color: rgba(250,204,21,.25) !important;
    color: #facc15 !important;
}

#tab-standings .pp-rank-badge.pp-rank-relegation,
#tab-standings tr.pp-rank-relegation .pp-rank-badge {
    background: rgba(239,68,68,.16) !important;
    border-color: rgba(239,68,68,.25) !important;
    color: #ff6b7b !important;
}

#tab-standings .pp-team-cell {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
}

#tab-standings .pp-team-link {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    min-width: 0 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

#tab-standings .pp-team-logo {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
    flex: 0 0 24px !important;
}

#tab-standings .pp-team-name {
    min-width: 0 !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 1000 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#tab-standings .pp-pts {
    color: #55f041 !important;
    font-size: 14px !important;
    font-weight: 1000 !important;
}

#tab-standings .pp-badge {
    min-height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 1000 !important;
    text-transform: uppercase !important;
}

#tab-standings .pp-badge-green {
    background: rgba(83,255,80,.13) !important;
    border: 1px solid rgba(83,255,80,.20) !important;
    color: #55f041 !important;
}

#tab-standings .pp-badge-blue {
    background: rgba(59,130,246,.14) !important;
    border: 1px solid rgba(59,130,246,.22) !important;
    color: #8bb7ff !important;
}

#tab-standings .pp-match-standing-home td {
    background: rgba(83,255,80,.055) !important;
}

#tab-standings .pp-match-standing-away td {
    background: rgba(255,255,255,.028) !important;
}

#tab-standings .pp-form-list {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    flex-wrap: nowrap !important;
}

#tab-standings .pp-form-badge {
    width: 23px !important;
    height: 23px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 7px !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 1000 !important;
    background: rgba(255,255,255,.10) !important;
}

#tab-standings .pp-form-win { background: #22c55e !important; }
#tab-standings .pp-form-draw { background: #d8a31a !important; }
#tab-standings .pp-form-loss { background: #ef4444 !important; }
#tab-standings .pp-form-empty { background: rgba(255,255,255,.10) !important; color: rgba(255,255,255,.65) !important; }

#tab-standings .pp-standings-legend {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 12px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.035) !important;
    border: 1px solid rgba(255,255,255,.06) !important;
}

#tab-standings .pp-legend-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 26px !important;
    padding: 0 9px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.04) !important;
    color: rgba(230,255,232,.72) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
}

#tab-standings .pp-legend-color {
    width: 9px !important;
    height: 9px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.35) !important;
}

#tab-standings .pp-legend-cl,
#tab-standings .pp-legend-promotion { background: #22c55e !important; }
#tab-standings .pp-legend-el { background: #3b82f6 !important; }
#tab-standings .pp-legend-ecl { background: #a855f7 !important; }
#tab-standings .pp-legend-playoff { background: #facc15 !important; }
#tab-standings .pp-legend-relegation { background: #ef4444 !important; }

#tab-standings .pp-standings-table-wrap::-webkit-scrollbar { height: 8px; }
#tab-standings .pp-standings-table-wrap::-webkit-scrollbar-track { background: rgba(255,255,255,.04); }
#tab-standings .pp-standings-table-wrap::-webkit-scrollbar-thumb { background: rgba(83,255,80,.26); border-radius: 999px; }

@media (max-width: 760px) {
    #tab-standings .pp-section-card,
    #tab-standings .pp-standings-wrap {
        padding: 12px !important;
        border-radius: 14px !important;
    }

    #tab-standings .pp-section-title { font-size: 17px !important; }
    #tab-standings .pp-standings-table { min-width: 760px !important; }

    #tab-standings .pp-standings-table thead th,
    #tab-standings .pp-standings-table tbody td {
        padding: 10px 8px !important;
    }

    #tab-standings .pp-team-name { font-size: 12px !important; }
    #tab-standings .pp-form-badge { width: 21px !important; height: 21px !important; font-size: 9px !important; }
}