/* =========================================================
   SOCCERSCORE HOME
   CLEAN V3
   LIGHT + DARK
   FULL RESPONSIVE
   ========================================================= */

:root {
    --bg: #eef3f8;
    --surface: #ffffff;
    --surface-soft: #f8fafc;

    --text: #101828;
    --muted: #667085;

    --line: #e1e7ef;

    --nav: #071a33;
    --nav-2: #0b2748;

    --green: #08a875;
    --green-dark: #07865f;

    --blue: #1687ff;

    --red: #ff3d52;
    --yellow: #f2c500;

    --shadow:
        0 8px 28px rgba(15, 23, 42, 0.08);

    --shadow-hover:
        0 18px 45px rgba(15, 23, 42, 0.14);

    --radius: 16px;

    --max-width: 1180px;

    color-scheme: light;
}


/* =========================================================
   DARK MODE
   ========================================================= */

html[data-theme="dark"] {

    --bg: #030a14;

    --surface: #071525;

    --surface-soft: #0a1a2d;

    --text: #f4f7fb;

    --muted: #91a3ba;

    --line: #1c2d42;

    --nav: #020b18;

    --nav-2: #061a31;

    --green: #25d69f;

    --green-dark: #12b983;

    --blue: #3ca3ff;

    --red: #ff4055;

    --yellow: #ffd21a;

    --shadow:
        0 12px 40px rgba(0, 0, 0, 0.30);

    --shadow-hover:
        0 20px 55px rgba(0, 0, 0, 0.45);

    color-scheme: dark;
}


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

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

@media (hover: none) {
    html {
        scroll-behavior: auto;
    }
}

body {
    margin: 0;

    min-width: 280px;
    
    overflow-x: hidden;

    background:
        radial-gradient(
            circle at 50% -20%,
            rgba(22, 135, 255, 0.08),
            transparent 38%
        ),
        var(--bg);

    color: var(--text);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    -webkit-font-smoothing: antialiased;
}

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

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

button {
    font: inherit;
}


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

.site-header {

    width: 100%;

    min-height: 72px;

    padding:
        10px
        max(16px, calc((100vw - var(--max-width)) / 2));

    display: flex;

    align-items: center;

    gap: 14px;

    background:
        linear-gradient(
            110deg,
            var(--nav),
            var(--nav-2)
        );

    border-bottom:
        1px solid rgba(255,255,255,.08);

    position: sticky;

    top: 0;

    z-index: 100;

    box-shadow:
        0 8px 25px rgba(2, 10, 22, .18);
}


/* LOGO */

.brand {
    display: flex;

    align-items: center;

    flex: 0 0 auto;
}

.brand img {

    display: block;

    width: 150px;

    height: 52px;

    object-fit: contain;
}


/* NAV */

.main-nav {

    display: flex;

    align-items: center;

    gap: 6px;

    min-width: 0;
}

.nav-link {

    min-height: 42px;

    padding:
        0 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    border:
        1px solid rgba(144,182,220,.22);

    border-radius: 10px;

    color: #eaf2fb;

    white-space: nowrap;

    font-size: 12px;

    font-weight: 800;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.nav-link span {
    font-size: 16px;
}

.nav-link:hover {

    background:
        rgba(255,255,255,.07);

    border-color:
        rgba(57,161,255,.7);

    transform:
        translateY(-1px);
}

.nav-link.active {

    background:
        linear-gradient(
            135deg,
            rgba(22,135,255,.18),
            rgba(37,214,159,.12)
        );

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


/* HEADER BUTTONS */

.header-actions {

    margin-left: auto;

    display: flex;

    gap: 8px;
}

.icon-button {

    width: 42px;

    height: 42px;

    display: grid;

    place-items: center;

    border: 0;

    border-radius: 11px;

    background: #ffffff;

    color: #081a30;

    cursor: pointer;

    font-size: 19px;

    transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.icon-button:hover {

    transform:
        translateY(-1px);

    box-shadow:
        0 8px 20px rgba(0,0,0,.18);
}

@media (hover: none) {

    .icon-button:hover {
        transform: none;
        box-shadow: none;
    }

}

.menu-button {
    display: none;
}


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

.home-container {

    width:
        min(
            calc(100% - 28px),
            var(--max-width)
        );

    margin:
        14px auto 28px;
}


/* =========================================================
   HERO BANNER — ORIGINAL RATIO 1600 × 326
   ========================================================= */

.hero {
    position: relative;
    width: 100%;
    aspect-ratio: 1600 / 326;
    overflow: hidden;

    margin: 0 0 16px;

    border-radius: 14px;
    background: #061426;
}

.hero-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-slide {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .35s ease,
        visibility .35s ease;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
}

.hero-slide img {
    display: block;

    width: 100%;
    height: 100%;

    /* PENTING:
       Jangan crop banner */
    object-fit: contain;
    object-position: center;

    background: #061426;
}


/* HERO ARROWS */

.hero-arrow {

    position: absolute;

    top: 50%;

    transform:
        translateY(-50%);

    width: 34px;

    height: 34px;

    display: grid;

    place-items: center;

    border:
        1px solid rgba(255,255,255,.65);

    border-radius: 50%;

    background:
        rgba(2,10,22,.42);

    color: #fff;

    cursor: pointer;

    font-size: 25px;

    line-height: 1;

    z-index: 5;

    transition:
    background .2s ease,
    transform .2s ease;
}

.hero-arrow:hover {

    background:
        rgba(22,135,255,.65);

    transform:
        translateY(-50%) scale(1.05);
}

.hero-arrow.prev {
    left: 10px;
}

.hero-arrow.next {
    right: 10px;
}


/* DOTS */

.hero-dots {

    position: absolute;

    left: 50%;

    bottom: 8px;

    transform:
        translateX(-50%);

    display: flex;

    gap: 6px;

    z-index: 5;
}

.hero-dot {

    width: 7px;

    height: 7px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background:
        rgba(255,255,255,.5);

    cursor: pointer;
}

.hero-dot.active {

    width: 20px;

    border-radius: 6px;

    background: #ffffff;
}

/* =========================================================
   HERO RESPONSIVE
   ========================================================= */

@media (max-width: 800px) {

    .hero {
        aspect-ratio: 1600 / 326;
        margin-bottom: 12px;
        border-radius: 12px;
    }
}

@media (max-width: 520px) {

    .hero {
        aspect-ratio: 1600 / 326;
        margin-bottom: 10px;
        border-radius: 10px;
    }
}


/* =========================================================
   FEATURE CARDS
   ========================================================= */

.feature-grid {

    margin-top: 14px;

    display: grid;

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

    gap: 12px;
}

.feature-card {

    position: relative;

    width: 100%;

    aspect-ratio: 742 / 486;

    height: auto;

    min-height: 0;

    overflow: hidden;

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

    border-radius: 15px;

    background: #071525;

    color: #fff;

    box-shadow:
        var(--shadow);

    isolation: isolate;

}


.feature-card > img {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    z-index: -3;

    transition:
        transform .4s ease;
}

.feature-card:hover > img {

    transform:
        scale(1.04);
}

.feature-card::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -2;

    background:
        linear-gradient(
            180deg,
            rgba(2,8,18,.08) 0%,
            rgba(2,8,18,.42) 45%,
            rgba(2,8,18,.92) 100%
        );
}

.feature-overlay {

    position: absolute;

    inset: 0;

    padding: 14px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    pointer-events: none;
}


/* FEATURE COLORS */

.feature-live {
    --feature-color: #22e6a5;
}

.feature-stream {
    --feature-color: #ff4359;
}

.feature-transfer {
    --feature-color: #1687ff;
}

.feature-news {
    --feature-color: #ffd000;
}


/* FEATURE ICON */

.feature-icon {

    width: 38px;

    height: 38px;

    margin-bottom: 8px;

    display: grid;

    place-items: center;

    border:
        1.5px solid var(--feature-color);

    border-radius: 50%;

    color: var(--feature-color);

    background:
        rgba(0,0,0,.18);

    font-size: 18px;
}


/* FEATURE COPY */

.feature-copy {
    padding-right: 35px;
}

.feature-copy h2 {

    margin:
        0 0 3px;

    color: #fff;

    font-size: 14px;

    line-height: 1.1;

    font-weight: 900;
}

.feature-copy p {

    margin: 0;

    color:
        rgba(255,255,255,.82);

    font-size: 9px;

    line-height: 1.35;
}


/* FEATURE ARROW */

.feature-arrow {

    position: absolute;

    right: 11px;

    bottom: 11px;

    width: 34px;

    height: 34px;

    display: grid;

    place-items: center;

    border:
        1px solid var(--feature-color);

    border-radius: 50%;

    color: var(--feature-color);

    font-size: 18px;

transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease;
}

.feature-card:hover .feature-arrow {

    background:
        var(--feature-color);

    color:
        #06101f;

    transform:
        translateX(3px);
}


/* =========================================================
   THREE BOTTOM PANELS
   THIS IS THE IMPORTANT PART
   ========================================================= */

.home-grid {

    margin-top: 14px;

    display: grid;

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

    gap: 14px;

    align-items: stretch;
}


/* PANEL */

.panel {

    min-width: 0;

    height: 385px;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    padding: 0 10px 10px;

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

    border-radius:
        17px;

    background:
        linear-gradient(
            180deg,
            var(--surface),
            var(--surface-soft)
        );

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


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

.panel-header {

    flex:
        0 0 48px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    padding:
        0 4px;

    border-bottom:
        1px solid var(--line);
}

.panel-header > div {

    display: flex;

    align-items: center;

    gap: 8px;
}

.panel-header h2 {

    margin: 0;

    font-size: 13px;

    font-weight: 900;

    letter-spacing: .2px;
}

.panel-header a {

    color:
        var(--green);

    font-size: 11px;

    font-weight: 900;

    white-space: nowrap;
}

.panel-header a:hover {
    color: var(--blue);
}


/* DOT */

.panel-dot {

    width: 8px;

    height: 8px;

    display: inline-block;

    border-radius: 50%;
}

.news-dot,
.live-dot {

    background:
        var(--red);

    box-shadow:
        0 0 8px rgba(255,61,82,.35);
}

.transfer-dot {

    background:
        var(--blue);

    box-shadow:
        0 0 8px rgba(22,135,255,.35);
}


/* =========================================================
   PANEL CONTENT
   ========================================================= */

.panel-list {

    flex: 1;

    min-height: 0;

    overflow: hidden;
}


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

.loading-state {

    width: 100%;

    height: 100%;

    min-height: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    gap: 6px;

    padding: 20px;

    color:
        var(--muted);
}

.loading-state span {

    font-size: 27px;

    line-height: 1;
}

.loading-state b {

    color:
        var(--text);

    font-size: 12px;

    font-weight: 900;
}

.loading-state small {

    color:
        var(--muted);

    font-size: 10px;

    line-height: 1.4;
}


/* =========================================================
   NEWS
   ========================================================= */

.news-list {

    display: grid;

    grid-template-rows:
        repeat(4, minmax(0, 1fr));
}

.news-item {

    min-width: 0;

    display: grid;

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

    align-items: center;

    gap: 8px;

    padding:
        6px 0;

    border-bottom:
        1px solid var(--line);

    overflow: hidden;
}

.news-item:last-child {
    border-bottom: 0;
}

.news-thumb {

    width: 62px;

    height: 50px;

    display: block;

    object-fit: cover;

    border-radius: 7px;

    background:
        var(--surface-soft);

    border:
        1px solid var(--line);
}

.news-content {

    min-width: 0;

    overflow: hidden;
}

.news-title {

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;

    overflow: hidden;

    color:
        var(--text);

    font-size: 10px;

    line-height: 1.3;

    font-weight: 800;
}

.news-meta {

    display: block;

    margin-top: 3px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    color:
        var(--muted);

    font-size: 8px;
}

.news-meta strong {
    color: var(--green);
}

.item-arrow {

    color:
        var(--green);

    font-size: 17px;

    text-align: center;
}


/* =========================================================
   LIVE MATCHES
   ========================================================= */

.live-list {

    display: grid;

    grid-template-rows:
        repeat(4, minmax(0, 1fr));
}

.live-item {

    min-width: 0;

    display: grid;

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

    align-items: center;

    gap: 5px;

    padding:
        5px 0;

    border-bottom:
        1px solid var(--line);
}

.live-item:last-child {
    border-bottom: 0;
}

.live-minute {

    color:
        var(--green);

    font-size: 9px;

    font-weight: 900;

    text-align: center;
}

.live-teams {

    min-width: 0;

    display: grid;

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

    align-items: center;

    gap: 5px;
}

.team {

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 4px;

    font-size: 8px;

    font-weight: 800;
}

.team.home {

    justify-content:
        flex-end;

    text-align:
        right;
}

.team.away {

    justify-content:
        flex-start;

    text-align:
        left;
}

.team-name {

    min-width: 0;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
}

.team-logo {

    width: 21px;

    height: 21px;

    flex: 0 0 21px;

    object-fit: contain;
}

.score {

    display: flex;

    align-items: center;

    white-space: nowrap;

    font-size: 12px;

    font-weight: 900;
}

.score-sep {

    padding:
        0 2px;

    color:
        var(--muted);
}

.live-badge {

    justify-self: end;

    padding:
        3px 5px;

    border-radius: 5px;

    background:
        var(--red);

    color: #fff;

    font-size: 7px;

    font-weight: 900;
}


/* =========================================================
   TRANSFERS
   ========================================================= */

.transfer-list {

    display: grid;

    grid-template-rows:
        repeat(4, minmax(0, 1fr));
}

.transfer-item {

    min-width: 0;

    display: grid;

    grid-template-columns:
        22px
        38px
        minmax(0, 1fr)
        60px;

    align-items: center;

    gap: 6px;

    padding:
        5px 0;

    border-bottom:
        1px solid var(--line);

    overflow: hidden;
}

.transfer-item:last-child {
    border-bottom: 0;
}

.transfer-rank {

    width: 22px;

    height: 19px;

    display: grid;

    place-items: center;

    border-radius: 5px;

    background:
        rgba(22,135,255,.10);

    color:
        var(--blue);

    font-size: 8px;

    font-weight: 900;
}

.transfer-avatar {

    width: 36px;

    height: 40px;

    display: block;

    object-fit: cover;

    object-position: top center;

    border-radius: 50%;

    background:
        var(--surface-soft);

    border:
        1px solid var(--line);
}

.transfer-info {

    min-width: 0;

    overflow: hidden;
}

.transfer-name {

    display: block;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    color:
        var(--text);

    font-size: 9px;

    font-weight: 900;
}

.transfer-country {

    display: block;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    margin-top: 1px;

    color:
        var(--muted);

    font-size: 7px;
}

.transfer-position {

    margin-left: 3px;

    color:
        var(--blue);
}

.transfer-route {

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 3px;

    margin-top: 3px;

    overflow: hidden;

    color:
        var(--muted);

    font-size: 7px;
}

.club {

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 3px;
}

.club span {

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
}

.club-logo {

    width: 13px;

    height: 13px;

    flex: 0 0 13px;

    object-fit: contain;
}

.transfer-arrow {

    color:
        var(--green);

    font-size: 9px;
}

.transfer-side {

    min-width: 0;

    text-align:
        right;
}

.transfer-fee {

    display: block;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    color:
        var(--green);

    font-size: 9px;

    font-weight: 900;
}

.transfer-date {

    display: block;

    margin-top: 2px;

    color:
        var(--muted);

    font-size: 7px;

    white-space: nowrap;
}


/* =========================================================
   BOTTOM BUTTON
   ========================================================= */

.panel-button {

    flex:
        0 0 38px;

    margin-top:
        7px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    border:
        1px solid rgba(8,168,117,.55);

    border-radius: 8px;

    color:
        var(--green);

    font-size: 9px;

    font-weight: 900;

transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

.panel-button:hover {

    background:
        rgba(8,168,117,.07);

    border-color:
        var(--green);

    transform:
        translateY(-1px);
}

.panel-button span {

    font-size: 14px;
}


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

.site-footer {

    min-height: 62px;

    padding:
        15px
        max(16px, calc((100vw - var(--max-width)) / 2));

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    background:
        linear-gradient(
            110deg,
            var(--nav),
            var(--nav-2)
        );

    color:
        #dce8f5;

    font-size: 10px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .site-header {
        padding-left: 15px;
        padding-right: 15px;
    }

    .brand img {
        width: 125px;
    }

    .nav-link {
        padding-left: 10px;
        padding-right: 10px;
    }

    .nav-link b {
        font-size: 10px;
    }

    .feature-card {
        min-height: 0;
        aspect-ratio: 742 / 486;
    }

    .panel {
        height: 350px;
    }

    .transfer-item {
        grid-template-columns:
            21px
            34px
            minmax(0,1fr)
            52px;
    }

    .transfer-avatar {
        width: 34px;
        height: 38px;
    }
}


/* =========================================================
   SMALL TABLET
   ========================================================= */

@media (max-width: 820px) {

    .main-nav {
        gap: 4px;
    }

    .nav-link {
        padding:
            0 7px;
    }

    .nav-link span {
        font-size: 14px;
    }

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

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

    .panel {

        height:
            360px;
    }
}


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

@media (max-width: 620px) {

    .site-header {

        position: relative;

        min-height: 62px;

        padding:
            8px 10px;
    }

    .brand img {

        width: 105px;

        height: auto;
    }

    .main-nav {

        position: absolute;

        top: 62px;

        left: 10px;

        right: 10px;

        display: none;

        flex-direction: column;

        align-items: stretch;

        padding: 7px;

        background:
            var(--nav);

        border:
            1px solid rgba(255,255,255,.12);

        border-radius: 12px;

        box-shadow:
            0 18px 40px rgba(0,0,0,.3);

        z-index: 200;
    }

    .main-nav.open {
        display: flex;
    }

    .nav-link {

        justify-content:
            flex-start;

        min-height: 40px;

        padding:
            0 12px;
    }

    .nav-link b {
        font-size: 11px;
    }

    .menu-button {
        display: grid;
    }

    .icon-button {

        width: 39px;

        height: 39px;
    }

    .home-container {

        width:
            calc(100% - 18px);

        margin-top: 9px;
    }

    .hero {
        border-radius: 11px;
    }

    .hero-arrow {

        width: 29px;

        height: 29px;

        font-size: 21px;
    }

    .feature-grid {

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

        gap: 9px;

        margin-top: 9px;
    }

    .feature-card {

        min-height: 0;

        aspect-ratio: 742 / 486;

        border-radius:
            11px;
    }

    .feature-overlay {
        padding: 10px;
    }

    .feature-icon {

        width: 31px;

        height: 31px;

        margin-bottom: 5px;

        font-size: 14px;
    }

    .feature-copy h2 {
        font-size: 11px;
    }

    .feature-copy p {
        font-size: 7px;
    }

    .feature-arrow {

        width: 27px;

        height: 27px;

        right: 8px;

        bottom: 8px;

        font-size: 15px;
    }

    .home-grid {

        margin-top: 9px;

        gap: 10px;
    }

    .panel {

        height:
            350px;

        padding:
            0 10px 9px;

        border-radius:
            13px;
    }

    .panel-header {

        flex-basis:
            43px;
    }

    .panel-header h2 {
        font-size: 11px;
    }

    .panel-header a {
        font-size: 9px;
    }

    .panel-button {

        flex-basis:
            36px;

        font-size: 8px;
    }

    .site-footer {

        flex-direction:
            column;

        justify-content:
            center;

        text-align:
            center;

        padding:
            14px 10px;

        font-size: 8px;
    }
}


/* =========================================================
   VERY SMALL PHONE
   ========================================================= */

@media (max-width: 380px) {

    .brand img {
        width: 92px;
    }

    .feature-card {
        min-height: 0;
        aspect-ratio: 742 / 486;
    }

    .feature-copy h2 {
        font-size: 9px;
    }

    .feature-copy p {
        font-size: 6.5px;
    }

    .panel {
        height: 340px;
    }

    .news-item {
        grid-template-columns:
            55px
            minmax(0,1fr)
            12px;
    }

    .news-thumb {
        width: 55px;
        height: 45px;
    }

    .news-title {
        font-size: 9px;
    }

    .news-meta {
        font-size: 7px;
    }

    .live-item {
        grid-template-columns:
            25px
            minmax(0,1fr)
            32px;
    }

    .team-name {
        max-width: 55px;
    }

    .transfer-item {

        grid-template-columns:
            19px
            31px
            minmax(0,1fr)
            48px;
    }

    .transfer-avatar {

        width: 31px;

        height: 35px;
    }

    .transfer-name {
        font-size: 8px;
    }

    .transfer-fee {
        font-size: 8px;
    }
}


/* =========================================================
   REDUCE MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        animation:
            none !important;

        transition:
            none !important;
    }
}


/* =========================================================
   HEADER NAV — PREMIUM RAISED GOLD HOVER
   Hanya menu utama: HOME, LIVESCORE, LIVE STREAM,
   TRANSFER MARKET, NEWS
   ========================================================= */

.main-nav .nav-link {
    position: relative;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;
    background: linear-gradient(
        145deg,
        rgba(255,255,255,.055),
        rgba(255,255,255,.015)
    );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        inset 0 -1px 0 rgba(0,0,0,.25),
        0 2px 5px rgba(0,0,0,.22);
    transition:
        color .2s ease,
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.main-nav .nav-link:hover {
    color: #ffd400;
    border-color: #ffd400;
    background: linear-gradient(
        145deg,
        rgba(255,212,0,.14),
        rgba(255,212,0,.035)
    );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        inset 0 -1px 0 rgba(0,0,0,.20),
        0 3px 0 rgba(0,0,0,.20),
        0 0 7px rgba(255,212,0,.65),
        0 0 15px rgba(255,212,0,.28);
    transform: translateY(-1px);
}

.main-nav .nav-link:hover span,
.main-nav .nav-link:hover b {
    color: #ffd400;
}

.main-nav .nav-link.active {
    border-color: var(--green);
}

.main-nav .nav-link.active:hover {
    border-color: #ffd400;
}

@media (max-width: 820px) {
    .main-nav .nav-link {
        border-radius: 9px;
    }
}

@media (max-width: 620px) {
    .main-nav .nav-link {
        border-radius: 8px;
    }
}

/* =========================================================
   FEATURE CARD PREMIUM HOVER BORDER
   LIVESCORE  = GREEN
   LIVE STREAM = RED
   TRANSFER   = BLUE
   NEWS       = GOLD
   ========================================================= */

/* Semua kartu */
.feature-card {
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}


/* =========================================================
   1. LIVESCORE — NEON GREEN
   ========================================================= */

.feature-card:nth-child(1):hover {
    border-color: #00ff88;

    box-shadow:
        0 0 0 1px rgba(0, 255, 136, 0.85),
        0 0 10px rgba(0, 255, 136, 0.55),
        0 0 24px rgba(0, 255, 136, 0.28);

    transform:
        translateY(-3px);
}


/* =========================================================
   2. LIVE STREAM — NEON RED
   ========================================================= */

.feature-card:nth-child(2):hover {
    border-color: #ff1744;

    box-shadow:
        0 0 0 1px rgba(255, 23, 68, 0.85),
        0 0 10px rgba(255, 23, 68, 0.55),
        0 0 24px rgba(255, 23, 68, 0.28);

    transform:
        translateY(-3px);
}


/* =========================================================
   3. TRANSFER MARKET — NEON BLUE
   ========================================================= */

.feature-card:nth-child(3):hover {
    border-color: #00aaff;

    box-shadow:
        0 0 0 1px rgba(0, 170, 255, 0.85),
        0 0 10px rgba(0, 170, 255, 0.55),
        0 0 24px rgba(0, 170, 255, 0.28);

    transform:
        translateY(-3px);
}


/* =========================================================
   4. NEWS — PREMIUM GOLD
   ========================================================= */

.feature-card:nth-child(4):hover {
    border-color: #ffd000;

    box-shadow:
        0 0 0 1px rgba(255, 208, 0, 0.90),
        0 0 10px rgba(255, 208, 0, 0.60),
        0 0 24px rgba(255, 208, 0, 0.32);

    transform:
        translateY(-3px);
}


/* =========================================================
   MOBILE
   Jangan membuat efek hover mengganggu layar sentuh
   ========================================================= */

@media (hover: none) {

    .feature-card:nth-child(1):hover,
    .feature-card:nth-child(2):hover,
    .feature-card:nth-child(3):hover,
    .feature-card:nth-child(4):hover {

        transform:
            none;
    }

    .feature-card:hover > img {
        transform:
            none;
    }

    .feature-card:hover .feature-arrow {
        transform:
            none;
        background:
            transparent;
        color:
            var(--feature-color);
    }

}

/* =========================================================
   LIVE NOW — TEAM NAME & LOGO
   FINAL SIZE
   ========================================================= */

.live-item .team-name {

    font-size:
        11px !important;

    font-weight:
        800;

    line-height:
        1.15;

}


.live-item .team-logo {

    width:
        26px !important;

    height:
        26px !important;

    min-width:
        26px;

    min-height:
        26px;

    flex:
        0 0 26px;

    object-fit:
        contain;

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .live-item .team-name {

        font-size:
            10px !important;

    }


    .live-item .team-logo {

        width:
            24px !important;

        height:
            24px !important;

        min-width:
            24px;

        min-height:
            24px;

        flex:
            0 0 24px;

    }

}


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

@media (max-width: 620px) {

    .live-item .team-name {

        font-size:
            9px !important;

    }


    .live-item .team-logo {

        width:
            23px !important;

        height:
            23px !important;

        min-width:
            23px;

        min-height:
            23px;

        flex:
            0 0 23px;

    }

}


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

@media (max-width: 380px) {

    .live-item .team-name {

        font-size:
            8.5px !important;

    }


    .live-item .team-logo {

        width:
            21px !important;

        height:
            21px !important;

        min-width:
            21px;

        min-height:
            21px;

        flex:
            0 0 21px;

    }

}


/* =========================================================
   LIVE NOW — LONG TEAM NAME FIX
   Nama tim panjang tidak lagi terpotong
   Layout utama tidak diubah
   ========================================================= */

.live-item .team {

    min-width:
        0;

}


.live-item .team-name {

    display:
        block;

    max-width:
        115px;

    font-size:
        11px !important;

    font-weight:
        800;

    line-height:
        1.15;

    white-space:
        normal !important;

    overflow:
        visible !important;

    text-overflow:
        clip !important;

    overflow-wrap:
        break-word;

    word-break:
        normal;

}


/* =========================================================
   TEAM HOME / AWAY
   ========================================================= */

.live-item .team.home,
.live-item .team.away {

    min-width:
        0;

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .live-item .team-name {

        max-width:
            105px;

        font-size:
            10px !important;

        white-space:
            normal !important;

    }

}


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

@media (max-width: 620px) {

    .live-item .team-name {

        max-width:
            95px;

        font-size:
            9px !important;

        white-space:
            normal !important;

    }

}


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

@media (max-width: 380px) {

    .live-item .team-name {

        max-width:
            85px;

        font-size:
            8.5px !important;

        white-space:
            normal !important;

    }

}


/* =========================================================
   TOP NEWS — RADAR LIVESCORE / BBC SPORT / DATE
   ========================================================= */

/* Radar Livescore */
#home-news .news-brand {
    display: block;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 600;
    color: #00a86b;
    margin: 0 0 2px 0;
}

/* Judul berita */
#home-news .news-title {
    display: block;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 600;
    color: var(--text);
}

/* BBC Sport */
#home-news .news-source {
    font-size: 10px;
    line-height: 1.2;
    font-weight: 500;
    color: #00a86b;
}

/* Tanggal */
#home-news .news-date {
    font-size: 10px;
    line-height: 1.2;
    font-weight: 500;
    color: #00a86b;
}

/* Titik pemisah */
#home-news .news-separator {
    color: #00a86b;
    font-size: 10px;
    font-weight: 500;
    margin: 0 3px;
}

/* Meta */
#home-news .news-meta {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 2px;
}

/* Jangan tambahkan teks melalui pseudo-element */
#home-news .news-brand::before,
#home-news .news-brand::after,
#home-news .news-title::before,
#home-news .news-title::after,
#home-news .news-meta::before,
#home-news .news-meta::after {
    content: none !important;
}


/* =========================================================
   TOP TRANSFERS — FINAL LAYOUT
   HANYA UNTUK TOP TRANSFERS
   ========================================================= */

#home-transfers {
    width: 100%;
}

/* =========================================================
   TRANSFER ITEM
   ========================================================= */

#home-transfers .transfer-item {
    display: grid;
    grid-template-columns:
        28px
        minmax(150px, 1.6fr)
        minmax(75px, 0.9fr)
        22px
        minmax(75px, 0.9fr)
        82px
        58px;

    align-items: center;
    gap: 6px;

    min-height: 66px;
    padding: 7px 4px;

    border-bottom: 1px solid #e1e8ef;

    text-decoration: none;
    color: inherit;

    box-sizing: border-box;
}

#home-transfers .transfer-item:last-child {
    border-bottom: none;
}


/* =========================================================
   RANK
   ========================================================= */

#home-transfers .transfer-rank {
    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 6px;

    background: #edf6ff;
    color: #1683df;

    font-size: 9px;
    font-weight: 700;
}


/* =========================================================
   PLAYER
   ========================================================= */

#home-transfers .transfer-player {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 7px;
}

#home-transfers .transfer-player-photo {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    object-fit: cover;

    border-radius: 50%;

    background: #eef2f6;
}

#home-transfers .transfer-player-info {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

#home-transfers .transfer-player-name {
    display: block;

    max-width: 100%;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 10px;
    line-height: 1.2;
    font-weight: 700;

    color: #111827;
}

#home-transfers .transfer-player-details {
    display: flex;
    align-items: center;
    gap: 3px;

    margin-top: 2px;

    font-size: 8px;
    line-height: 1.2;

    color: #7b8794;
}

#home-transfers .transfer-position {
    color: #1683df;
    font-weight: 600;
}

#home-transfers .transfer-detail-dot {
    color: #aab4bf;
}


/* =========================================================
   CLUB
   ========================================================= */

#home-transfers .transfer-club {
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 2px;

    text-align: center;
}

#home-transfers .transfer-club-logo {
    width: 21px;
    height: 21px;

    object-fit: contain;
}

#home-transfers .transfer-club-empty {
    width: 21px;
    height: 21px;
}

#home-transfers .transfer-club-name {
    width: 100%;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 7px;
    line-height: 1.2;
    font-weight: 600;

    color: #596575;
}


/* =========================================================
   ARROW
   ========================================================= */

#home-transfers .transfer-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 15px;
    font-weight: 600;

    color: #697789;
}


/* =========================================================
   DATE
   ========================================================= */

#home-transfers .transfer-date {
    text-align: center;

    font-size: 7px;
    line-height: 1.2;

    color: #7b8794;

    white-space: nowrap;
}


/* =========================================================
   FEE
   ========================================================= */

#home-transfers .transfer-fee {
    text-align: right;

    font-size: 8px;
    line-height: 1.2;
    font-weight: 700;

    color: #00a86b;

    white-space: nowrap;
}


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

@media (max-width: 900px) {

    #home-transfers .transfer-item {
        grid-template-columns:
            24px
            minmax(120px, 1.5fr)
            55px
            18px
            55px
            65px
            48px;

        gap: 4px;
    }

    #home-transfers .transfer-player-photo {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    #home-transfers .transfer-player-name {
        font-size: 9px;
    }

}

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

#home-transfers .transfer-head {
    display: grid;

    grid-template-columns:
        22px
        minmax(135px, 1.7fr)
        55px
        18px
        55px
        68px
        58px;

    align-items: center;

    gap: 4px;

    min-height: 28px;

    padding: 0 4px;

    box-sizing: border-box;

    border-bottom: 1px solid #e1e8ef;

    color: #687789;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: .2px;
}


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

#home-transfers .transfer-item {
    display: grid;

    grid-template-columns:
        22px
        minmax(135px, 1.7fr)
        55px
        18px
        55px
        68px
        58px;

    align-items: center;

    gap: 4px;

    min-height: 65px;

    padding: 6px 4px;

    box-sizing: border-box;

    border-bottom: 1px solid #e1e8ef;

    text-decoration: none;

    color: inherit;
}


#home-transfers .transfer-item:last-child {
    border-bottom: none;
}


/* =========================================================
   RANK
   ========================================================= */

#home-transfers .transfer-rank {
    width: 22px;
    height: 22px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 5px;

    background: #edf6ff;

    color: #1683df;

    font-size: 8px;

    font-weight: 700;
}


/* =========================================================
   PLAYER
   ========================================================= */

#home-transfers .transfer-player {
    min-width: 0;

    display: flex;

    align-items: center;

    gap: 6px;
}


#home-transfers .transfer-player-photo {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    object-fit: cover;

    border-radius: 50%;

    background: #eef2f6;
}


#home-transfers .transfer-player-info {
    min-width: 0;

    display: flex;

    flex-direction: column;
}


#home-transfers .transfer-player-name {
    display: block;

    max-width: 100%;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 9px;

    line-height: 1.2;

    font-weight: 700;

    color: #111827;
}


#home-transfers .transfer-player-details {
    display: flex;

    align-items: center;

    gap: 3px;

    margin-top: 2px;

    min-width: 0;

    font-size: 7px;

    line-height: 1.2;

    white-space: nowrap;

    overflow: hidden;
}


#home-transfers .transfer-country {
    overflow: hidden;

    text-overflow: ellipsis;

    color: #7b8794;
}


#home-transfers .transfer-position {
    color: #1683df;

    font-weight: 600;
}


#home-transfers .transfer-detail-dot {
    color: #aab4bf;
}


/* =========================================================
   CLUB
   ========================================================= */

#home-transfers .transfer-club {
    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 2px;

    text-align: center;
}

#home-transfers .transfer-club-empty {
    width: 21px;
    height: 21px;
}


#home-transfers .transfer-club-name {
    width: 100%;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 7px;

    line-height: 1.2;

    font-weight: 600;

    color: #596575;
}


/* =========================================================
   ARROW
   ========================================================= */

#home-transfers .transfer-arrow {
    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 13px;

    font-weight: 600;

    color: #697789;
}


/* =========================================================
   DATE
   ========================================================= */

#home-transfers .transfer-date {
    text-align: center;

    font-size: 7px;

    line-height: 1.2;

    color: #7b8794;

    white-space: nowrap;
}


/* =========================================================
   FEE
   ========================================================= */

#home-transfers .transfer-fee {
    text-align: right;

    font-size: 8px;

    line-height: 1.2;

    font-weight: 700;

    color: #00a86b;

    white-space: nowrap;
}


/* =========================================================
   SMALL SCREEN
   ========================================================= */

@media (max-width: 900px) {

    #home-transfers .transfer-head,
    #home-transfers .transfer-item {
        grid-template-columns:
            20px
            minmax(115px, 1.6fr)
            48px
            16px
            48px
            58px
            50px;

        gap: 3px;
    }


    #home-transfers .transfer-player-photo {
        width: 34px;
        height: 34px;

        flex-basis: 34px;
    }


    #home-transfers .transfer-player-name {
        font-size: 8px;
    }

}


/* =========================================================
   TOP TRANSFERS — 4 PEMAIN TERMAHAL
   FINAL COLUMN ALIGNMENT
   ========================================================= */

#home-transfers .transfer-head {
    display: grid;

    grid-template-columns:
        22px
        minmax(125px, 1fr)
        48px
        18px
        48px
        62px
        55px;

    align-items: center;

    gap: 3px;

    min-height: 27px;

    padding: 0 3px;

    box-sizing: border-box;

    border-bottom: 1px solid #e1e8ef;

    color: #687789;

    font-size: 7px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: .2px;
}


#home-transfers .transfer-head span {
    white-space: nowrap;
}


#home-transfers .transfer-head span:nth-child(2),
#home-transfers .transfer-head span:nth-child(3) {
    text-align: center;
}


#home-transfers .transfer-head span:nth-child(4) {
    display: none;
}


#home-transfers .transfer-head span:nth-child(5) {
    text-align: right;
}


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

#home-transfers .transfer-item {
    display: grid;

    grid-template-columns:
        22px
        minmax(125px, 1fr)
        48px
        18px
        48px
        62px
        55px;

    align-items: center;

    gap: 3px;

    min-height: 63px;

    padding: 5px 3px;

    box-sizing: border-box;

    border-bottom: 1px solid #e1e8ef;

    text-decoration: none;

    color: inherit;
}


#home-transfers .transfer-item:last-child {
    border-bottom: none;
}


/* =========================================================
   RANK
   ========================================================= */

#home-transfers .transfer-rank {
    width: 21px;
    height: 21px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 5px;

    background: #edf6ff;

    color: #1683df;

    font-size: 8px;

    font-weight: 700;
}


/* =========================================================
   PLAYER
   ========================================================= */

#home-transfers .transfer-player {
    min-width: 0;

    display: flex;

    align-items: center;

    gap: 5px;
}


#home-transfers .transfer-player-photo {
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    object-fit: cover;

    border-radius: 50%;

    background: #eef2f6;
}


#home-transfers .transfer-player-info {
    min-width: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;
}


#home-transfers .transfer-player-name {
    display: block;

    max-width: 100%;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 8px;

    line-height: 1.2;

    font-weight: 700;

    color: #111827;
}


#home-transfers .transfer-player-details {
    display: flex;

    align-items: center;

    gap: 3px;

    margin-top: 2px;

    min-width: 0;

    font-size: 6.5px;

    line-height: 1.2;

    white-space: nowrap;

    overflow: hidden;
}


#home-transfers .transfer-country {
    overflow: hidden;

    text-overflow: ellipsis;

    color: #7b8794;
}


#home-transfers .transfer-position {
    color: #1683df;

    font-weight: 600;
}


#home-transfers .transfer-detail-dot {
    color: #aab4bf;
}


/* =========================================================
   CLUB
   ========================================================= */

#home-transfers .transfer-club {
    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 2px;

    text-align: center;
}


#home-transfers .transfer-club-logo {
    width: 20px;
    height: 20px;

    object-fit: contain;
}


#home-transfers .transfer-club-empty {
    width: 20px;
    height: 20px;
}


#home-transfers .transfer-club-name {
    width: 100%;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 6px;

    line-height: 1.15;

    font-weight: 600;

    color: #596575;
}


/* =========================================================
   ARROW
   ========================================================= */

#home-transfers .transfer-arrow {
    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 12px;

    font-weight: 600;

    color: #697789;
}


/* =========================================================
   DATE
   ========================================================= */

#home-transfers .transfer-date {
    text-align: center;

    font-size: 6.5px;

    line-height: 1.2;

    color: #7b8794;

    white-space: nowrap;
}


/* =========================================================
   FEE / HARGA TRANSFER
   ========================================================= */

#home-transfers .transfer-fee {
    display: block;

    text-align: right;

    font-size: 7.5px;

    line-height: 1.2;

    font-weight: 700;

    color: #00a86b;

    white-space: nowrap;
}


/* =========================================================
   LOAN / FREE
   ========================================================= */

#home-transfers .transfer-fee:empty {
    display: none;
}



/* =========================================================
   TOP TRANSFERS - FINAL LAYOUT
   ========================================================= */

#home-transfers {
    width: 100%;
    overflow: hidden;
}


/* TABLE HEADER */

#home-transfers .transfer-table-header {

    display: grid;

    grid-template-columns:
        minmax(145px, 1.8fr)
        minmax(95px, 1fr)
        28px
        minmax(105px, 1fr)
        75px;

    align-items: center;

    min-height: 34px;

    padding:
        0 8px
        0 8px;

    border-bottom:
        1px solid
        rgba(20, 45, 75, 0.10);

    font-size: 7px;

    font-weight: 700;

    letter-spacing: .05em;

    color: #718096;

    text-transform: uppercase;

    box-sizing: border-box;
}


/* TRANSFER ROW */

#home-transfers .transfer-item {

    display: grid;

    grid-template-columns:
        24px
        minmax(120px, 1.8fr)
        minmax(90px, 1fr)
        24px
        minmax(95px, 1fr)
        68px;

    align-items: center;

    min-height: 55px;

    padding:
        5px 8px;

    box-sizing: border-box;

    text-decoration: none;

    color: inherit;

    border-bottom:
        1px solid
        rgba(20, 45, 75, 0.08);

    transition:
        background .15s ease;
}


#home-transfers .transfer-item:hover {

    background:
        rgba(0, 170, 120, 0.035);

}


/* RANK */

#home-transfers .transfer-rank {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 20px;

    height: 20px;

    border-radius: 6px;

    background:
        #f1f7fb;

    color:
        #1683d8;

    font-size: 7px;

    font-weight: 800;

}


/* PLAYER */

#home-transfers .transfer-player {

    display: flex;

    align-items: center;

    gap: 7px;

    min-width: 0;

}


#home-transfers .transfer-player-photo {

    width: 32px;

    height: 32px;

    flex: 0 0 32px;

    border-radius: 50%;

    object-fit: cover;

    background:
        #edf2f7;

    border:
        1px solid
        rgba(20, 45, 75, 0.10);

}


#home-transfers .transfer-player-info {

    min-width: 0;

    overflow: hidden;

}


#home-transfers .transfer-player-name {

    display: block;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 8px;

    line-height: 1.25;

    font-weight: 700;

    color: #182b3c;

}


/* CLUB */

#home-transfers .transfer-club {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 5px;

    min-width: 0;

}


#home-transfers .transfer-club-logo {

    width: 22px;

    height: 22px;

    flex: 0 0 22px;

    object-fit: contain;

}


#home-transfers .transfer-club-name {

    min-width: 0;

    max-width: 72px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 7px;

    line-height: 1.15;

    font-weight: 600;

    color: #475569;

}


/* ARROW */

#home-transfers .transfer-arrow {

    display: flex;

    align-items: center;

    justify-content: center;

    color: #64748b;

    font-size: 12px;

    font-weight: 700;

}


/* DATE */

#home-transfers .transfer-date {

    text-align: right;

    white-space: nowrap;

    font-size: 6.5px;

    font-weight: 500;

    color: #94a3b8;

}


/* EMPTY LOGO */

#home-transfers .transfer-club-empty {

    width: 22px;

    height: 22px;

    flex: 0 0 22px;

}


/* REMOVE OLD FEE */

#home-transfers .transfer-fee {

    display: none !important;

}


/* FOOTER FROM ORIGINAL HTML */

#home-transfers + .section-footer-button {

    margin-top: 8px;

}


/* MOBILE / NARROW CARD */

@media (max-width: 900px) {

    #home-transfers .transfer-table-header {

        grid-template-columns:
            minmax(120px, 1.6fr)
            minmax(75px, 1fr)
            22px
            minmax(80px, 1fr)
            62px;

    }


    #home-transfers .transfer-item {

        grid-template-columns:
            22px
            minmax(110px, 1.6fr)
            minmax(75px, 1fr)
            22px
            minmax(80px, 1fr)
            62px;

    }

}

/* =========================================================
   DARK MODE — TOP NEWS
   WHITE + EXTRA BOLD
   ========================================================= */

html[data-theme="dark"] #home-news .news-title {
    color: #ffffff !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}

html[data-theme="dark"] #home-news .news-brand {
    color: #25d69f !important;
    font-weight: 800 !important;
}

html[data-theme="dark"] #home-news .news-source,
html[data-theme="dark"] #home-news .news-date,
html[data-theme="dark"] #home-news .news-separator {
    color: #25d69f !important;
    font-weight: 700 !important;
}

html[data-theme="dark"] .news-panel .panel-header h2 {
    color: #ffffff !important;
    font-weight: 900 !important;
}


/* =========================================================
   DARK MODE — TOP TRANSFERS
   WHITE + EXTRA BOLD
   ========================================================= */

html[data-theme="dark"] #home-transfers .transfer-player-name {
    color: #ffffff !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}

html[data-theme="dark"] #home-transfers .transfer-club-name {
    color: #ffffff !important;
    font-weight: 800 !important;
}

html[data-theme="dark"] #home-transfers .transfer-date {
    color: #ffffff !important;
    font-weight: 700 !important;
}

html[data-theme="dark"] #home-transfers .transfer-arrow {
    color: #ffffff !important;
    font-weight: 900 !important;
}

html[data-theme="dark"] #home-transfers .transfer-table-header {
    color: #ffffff !important;
    font-weight: 900 !important;
}

html[data-theme="dark"] #home-transfers .transfer-table-header span {
    color: #ffffff !important;
    font-weight: 900 !important;
}

html[data-theme="dark"] .transfer-panel .panel-header h2 {
    color: #ffffff !important;
    font-weight: 900 !important;
}


/* =========================================================
   TOP TRANSFERS — RANK
   ========================================================= */

html[data-theme="dark"] #home-transfers .transfer-rank {
    color: #ffffff !important;
    font-weight: 900 !important;
}


/* =========================================================
   TOP NEWS — LINK TITLE
   ========================================================= */

html[data-theme="dark"] #home-news .news-item,
html[data-theme="dark"] #home-news .news-content {
    color: #ffffff !important;
}


/* =========================================================
   EXTRA PREMIUM CONTRAST
   ========================================================= */

html[data-theme="dark"] #home-news .news-title,
html[data-theme="dark"] #home-transfers .transfer-player-name,
html[data-theme="dark"] #home-transfers .transfer-club-name {
    letter-spacing: 0.1px;
    -webkit-font-smoothing: antialiased;
}

/* =========================================================
   TOP TRANSFERS — PREMIUM DARK RANK
   ========================================================= */

#home-transfers .transfer-rank {
    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #1a2d43 0%,
            #0b1727 55%,
            #07111e 100%
        ) !important;

    border: 1px solid rgba(75, 120, 160, 0.35);

    border-radius: 6px;

    color: #e7f0f8 !important;

    font-size: 9px;
    font-weight: 900;

    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.07),
        inset 0 -1px 2px rgba(0, 0, 0, 0.45),
        0 3px 8px rgba(0, 0, 0, 0.30);

    transition:
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

#home-transfers .transfer-item:hover .transfer-rank {
    border-color: rgba(37, 214, 159, 0.55);

    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.08),
        0 0 10px rgba(37, 214, 159, 0.12);

    transform: translateY(-1px);
}

/* =========================================================
   TOP TRANSFERS — CLEAN PREMIUM LAYOUT
   ========================================================= */

/* Hilangkan header PLAYER / FROM / TO / DATE */
#home-transfers .transfer-header {
    display: none !important;
}

/* Jika header dibuat sebagai baris pertama */
#home-transfers .transfers-header {
    display: none !important;
}


/* =========================================================
   UKURAN BARIS TRANSFER
   ========================================================= */

#home-transfers .transfer-item {
    min-height: 52px !important;

    height: 52px !important;

    display: grid !important;
    align-items: center !important;

    padding: 6px 4px !important;

    box-sizing: border-box;
}


/* =========================================================
   RANK 01 / 02 / 03 / 04
   ========================================================= */

#home-transfers .transfer-rank {
    width: 24px !important;
    height: 24px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background:
        linear-gradient(
            145deg,
            #16283d,
            #081421
        ) !important;

    border: 1px solid rgba(255,255,255,.10) !important;

    border-radius: 6px !important;

    color: #ffffff !important;

    font-size: 9px !important;
    font-weight: 900 !important;
}


/* =========================================================
   FOTO PEMAIN
   ========================================================= */

#home-transfers .transfer-player img {
    width: 34px !important;
    height: 34px !important;

    min-width: 34px !important;
    min-height: 34px !important;

    max-width: 34px !important;
    max-height: 34px !important;

    object-fit: cover !important;

    border-radius: 50% !important;

    display: block !important;
}


/* =========================================================
   NAMA PEMAIN
   ========================================================= */

#home-transfers .transfer-player-name {
    font-size: 10px !important;

    font-weight: 800 !important;

    line-height: 1.2 !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;
}


/* =========================================================
   LOGO KLUB
   ========================================================= */

#home-transfers .transfer-team img {
    width: 27px !important;
    height: 27px !important;

    min-width: 27px !important;
    min-height: 27px !important;

    max-width: 27px !important;
    max-height: 27px !important;

    object-fit: contain !important;

    display: block !important;
}


/* =========================================================
   NAMA KLUB
   ========================================================= */

#home-transfers .transfer-team-name {
    font-size: 8px !important;

    font-weight: 700 !important;

    line-height: 1.1 !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;
}


/* =========================================================
   PANAH TRANSFER
   ========================================================= */

#home-transfers .transfer-arrow {
    font-size: 14px !important;

    font-weight: 800 !important;

    text-align: center !important;
}


/* =========================================================
   TANGGAL
   ========================================================= */

#home-transfers .transfer-date {
    font-size: 8px !important;

    font-weight: 700 !important;

    white-space: nowrap !important;
}

/* =========================================================
   TOP NEWS - JUDUL BERITA LEBIH KECIL
   ========================================================= */

.top-news .news-title,
.top-news .news-item-title,
.top-news .news-content strong,
.top-news .news-content h3,
.news-title {
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: -0.15px;
}

/* Supaya judul tidak keluar dari area */
.top-news .news-item,
.top-news .news-content {
    min-width: 0;
    overflow: hidden;
}

/* Batasi judul maksimal 2 baris */
.top-news .news-title,
.top-news .news-item-title,
.top-news .news-content strong,
.top-news .news-content h3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* Ukuran gambar berita tetap rapi */
.top-news .news-image,
.top-news img {
    flex-shrink: 0;
}

/* TOP NEWS TITLE */
.news-card .news-title,
.news-list .news-title,
.news-item .news-title,
.news-content .news-title,
.news-item strong {
    font-size: 10px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    letter-spacing: -0.1px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* =========================================================
   PATCH #13
   TOUCHSCREEN HOVER SAFETY
   Desktop tetap memiliki hover
   Touchscreen tidak mendapatkan efek hover palsu
   ========================================================= */

@media (hover: none) {

    /* HERO ARROW */
    .hero-arrow:hover {
        background:
            rgba(2,10,22,.42);

        transform:
            translateY(-50%);
    }

    /* PANEL BUTTON */
.panel-button:hover {
    background:
        transparent;

    border-color:
        rgba(8,168,117,.55);

    box-shadow:
        none;

    transform:
        none;
}

}

/* =========================================================
   PATCH #15
   NAV TOUCHSCREEN SAFETY
   Desktop hover tetap aktif
   ========================================================= */

@media (hover: none) {

    .main-nav .nav-link:hover {
        color: #eaf2fb;
        border-color: rgba(255,255,255,.14);

        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.055),
                rgba(255,255,255,.015)
            );

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.10),
            inset 0 -1px 0 rgba(0,0,0,.25),
            0 2px 5px rgba(0,0,0,.22);

        transform: none;
    }

    .main-nav .nav-link:hover span,
    .main-nav .nav-link:hover b {
        color: #eaf2fb;
    }

    .main-nav .nav-link.active:hover {
        border-color: var(--green);
    }

}
/* =========================================================
   RADAR LIVESCORE — MATCH UI
   Dedicated styles for livescore.js
   ========================================================= */

.matches-area {
  width: 100%;
  min-width: 0;
  padding: 14px;
  box-sizing: border-box;
}

.livescore-league {
  width: 100%;
  margin: 0 0 14px;
  background: #fff;
  border: 1px solid rgba(15, 42, 68, .10);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(15, 42, 68, .06);
}

.livescore-league-header {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 14px;
  box-sizing: border-box;
  background: #f4f8fc;
  border-bottom: 1px solid rgba(15, 42, 68, .08);
}

.livescore-league-header img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex: 0 0 30px;
}

.livescore-league-title {
  min-width: 0;
  flex: 1;
}

.livescore-league-name {
  font-size: 13px;
  line-height: 1.25;
  font-weight: 800;
  color: #102b46;
}

.livescore-league-country {
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.2;
  color: #7b8b9b;
}

.livescore-match-card {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 70px;
  align-items: center;
  gap: 10px;
  min-height: 76px;
  padding: 10px 14px;
  box-sizing: border-box;
  background: #fff;
  border-bottom: 1px solid #edf1f5;
  transition: background .15s ease;
}

.livescore-match-card:last-child {
  border-bottom: 0;
}

.livescore-match-card:hover {
  background: #f8fbfe;
}

.livescore-status {
  text-align: center;
  font-size: 10px;
  line-height: 1.3;
  font-weight: 800;
  color: #718093;
}

.livescore-status.live {
  color: #d62828;
}

.livescore-status.live::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 4px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
}

.livescore-status.finished {
  color: #526273;
}

.livescore-status.upcoming {
  color: #2878b8;
}

.livescore-teams {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.livescore-team {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 24px;
}

.livescore-team img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex: 0 0 22px;
}

.livescore-team-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 700;
  color: #20354a;
}

.livescore-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
  color: #102b46;
}

.livescore-score span {
  min-width: 22px;
  text-align: center;
}

.livescore-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 30px 20px;
  box-sizing: border-box;
  text-align: center;
  color: #718093;
  background: #fff;
  border: 1px solid rgba(15, 42, 68, .08);
  border-radius: 10px;
}

.livescore-empty-icon {
  margin-bottom: 8px;
  font-size: 32px;
}

.livescore-empty-title {
  font-size: 14px;
  font-weight: 800;
  color: #34495e;
}

.livescore-empty-text {
  margin-top: 5px;
  font-size: 11px;
}

/* Livescore loading state */
.matches-area .loading-state {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}

/* Mobile */
@media (max-width: 700px) {
  .matches-area {
    padding: 8px;
  }

  .livescore-league {
    margin-bottom: 10px;
    border-radius: 8px;
  }

  .livescore-league-header {
    min-height: 44px;
    padding: 7px 10px;
  }

  .livescore-league-header img {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
  }

  .livescore-match-card {
    grid-template-columns: 54px minmax(0, 1fr) 46px;
    gap: 6px;
    min-height: 68px;
    padding: 8px 9px;
  }

  .livescore-team img {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
  }

  .livescore-team-name {
    font-size: 11px;
  }

  .livescore-score {
    font-size: 12px;
    gap: 6px;
  }
}

/* Very small screens */
@media (max-width: 420px) {
  .livescore-match-card {
    grid-template-columns: 48px minmax(0, 1fr) 40px;
    gap: 5px;
    padding-left: 7px;
    padding-right: 7px;
  }

  .livescore-status {
    font-size: 9px;
  }

  .livescore-team {
    gap: 6px;
  }

  .livescore-team img {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
  }

  .livescore-team-name {
    font-size: 10px;
  }

  .livescore-score {
    font-size: 11px;
  }
}


/* =========================================================
   RADAR LIVESCORE — ACTUAL JS STRUCTURE FIX
   Matches livescore.js classes exactly
   ========================================================= */

.matches-area .livescore-league {
  width: 100%;
  margin: 0 0 14px;
  background: #fff;
  border: 1px solid rgba(15, 42, 68, .10);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(15, 42, 68, .06);
}

.matches-area .livescore-league-header {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 14px;
  box-sizing: border-box;
  background: #f4f8fc;
  border-bottom: 1px solid #e5ebf1;
}

.matches-area .livescore-league-header img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex: 0 0 30px;
}

.matches-area .livescore-league-title {
  min-width: 0;
  flex: 1;
}

.matches-area .livescore-league-name {
  font-size: 13px;
  line-height: 1.25;
  font-weight: 800;
  color: #102b46;
}

.matches-area .livescore-league-country {
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.2;
  color: #7b8b9b;
}

/* MATCH ROW */
.matches-area .livescore-match-card {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 72px;
  padding: 9px 14px;
  box-sizing: border-box;
  background: #fff;
  border-bottom: 1px solid #edf1f5;
}

.matches-area .livescore-match-card:last-child {
  border-bottom: 0;
}

.matches-area .livescore-match-card:hover {
  background: #f8fbfe;
}

/* TIME / STATUS */
.matches-area .match-time-column {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  text-align: center;
}

.matches-area .match-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 800;
  white-space: nowrap;
}

.matches-area .match-status.live {
  color: #d62828;
}

.matches-area .match-status.finished {
  color: #596b7d;
}

.matches-area .match-status.upcoming {
  color: #2878b8;
}

.matches-area .live-dot {
  width: 6px;
  height: 6px;
  margin-right: 4px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 6px;
}

/* TEAMS CONTAINER */
.matches-area .match-teams {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* TEAM ROW */
.matches-area .match-team {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 30px;
  align-items: center;
  column-gap: 8px;
  min-width: 0;
  min-height: 25px;
}

/* TEAM LOGO */
.matches-area .match-team-logo {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
  margin: 0 auto;
}

/* FALLBACK LOGO */
.matches-area .match-team-logo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 16px;
}

/* TEAM NAME */
.matches-area .match-team-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 700;
  color: #20354a;
}

/* SCORE */
.matches-area .match-score {
  display: block;
  min-width: 30px;
  text-align: right;
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
  color: #102b46;
}

/* LIVE MATCH */
.matches-area .livescore-match-card.is-live {
  background: #fff;
}

.matches-area .livescore-match-card.is-live .match-score {
  color: #102b46;
}

.matches-area .livescore-match-card.is-live .match-team-name {
  font-weight: 800;
}

/* EMPTY */
.matches-area .livescore-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 30px 20px;
  box-sizing: border-box;
  text-align: center;
  color: #718093;
  background: #fff;
  border: 1px solid rgba(15, 42, 68, .08);
  border-radius: 10px;
}

.matches-area .livescore-empty-icon {
  margin-bottom: 8px;
  font-size: 32px;
}

.matches-area .livescore-empty-title {
  font-size: 14px;
  font-weight: 800;
  color: #34495e;
}

.matches-area .livescore-empty-text {
  margin-top: 5px;
  font-size: 11px;
}

/* MOBILE */
@media (max-width: 700px) {
  .matches-area {
    padding: 8px;
  }

  .matches-area .livescore-league {
    margin-bottom: 10px;
    border-radius: 8px;
  }

  .matches-area .livescore-league-header {
    min-height: 44px;
    padding: 7px 10px;
  }

  .matches-area .livescore-league-header img {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
  }

  .matches-area .livescore-match-card {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 8px;
    min-height: 66px;
    padding: 8px 9px;
  }

  .matches-area .match-team {
    grid-template-columns: 23px minmax(0, 1fr) 28px;
    column-gap: 7px;
  }

  .matches-area .match-team-logo {
    width: 21px;
    height: 21px;
  }

  .matches-area .match-team-logo-fallback {
    width: 21px;
    height: 21px;
    font-size: 14px;
  }

  .matches-area .match-team-name {
    font-size: 11px;
  }

  .matches-area .match-score {
    min-width: 28px;
    font-size: 12px;
  }

  .matches-area .match-status {
    min-width: 38px;
    font-size: 9px;
  }
}

@media (max-width: 420px) {
  .matches-area .livescore-match-card {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 6px;
    padding-left: 7px;
    padding-right: 7px;
  }

  .matches-area .match-team {
    grid-template-columns: 21px minmax(0, 1fr) 26px;
    column-gap: 6px;
  }

  .matches-area .match-team-logo {
    width: 19px;
    height: 19px;
  }

  .matches-area .match-team-logo-fallback {
    width: 19px;
    height: 19px;
    font-size: 13px;
  }

  .matches-area .match-team-name {
    font-size: 10px;
  }

  .matches-area .match-score {
    min-width: 26px;
    font-size: 11px;
  }

  .matches-area .match-status {
    min-width: 34px;
    font-size: 8px;
  }
}


/* =========================================================
   GLOBAL SEARCH — LIVESCORE
   Isolated component: does not modify existing header rules
   ========================================================= */

.global-search-box {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 1 250px;
    width: 250px;
    min-width: 180px;
    height: 38px;
    margin-left: 14px;
    z-index: 1000;
}

.global-search-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 20px;
    line-height: 1;
    opacity: 0.65;
    pointer-events: none;
    z-index: 2;
}

.global-search-box input {
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 0 42px 0 34px;
    border: 1px solid rgba(127, 127, 127, 0.25);
    border-radius: 10px;
    outline: none;
    background: rgba(127, 127, 127, 0.08);
    color: inherit;
    font: inherit;
    font-size: 13px;
    line-height: 1;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}

.global-search-box input::placeholder {
    opacity: 0.55;
}

.global-search-box input:hover {
    background: rgba(127, 127, 127, 0.11);
}

.global-search-box input:focus {
    border-color: currentColor;
    background: rgba(127, 127, 127, 0.12);
    box-shadow: 0 0 0 3px rgba(127, 127, 127, 0.08);
}

.global-search-button {
    position: absolute;
    right: 4px;
    top: 4px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: inherit;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.75;
    transition:
        background 0.18s ease,
        opacity 0.18s ease;
}

.global-search-button:hover {
    background: rgba(127, 127, 127, 0.12);
    opacity: 1;
}

.global-search-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

/* Search result dropdown */

.global-search-results {
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    right: 0;
    display: none;
    max-height: 390px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid rgba(127, 127, 127, 0.22);
    border-radius: 12px;
    background: var(--panel-bg, #ffffff);
    color: inherit;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.16);
    z-index: 1100;
}

.global-search-results:not(:empty) {
    display: block;
}

.global-search-results::-webkit-scrollbar {
    width: 6px;
}

.global-search-results::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(127, 127, 127, 0.3);
}

/* Individual result items created by Search JS */

.global-search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 8px 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
}

.global-search-item:hover,
.global-search-item:focus-visible {
    background: rgba(127, 127, 127, 0.10);
    outline: none;
}

.global-search-item img {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    object-fit: contain;
    border-radius: 50%;
}

.global-search-item-info {
    min-width: 0;
    flex: 1;
}

.global-search-item-name {
    display: block;
    overflow: hidden;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.global-search-item-meta {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.25;
    opacity: 0.6;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Search state messages */

.global-search-message {
    padding: 14px 12px;
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
    opacity: 0.65;
}

/* Tablet */

@media (max-width: 1000px) {
    .global-search-box {
        flex-basis: 210px;
        width: 210px;
        min-width: 160px;
        margin-left: 10px;
    }
}

/* Small tablet / mobile header */

@media (max-width: 820px) {
    .global-search-box {
        flex: 0 1 190px;
        width: 190px;
        min-width: 145px;
    }

    .global-search-box input {
        font-size: 12px;
    }
}

/* Mobile */

@media (max-width: 620px) {
    .global-search-box {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        max-width: none;
        height: 36px;
        margin-left: 8px;
        margin-right: 8px;
    }

    .global-search-box input {
        padding-left: 32px;
        padding-right: 38px;
    }

    .global-search-results {
        position: fixed;
        top: 58px;
        left: 10px;
        right: 10px;
        width: auto;
        max-height: min(60vh, 390px);
    }
}

/* Very small phones */

@media (max-width: 380px) {
    .global-search-box {
        height: 34px;
        margin-left: 5px;
        margin-right: 5px;
    }

    .global-search-icon {
        left: 9px;
        font-size: 18px;
    }

    .global-search-box input {
        padding-left: 29px;
        padding-right: 35px;
        font-size: 11px;
    }

    .global-search-button {
        right: 3px;
        top: 3px;
        width: 28px;
        height: 28px;
        font-size: 13px;
    }
}


/* =========================================================
   SEARCH PREMIUM FINAL OVERRIDE
   WHITE / BOLD / LIGHT + DARK MODE
   ========================================================= */

/* SEARCH TEXT */
.global-search-box input {
    color: #ffffff !important;
    font-weight: 800 !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.global-search-box input::placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
    font-weight: 800 !important;
}

/* SEARCH ICON */
.global-search-icon {
    color: #ffffff !important;
    font-weight: 900 !important;
    opacity: 1 !important;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.45);
}

/* SEARCH BUTTON ICON */
.global-search-button {
    color: #ffffff !important;
    font-weight: 900 !important;
    opacity: 1 !important;
}

/* SEARCH FOCUS */
.global-search-box input:focus {
    color: #ffffff !important;
}

.global-search-box input:focus::placeholder {
    color: #ffffff !important;
    opacity: 0.9 !important;
}

/* =========================================================
   LIGHT MODE
   ========================================================= */

body:not(.dark) .global-search-box input,
html:not(.dark) .global-search-box input {
    color: #ffffff !important;
}

body:not(.dark) .global-search-box input::placeholder,
html:not(.dark) .global-search-box input::placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
}

body:not(.dark) .global-search-icon,
html:not(.dark) .global-search-icon,
body:not(.dark) .global-search-button,
html:not(.dark) .global-search-button {
    color: #ffffff !important;
}

/* =========================================================
   DARK MODE
   ========================================================= */

body.dark .global-search-box input,
[data-theme="dark"] .global-search-box input,
html.dark .global-search-box input {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.07);
}

body.dark .global-search-box input::placeholder,
[data-theme="dark"] .global-search-box input::placeholder,
html.dark .global-search-box input::placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
}

body.dark .global-search-icon,
[data-theme="dark"] .global-search-icon,
html.dark .global-search-icon,
body.dark .global-search-button,
[data-theme="dark"] .global-search-button,
html.dark .global-search-button {
    color: #ffffff !important;
}

/* =========================================================
   PC
   ========================================================= */

@media (min-width: 1200px) {

    .global-search-box {
        width: 260px;
        flex-basis: 260px;
        height: 40px;
    }

    .global-search-box input {
        font-size: 13px !important;
        font-weight: 800 !important;
    }

    .global-search-icon {
        font-size: 21px !important;
    }

}

/* =========================================================
   LAPTOP
   1001px - 1199px
   ========================================================= */

@media (max-width: 1199px) and (min-width: 1001px) {

    .global-search-box {
        width: 230px;
        flex-basis: 230px;
        min-width: 190px;
        height: 39px;
    }

    .global-search-box input {
        font-size: 12.5px !important;
    }

}

/* =========================================================
   TABLET
   821px - 1000px
   ========================================================= */

@media (max-width: 1000px) and (min-width: 821px) {

    .global-search-box {
        width: 205px;
        flex-basis: 205px;
        min-width: 165px;
        height: 37px;
    }

    .global-search-box input {
        font-size: 12px !important;
        font-weight: 800 !important;
    }

    .global-search-icon {
        font-size: 19px !important;
    }

}

/* =========================================================
   SMALL TABLET
   621px - 820px
   ========================================================= */

@media (max-width: 820px) and (min-width: 621px) {

    .global-search-box {
        width: 185px;
        flex-basis: 185px;
        min-width: 145px;
        height: 36px;
    }

    .global-search-box input {
        padding-left: 31px !important;
        padding-right: 37px !important;
        font-size: 12px !important;
    }

    .global-search-icon {
        left: 9px;
        font-size: 18px !important;
    }

}

/* =========================================================
   MOBILE
   481px - 620px
   ========================================================= */

@media (max-width: 620px) and (min-width: 481px) {

    .global-search-box {
        width: auto;
        max-width: none;
        min-width: 0;
        flex: 1 1 auto;
        height: 36px;
    }

    .global-search-box input {
        padding-left: 31px !important;
        padding-right: 38px !important;
        font-size: 12px !important;
    }

    .global-search-results {
        position: fixed;
        top: 58px;
        left: 10px;
        right: 10px;
        width: auto;
        max-height: min(60vh, 390px);
    }

}

/* =========================================================
   MOBILE
   381px - 480px
   ========================================================= */

@media (max-width: 480px) and (min-width: 381px) {

    .global-search-box {
        width: auto;
        min-width: 0;
        flex: 1 1 auto;
        height: 35px;
    }

    .global-search-box input {
        padding-left: 30px !important;
        padding-right: 36px !important;
        font-size: 11.5px !important;
    }

    .global-search-icon {
        left: 8px;
        font-size: 18px !important;
    }

    .global-search-button {
        right: 3px;
        top: 3px;
        width: 29px;
        height: 29px;
        font-size: 13px !important;
    }

    .global-search-results {
        position: fixed;
        top: 56px;
        left: 8px;
        right: 8px;
        width: auto;
        max-height: 60vh;
    }

}

/* =========================================================
   SMALL PHONE
   <= 380px
   ========================================================= */

@media (max-width: 380px) {

    .global-search-box {
        width: auto;
        min-width: 0;
        flex: 1 1 auto;
        height: 34px;
        margin-left: 4px;
        margin-right: 4px;
    }

    .global-search-box input {
        padding-left: 28px !important;
        padding-right: 34px !important;
        font-size: 10.5px !important;
        font-weight: 800 !important;
    }

    .global-search-icon {
        left: 7px;
        width: 16px;
        height: 16px;
        font-size: 17px !important;
    }

    .global-search-button {
        right: 3px;
        top: 3px;
        width: 28px;
        height: 28px;
        font-size: 12px !important;
    }

    .global-search-results {
        position: fixed;
        top: 54px;
        left: 6px;
        right: 6px;
        width: auto;
        max-height: 65vh;
    }

}

/* =========================================================
   TOUCH DEVICE
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

    .global-search-button {
        min-width: 30px;
        min-height: 30px;
    }

    .global-search-item {
        min-height: 48px;
    }

}


/* =========================================================
   GLOBAL SEARCH PROFILE — PREMIUM UI
   ========================================================= */

body.global-search-modal-open {
    overflow: hidden !important;
}

.global-search-profile-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity .2s ease,
        visibility .2s ease;
}

.global-search-profile-modal.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.global-search-profile-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.global-search-profile-dialog {
    position: relative;
    z-index: 2;
    width: min(720px, 100%);
    max-height: min(850px, calc(100vh - 48px));
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 24px;
    padding: 28px;
    background: #ffffff;
    color: #111827;
    border: 1px solid rgba(15, 23, 42, .10);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, .35),
        0 8px 30px rgba(0, 0, 0, .16);
    transform: translateY(18px) scale(.98);
    transition: transform .22s ease;
    scrollbar-width: thin;
}

.global-search-profile-modal.is-open
.global-search-profile-dialog {
    transform: translateY(0) scale(1);
}

.global-search-profile-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 5;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 23, 42, .07);
    color: #111827;
    font-size: 28px;
    line-height: 1;
    font-weight: 900;
    cursor: pointer;
    transition:
        transform .18s ease,
        background .18s ease;
}

.global-search-profile-close:hover {
    transform: rotate(90deg);
    background: rgba(15, 23, 42, .14);
}

.global-search-profile-close:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .35);
    outline-offset: 2px;
}

.global-search-profile-title {
    margin: 0 54px 20px 0;
    font-size: 12px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .55;
}

.global-search-profile-content {
    min-width: 0;
}

.global-search-profile-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
    margin-bottom: 24px;
    padding: 20px;
    border-radius: 20px;
    background:
        linear-gradient(
            135deg,
            rgba(37, 99, 235, .10),
            rgba(14, 165, 233, .05)
        );
    border: 1px solid rgba(37, 99, 235, .12);
}

.global-search-profile-hero.player {
    background:
        linear-gradient(
            135deg,
            rgba(124, 58, 237, .10),
            rgba(37, 99, 235, .05)
        );
    border-color: rgba(124, 58, 237, .12);
}

.global-search-profile-avatar {
    flex: 0 0 104px;
    width: 104px;
    height: 104px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 22px;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, .10);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .10);
}

.global-search-profile-avatar.team img {
    width: 76%;
    height: 76%;
    object-fit: contain;
}

.global-search-profile-avatar.player {
    border-radius: 50%;
}

.global-search-profile-avatar.player img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.global-search-profile-avatar span {
    font-size: 34px;
}

.global-search-profile-main {
    min-width: 0;
    padding-right: 44px;
}

.global-search-profile-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 4px 9px;
    margin-bottom: 8px;
    border-radius: 999px;
    background: rgba(37, 99, 235, .12);
    color: #2563eb;
    font-size: 10px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .1em;
}

.global-search-profile-hero.player
.global-search-profile-badge {
    background: rgba(124, 58, 237, .12);
    color: #7c3aed;
}

.global-search-profile-main h2 {
    margin: 0;
    font-size: clamp(24px, 4vw, 34px);
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: -.03em;
    overflow-wrap: anywhere;
}

.global-search-profile-main p {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 700;
    opacity: .68;
}

.global-search-profile-team-line {
    display: block;
    margin-top: 7px;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    opacity: .55;
}

.global-search-profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.global-search-profile-card {
    min-width: 0;
    padding: 15px;
    border-radius: 16px;
    background: rgba(15, 23, 42, .035);
    border: 1px solid rgba(15, 23, 42, .08);
}

.global-search-profile-card.wide {
    grid-column: 1 / -1;
}

.global-search-profile-card span {
    display: block;
    margin-bottom: 6px;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .48;
}

.global-search-profile-card strong {
    display: block;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.global-search-profile-card small {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 700;
    opacity: .55;
}

.global-search-profile-venue-image {
    width: 100%;
    height: 190px;
    margin-top: 4px;
    overflow: hidden;
    border-radius: 18px;
    background: #f1f5f9;
    border: 1px solid rgba(15, 23, 42, .08);
}

.global-search-profile-venue-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.global-search-profile-section {
    margin-top: 4px;
    padding-top: 20px;
    border-top: 1px solid rgba(15, 23, 42, .09);
}

.global-search-profile-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.global-search-profile-section-heading span {
    display: block;
    margin-bottom: 4px;
    font-size: 9px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: .12em;
    opacity: .45;
}

.global-search-profile-section-heading h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 900;
}

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

.global-search-profile-stat {
    min-width: 0;
    padding: 13px 10px;
    text-align: center;
    border-radius: 15px;
    background: rgba(15, 23, 42, .035);
    border: 1px solid rgba(15, 23, 42, .08);
}

.global-search-profile-stat span {
    display: block;
    margin-bottom: 5px;
    font-size: 9px;
    line-height: 1.2;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .48;
}

.global-search-profile-stat strong {
    display: block;
    font-size: 18px;
    line-height: 1.1;
    font-weight: 900;
}

.global-search-profile-detail-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 13px;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 700;
    opacity: .58;
}

.global-search-profile-detail-row strong {
    font-weight: 900;
    opacity: 1;
}

.global-search-profile-loading {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    font-weight: 800;
}

.global-search-profile-loading strong {
    font-size: 15px;
}

.global-search-profile-loading small {
    font-size: 11px;
    opacity: .5;
}

.global-search-profile-spinner {
    width: 38px;
    height: 38px;
    margin-bottom: 8px;
    border-radius: 50%;
    border: 3px solid rgba(37, 99, 235, .15);
    border-top-color: #2563eb;
    animation: globalSearchProfileSpin .75s linear infinite;
}

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

.global-search-profile-error {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-align: center;
}

.global-search-profile-error strong {
    font-size: 15px;
    font-weight: 900;
}

.global-search-profile-error small {
    font-size: 12px;
    font-weight: 700;
    opacity: .55;
}

/* =========================
   DARK MODE
   ========================= */

body.dark .global-search-profile-dialog,
html.dark .global-search-profile-dialog,
[data-theme="dark"] .global-search-profile-dialog {
    background: #0f172a;
    color: #f8fafc;
    border-color: rgba(255, 255, 255, .09);
    box-shadow:
        0 30px 90px rgba(0, 0, 0, .60),
        0 8px 30px rgba(0, 0, 0, .35);
}

body.dark .global-search-profile-close,
html.dark .global-search-profile-close,
[data-theme="dark"] .global-search-profile-close {
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
}

body.dark .global-search-profile-close:hover,
html.dark .global-search-profile-close:hover,
[data-theme="dark"] .global-search-profile-close:hover {
    background: rgba(255, 255, 255, .15);
}

body.dark .global-search-profile-hero,
html.dark .global-search-profile-hero,
[data-theme="dark"] .global-search-profile-hero {
    background:
        linear-gradient(
            135deg,
            rgba(59, 130, 246, .14),
            rgba(14, 165, 233, .07)
        );
    border-color: rgba(96, 165, 250, .15);
}

body.dark .global-search-profile-hero.player,
html.dark .global-search-profile-hero.player,
[data-theme="dark"] .global-search-profile-hero.player {
    background:
        linear-gradient(
            135deg,
            rgba(139, 92, 246, .15),
            rgba(59, 130, 246, .07)
        );
    border-color: rgba(139, 92, 246, .16);
}

body.dark .global-search-profile-avatar,
html.dark .global-search-profile-avatar,
[data-theme="dark"] .global-search-profile-avatar {
    background: #111c31;
    border-color: rgba(255, 255, 255, .10);
}

body.dark .global-search-profile-card,
html.dark .global-search-profile-card,
[data-theme="dark"] .global-search-profile-card,
body.dark .global-search-profile-stat,
html.dark .global-search-profile-stat,
[data-theme="dark"] .global-search-profile-stat {
    background: rgba(255, 255, 255, .045);
    border-color: rgba(255, 255, 255, .08);
}

body.dark .global-search-profile-section,
html.dark .global-search-profile-section,
[data-theme="dark"] .global-search-profile-section {
    border-color: rgba(255, 255, 255, .09);
}

body.dark .global-search-profile-venue-image,
html.dark .global-search-profile-venue-image,
[data-theme="dark"] .global-search-profile-venue-image {
    background: #111c31;
    border-color: rgba(255, 255, 255, .08);
}

/* =========================
   TABLET
   ========================= */

@media (max-width: 820px) {
    .global-search-profile-modal {
        padding: 18px;
    }

    .global-search-profile-dialog {
        max-height: calc(100vh - 36px);
        padding: 22px;
        border-radius: 21px;
    }

    .global-search-profile-avatar {
        flex-basis: 88px;
        width: 88px;
        height: 88px;
        border-radius: 19px;
    }

    .global-search-profile-avatar.player {
        border-radius: 50%;
    }

    .global-search-profile-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

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

@media (max-width: 620px) {
    .global-search-profile-modal {
        align-items: flex-end;
        padding: 0;
    }

    .global-search-profile-dialog {
        width: 100%;
        max-height: 92vh;
        padding: 20px 16px calc(22px + env(safe-area-inset-bottom));
        border-radius: 22px 22px 0 0;
        transform: translateY(30px);
    }

    .global-search-profile-modal.is-open
    .global-search-profile-dialog {
        transform: translateY(0);
    }

    .global-search-profile-title {
        margin-bottom: 15px;
    }

    .global-search-profile-close {
        top: 12px;
        right: 12px;
        width: 36px;
        height: 36px;
        font-size: 25px;
    }

    .global-search-profile-hero {
        gap: 13px;
        padding: 15px;
        margin-bottom: 16px;
        border-radius: 17px;
    }

    .global-search-profile-avatar {
        flex-basis: 72px;
        width: 72px;
        height: 72px;
        border-radius: 16px;
    }

    .global-search-profile-avatar.player {
        border-radius: 50%;
    }

    .global-search-profile-main {
        padding-right: 34px;
    }

    .global-search-profile-main h2 {
        font-size: 22px;
    }

    .global-search-profile-main p {
        margin-top: 5px;
        font-size: 12px;
    }

    .global-search-profile-grid {
        gap: 8px;
        margin-bottom: 15px;
    }

    .global-search-profile-card {
        padding: 12px;
        border-radius: 13px;
    }

    .global-search-profile-card strong {
        font-size: 12px;
    }

    .global-search-profile-card small {
        font-size: 10px;
    }

    .global-search-profile-venue-image {
        height: 145px;
        border-radius: 15px;
    }

    .global-search-profile-section {
        padding-top: 15px;
    }

    .global-search-profile-section-heading h3 {
        font-size: 16px;
    }

    .global-search-profile-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .global-search-profile-stat {
        padding: 11px 8px;
        border-radius: 12px;
    }

    .global-search-profile-stat strong {
        font-size: 16px;
    }

    .global-search-profile-detail-row {
        font-size: 10px;
    }
}

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

@media (max-width: 380px) {
    .global-search-profile-dialog {
        padding-left: 12px;
        padding-right: 12px;
    }

    .global-search-profile-hero {
        padding: 12px;
    }

    .global-search-profile-avatar {
        flex-basis: 62px;
        width: 62px;
        height: 62px;
    }

    .global-search-profile-main h2 {
        font-size: 19px;
    }

    .global-search-profile-main p {
        font-size: 11px;
    }

    .global-search-profile-badge {
        font-size: 8px;
        min-height: 19px;
        padding: 3px 7px;
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .global-search-profile-modal,
    .global-search-profile-dialog,
    .global-search-profile-close {
        transition: none !important;
    }

    .global-search-profile-spinner {
        animation: none !important;
    }
}



/* =========================================================
   TEAM PROFILE TABS CSS
   ========================================================= */

.global-search-team-tabs {
    width: 100%;
    min-width: 0;
}

.global-search-team-tab-nav {
    display: flex;
    align-items: stretch;
    gap: 4px;
    width: 100%;
    padding: 5px;
    margin: 0 0 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    border: 1px solid rgba(128, 128, 128, 0.16);
    border-radius: 12px;
    background: rgba(128, 128, 128, 0.055);
}

.global-search-team-tab-nav::-webkit-scrollbar {
    height: 4px;
}

.global-search-team-tab {
    flex: 1 1 0;
    min-width: 110px;
    min-height: 40px;
    padding: 0 15px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: inherit;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.45px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.global-search-team-tab:hover {
    background: rgba(128, 128, 128, 0.09);
}

.global-search-team-tab:active {
    transform: translateY(1px);
}

.global-search-team-tab.is-active {
    background: var(--primary-color, #2563eb);
    color: #fff;
    box-shadow: 0 5px 16px rgba(37, 99, 235, 0.22);
}

.global-search-team-tab:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.global-search-team-tab-panels {
    width: 100%;
    min-width: 0;
}

.global-search-team-tab-panel {
    width: 100%;
    min-width: 0;
    animation: teamProfileTabIn 0.18s ease;
}

.global-search-team-tab-panel[hidden],
.global-search-team-fixture-content[hidden] {
    display: none !important;
}

@keyframes teamProfileTabIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   TEAM OVERVIEW
   ========================================================= */

.global-search-team-overview {
    width: 100%;
}

.global-search-team-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.global-search-team-summary-card {
    min-width: 0;
    padding: 13px 12px;
    border: 1px solid rgba(128, 128, 128, 0.14);
    border-radius: 12px;
    background: rgba(128, 128, 128, 0.045);
    text-align: center;
}

.global-search-team-summary-card span {
    display: block;
    margin-bottom: 5px;
    color: rgba(128, 128, 128, 0.82);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.global-search-team-summary-card strong {
    display: block;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.1;
}

.global-search-team-summary-card small {
    display: block;
    margin-top: 4px;
    color: rgba(128, 128, 128, 0.75);
    font-size: 9px;
    font-weight: 700;
}


/* =========================================================
   SQUAD
   ========================================================= */

.global-search-team-squad-group {
    margin-bottom: 20px;
}

.global-search-team-squad-group:last-child {
    margin-bottom: 0;
}

.global-search-team-tab-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
}

.global-search-team-tab-heading h3 {
    margin: 0;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.5px;
}

.global-search-team-tab-heading > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 25px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary-color, #2563eb);
    font-size: 9px;
    font-weight: 900;
}

.global-search-team-squad-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.global-search-team-player-card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 68px;
    padding: 8px;
    border: 1px solid rgba(128, 128, 128, 0.13);
    border-radius: 11px;
    background: rgba(128, 128, 128, 0.035);
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease;
}

.global-search-team-player-card:hover {
    transform: translateY(-1px);
    border-color: rgba(37, 99, 235, 0.28);
    background: rgba(37, 99, 235, 0.035);
}

.global-search-team-player-photo {
    position: relative;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: 50%;
    background: rgba(128, 128, 128, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.global-search-team-player-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.global-search-team-player-photo span {
    font-size: 19px;
}

.global-search-team-player-info {
    min-width: 0;
    flex: 1;
}

.global-search-team-player-info strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 850;
}

.global-search-team-player-info span {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(128, 128, 128, 0.82);
    font-size: 9px;
    font-weight: 700;
}

.global-search-team-player-info small {
    display: block;
    margin-top: 3px;
    color: rgba(128, 128, 128, 0.68);
    font-size: 8px;
    font-weight: 700;
}


/* =========================================================
   FIXTURES
   ========================================================= */

.global-search-team-fixture-switch {
    display: flex;
    gap: 6px;
    width: 100%;
    margin-bottom: 12px;
    padding: 4px;
    border: 1px solid rgba(128, 128, 128, 0.13);
    border-radius: 10px;
    background: rgba(128, 128, 128, 0.045);
}

.global-search-team-fixture-switch button {
    flex: 1 1 0;
    min-height: 36px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: inherit;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.4px;
    cursor: pointer;
}

.global-search-team-fixture-switch button span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: 4px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(128, 128, 128, 0.1);
    font-size: 8px;
}

.global-search-team-fixture-switch button.is-active {
    background: var(--primary-color, #2563eb);
    color: #fff;
}

.global-search-team-fixture-switch button.is-active span {
    background: rgba(255, 255, 255, 0.18);
}

.global-search-team-fixtures-list {
    display: grid;
    gap: 8px;
}

.global-search-team-fixture {
    min-width: 0;
    padding: 11px;
    border: 1px solid rgba(128, 128, 128, 0.13);
    border-radius: 12px;
    background: rgba(128, 128, 128, 0.035);
}

.global-search-team-fixture-date {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px;
}

.global-search-team-fixture-date span {
    font-size: 9px;
    font-weight: 850;
}

.global-search-team-fixture-date small {
    color: rgba(128, 128, 128, 0.78);
    font-size: 8px;
    font-weight: 800;
}

.global-search-team-fixture-league {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    margin-bottom: 10px;
    color: rgba(128, 128, 128, 0.8);
    font-size: 8px;
    font-weight: 750;
}

.global-search-team-fixture-league-logo {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex: 0 0 16px;
}

.global-search-team-fixture-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.global-search-team-fixture-team {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.global-search-team-fixture-team.opponent {
    justify-content: flex-end;
    text-align: right;
}

.global-search-team-fixture-team span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 850;
}

.global-search-team-fixture-logo {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.global-search-team-fixture-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.global-search-team-fixture-score {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: 950;
}

.global-search-team-fixture-score.upcoming {
    font-size: 10px;
    letter-spacing: 0.5px;
}

.global-search-team-fixture-center small {
    color: rgba(128, 128, 128, 0.72);
    font-size: 7px;
    font-weight: 850;
}


/* =========================================================
   MARKET
   ========================================================= */

.global-search-team-market {
    width: 100%;
}

.global-search-team-market-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 170px;
    padding: 25px 18px;
    border: 1px solid rgba(37, 99, 235, 0.16);
    border-radius: 15px;
    background:
        linear-gradient(
            145deg,
            rgba(37, 99, 235, 0.09),
            rgba(128, 128, 128, 0.035)
        );
    text-align: center;
}

.global-search-team-market-hero span {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.65px;
    opacity: 0.75;
}

.global-search-team-market-hero strong {
    margin-top: 8px;
    font-size: 34px;
    font-weight: 950;
    line-height: 1;
}

.global-search-team-market-hero small {
    max-width: 430px;
    margin-top: 10px;
    color: rgba(128, 128, 128, 0.78);
    font-size: 9px;
    line-height: 1.5;
}

.global-search-team-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 20px;
    border: 1px dashed rgba(128, 128, 128, 0.2);
    border-radius: 12px;
    text-align: center;
}

.global-search-team-empty strong {
    font-size: 11px;
    font-weight: 900;
}

.global-search-team-empty small {
    max-width: 420px;
    margin-top: 5px;
    color: rgba(128, 128, 128, 0.72);
    font-size: 9px;
    line-height: 1.5;
}


/* =========================================================
   DARK MODE
   ========================================================= */

body.dark-mode .global-search-team-tab-nav,
html.dark .global-search-team-tab-nav {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .global-search-team-tab:hover,
html.dark .global-search-team-tab:hover {
    background: rgba(255, 255, 255, 0.07);
}

body.dark-mode .global-search-team-summary-card,
html.dark .global-search-team-summary-card,
body.dark-mode .global-search-team-player-card,
html.dark .global-search-team-player-card,
body.dark-mode .global-search-team-fixture,
html.dark .global-search-team-fixture,
body.dark-mode .global-search-team-fixture-switch,
html.dark .global-search-team-fixture-switch {
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .global-search-team-market-hero,
html.dark .global-search-team-market-hero {
    background:
        linear-gradient(
            145deg,
            rgba(37, 99, 235, 0.14),
            rgba(255, 255, 255, 0.025)
        );
    border-color: rgba(96, 165, 250, 0.18);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 820px) {

    .global-search-team-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .global-search-team-squad-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .global-search-team-fixture-main {
        grid-template-columns:
            minmax(0, 1fr)
            58px
            minmax(0, 1fr);
    }
}


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

@media (max-width: 620px) {

    .global-search-team-tab-nav {
        justify-content: flex-start;
        gap: 3px;
        margin-bottom: 12px;
        padding: 4px;
    }

    .global-search-team-tab {
        flex: 0 0 auto;
        min-width: 94px;
        min-height: 38px;
        padding: 0 12px;
        font-size: 9px;
    }

    .global-search-team-summary-grid {
        gap: 7px;
        margin-bottom: 10px;
    }

    .global-search-team-summary-card {
        padding: 11px 8px;
    }

    .global-search-team-summary-card strong {
        font-size: 18px;
    }

    .global-search-team-squad-grid {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .global-search-team-player-card {
        min-height: 62px;
    }

    .global-search-team-player-photo {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
    }

    .global-search-team-fixture {
        padding: 9px;
    }

    .global-search-team-fixture-main {
        grid-template-columns:
            minmax(0, 1fr)
            48px
            minmax(0, 1fr);
        gap: 5px;
    }

    .global-search-team-fixture-team {
        gap: 5px;
    }

    .global-search-team-fixture-team span {
        font-size: 9px;
    }

    .global-search-team-fixture-logo {
        flex-basis: 26px;
        width: 26px;
        height: 26px;
    }

    .global-search-team-fixture-score {
        font-size: 12px;
    }

    .global-search-team-fixture-score.upcoming {
        font-size: 9px;
    }

    .global-search-team-market-hero {
        min-height: 145px;
        padding: 20px 14px;
    }

    .global-search-team-market-hero strong {
        font-size: 30px;
    }
}


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

@media (max-width: 380px) {

    .global-search-team-tab {
        min-width: 88px;
        padding: 0 10px;
        font-size: 8px;
    }

    .global-search-team-summary-card span {
        font-size: 8px;
    }

    .global-search-team-summary-card strong {
        font-size: 16px;
    }

    .global-search-team-summary-card small {
        font-size: 8px;
    }

    .global-search-team-fixture-main {
        grid-template-columns:
            minmax(0, 1fr)
            40px
            minmax(0, 1fr);
    }

    .global-search-team-fixture-team span {
        font-size: 8px;
    }

    .global-search-team-fixture-logo {
        flex-basis: 23px;
        width: 23px;
        height: 23px;
    }

    .global-search-team-fixture-score {
        font-size: 11px;
    }

    .global-search-team-market-hero strong {
        font-size: 27px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .global-search-team-tab,
    .global-search-team-player-card,
    .global-search-team-tab-panel {
        transition: none !important;
        animation: none !important;
    }
}

/* =========================================================
   PLAYER DASHBOARD CSS V1
   ========================================================= */

.global-search-profile-player.player-dashboard {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
}

.player-dashboard *,
.player-dashboard *::before,
.player-dashboard *::after {
    box-sizing: border-box;
}

/* ---------- HERO ---------- */

.player-dashboard-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 18px;
    background: var(--card-bg, #ffffff);
}

.player-dashboard-avatar {
    width: 92px;
    height: 92px;
    min-width: 92px;
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-color, #f3f4f6);
    border: 1px solid var(--border-color, #e5e7eb);
}

.player-dashboard-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.player-dashboard-avatar span {
    font-size: 34px;
}

.player-dashboard-hero-main {
    min-width: 0;
    flex: 1;
}

.player-dashboard-kicker {
    margin-bottom: 5px;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .62;
}

.player-dashboard-hero-main h2 {
    margin: 0;
    font-size: clamp(21px, 3vw, 30px);
    line-height: 1.1;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.player-dashboard-subtitle {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 7px;
    font-size: 13px;
    font-weight: 700;
    opacity: .72;
}

.player-dashboard-hero-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}

.player-dashboard-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid var(--border-color, #e5e7eb);
    background: var(--surface-color, #f8fafc);
    font-size: 10px;
    line-height: 1.2;
    font-weight: 800;
}

.player-dashboard-badge.is-success {
    border-color: rgba(22, 163, 74, .28);
}

.player-dashboard-badge.is-danger {
    border-color: rgba(220, 38, 38, .30);
}

/* ---------- TABS ---------- */

.player-dashboard-tabs {
    display: flex;
    align-items: stretch;
    gap: 4px;
    margin-top: 12px;
    padding: 5px;
    overflow-x: auto;
    scrollbar-width: thin;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 14px;
    background: var(--surface-color, #f8fafc);
}

.player-dashboard-tab {
    flex: 1 0 auto;
    min-width: 100px;
    min-height: 38px;
    padding: 8px 13px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: .06em;
    cursor: pointer;
    transition:
        background .18s ease,
        transform .18s ease,
        opacity .18s ease;
}

.player-dashboard-tab:hover {
    background: rgba(127, 127, 127, .10);
}

.player-dashboard-tab.is-active {
    background: var(--card-bg, #ffffff);
    box-shadow: 0 3px 12px rgba(0, 0, 0, .07);
}

.player-dashboard-tab:active {
    transform: translateY(1px);
}

/* ---------- CONTENT ---------- */

.player-dashboard-content {
    min-width: 0;
    margin-top: 12px;
}

.player-dashboard-panel {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 16px;
    background: var(--card-bg, #ffffff);
}

.player-dashboard-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.player-dashboard-eyebrow {
    display: block;
    margin-bottom: 4px;
    font-size: 9px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: .13em;
    opacity: .52;
}

.player-dashboard-section-heading h3 {
    margin: 0;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 900;
}

.player-dashboard-count {
    flex: 0 0 auto;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--surface-color, #f3f4f6);
    font-size: 10px;
    font-weight: 800;
}

/* ---------- OVERVIEW ---------- */

.player-dashboard-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.player-dashboard-info-card {
    min-width: 0;
    padding: 11px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    background: var(--surface-color, #f8fafc);
}

.player-dashboard-info-label {
    display: block;
    margin-bottom: 5px;
    font-size: 9px;
    line-height: 1.2;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity: .54;
}

.player-dashboard-info-value {
    display: block;
    min-width: 0;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.player-dashboard-performance {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    margin-top: 12px;
}

.player-dashboard-stat-card {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    background: var(--surface-color, #f8fafc);
}

.player-dashboard-stat-card span {
    display: block;
    margin-bottom: 5px;
    font-size: 9px;
    line-height: 1.2;
    font-weight: 800;
    text-transform: uppercase;
    opacity: .55;
}

.player-dashboard-stat-card strong {
    display: block;
    font-size: 18px;
    line-height: 1;
    font-weight: 900;
}

/* ---------- STATS ---------- */

.player-dashboard-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 18px;
}

.player-dashboard-stat-item {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    background: var(--surface-color, #f8fafc);
}

.player-dashboard-stat-item span {
    display: block;
    margin-bottom: 6px;
    font-size: 9px;
    line-height: 1.2;
    font-weight: 800;
    text-transform: uppercase;
    opacity: .55;
}

.player-dashboard-stat-item strong {
    display: block;
    font-size: 17px;
    line-height: 1.1;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.player-dashboard-competition-list {
    display: grid;
    gap: 10px;
}

.player-dashboard-competition {
    min-width: 0;
    padding: 13px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 13px;
    background: var(--surface-color, #f8fafc);
}

.player-dashboard-competition-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.player-dashboard-competition-title {
    min-width: 0;
    font-size: 13px;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.player-dashboard-competition-meta {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 700;
    opacity: .58;
}

.player-dashboard-competition-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 7px;
}

.player-dashboard-competition-stat {
    min-width: 0;
    padding: 8px;
    border-radius: 9px;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e5e7eb);
}

.player-dashboard-competition-stat span {
    display: block;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    opacity: .50;
}

.player-dashboard-competition-stat strong {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    font-weight: 900;
}

/* ---------- TRANSFERS ---------- */

.player-dashboard-transfer-list {
    display: grid;
    gap: 8px;
}

.player-dashboard-transfer {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) 30px minmax(0, 1fr) 100px;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    background: var(--surface-color, #f8fafc);
}

.player-dashboard-transfer-date,
.player-dashboard-transfer-fee {
    font-size: 10px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.player-dashboard-transfer-date {
    opacity: .60;
}

.player-dashboard-transfer-club {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    font-size: 11px;
    font-weight: 800;
}

.player-dashboard-transfer-club img {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    object-fit: contain;
}

.player-dashboard-transfer-club span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.player-dashboard-transfer-arrow {
    text-align: center;
    font-size: 18px;
    font-weight: 900;
    opacity: .50;
}

/* ---------- TROPHIES ---------- */

.player-dashboard-trophy-summary {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 6px 10px;
    border-radius: 10px;
    background: var(--surface-color, #f8fafc);
}

.player-dashboard-trophy-summary strong {
    font-size: 17px;
    font-weight: 900;
}

.player-dashboard-trophy-summary span {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    opacity: .55;
}

.player-dashboard-trophy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.player-dashboard-trophy {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 11px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    background: var(--surface-color, #f8fafc);
}

.player-dashboard-trophy-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e5e7eb);
    font-size: 17px;
}

.player-dashboard-trophy-content {
    min-width: 0;
    flex: 1;
}

.player-dashboard-trophy-content strong {
    display: block;
    font-size: 11px;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.player-dashboard-trophy-content > span {
    display: block;
    margin-top: 2px;
    font-size: 9px;
    opacity: .58;
}

.player-dashboard-trophy-content > div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
}

.player-dashboard-trophy-content small,
.player-dashboard-trophy-content b {
    font-size: 9px;
}

.player-dashboard-trophy-content small {
    opacity: .55;
}

/* ---------- INJURIES ---------- */

.player-dashboard-injury-list {
    display: grid;
    gap: 8px;
}

.player-dashboard-injury {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 11px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    background: var(--surface-color, #f8fafc);
}

.player-dashboard-injury-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e5e7eb);
    font-size: 18px;
    font-weight: 900;
}

.player-dashboard-injury-main {
    min-width: 0;
}

.player-dashboard-injury-main strong {
    display: block;
    font-size: 11px;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.player-dashboard-injury-main span {
    display: block;
    margin-top: 4px;
    font-size: 9px;
    font-weight: 700;
    opacity: .58;
}

/* ---------- LOADING / EMPTY / ERROR ---------- */

.player-dashboard-lazy-panel {
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.player-dashboard-loading {
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 11px;
    font-weight: 800;
    opacity: .65;
}

.player-dashboard-spinner {
    width: 17px;
    height: 17px;
    display: inline-block;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: playerDashboardSpin .7s linear infinite;
}

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

.player-dashboard-empty {
    min-height: 150px;
    padding: 25px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px dashed var(--border-color, #d1d5db);
    border-radius: 13px;
    background: var(--surface-color, #f8fafc);
}

.player-dashboard-empty strong {
    font-size: 13px;
    font-weight: 900;
}

.player-dashboard-empty span {
    max-width: 500px;
    margin-top: 5px;
    font-size: 10px;
    line-height: 1.45;
    opacity: .60;
}

.player-dashboard-retry {
    margin-top: 12px;
    min-height: 34px;
    padding: 7px 13px;
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 9px;
    background: var(--card-bg, #ffffff);
    color: inherit;
    font: inherit;
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
}

/* ---------- DARK MODE ---------- */

body.dark-mode .player-dashboard-hero,
body.dark-mode .player-dashboard-panel,
body.dark-mode .player-dashboard-tab.is-active,
body.dark-mode .player-dashboard-stat-card,
body.dark-mode .player-dashboard-info-card,
body.dark-mode .player-dashboard-stat-item,
body.dark-mode .player-dashboard-competition,
body.dark-mode .player-dashboard-competition-stat,
body.dark-mode .player-dashboard-transfer,
body.dark-mode .player-dashboard-trophy,
body.dark-mode .player-dashboard-injury,
body.dark-mode .player-dashboard-empty,
body.dark-mode .player-dashboard-retry,
body.dark-mode .player-dashboard-trophy-icon,
body.dark-mode .player-dashboard-injury-icon {
    box-shadow: none;
}

/* ---------- TABLET ---------- */

@media (max-width: 820px) {
    .player-dashboard-overview-grid,
    .player-dashboard-performance,
    .player-dashboard-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .player-dashboard-competition-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .player-dashboard-transfer {
        grid-template-columns: 72px minmax(0, 1fr) 28px minmax(0, 1fr);
    }

    .player-dashboard-transfer-fee {
        grid-column: 2 / -1;
        padding-top: 2px;
    }
}

/* ---------- MOBILE ---------- */

@media (max-width: 620px) {
    .global-search-profile-player.player-dashboard {
        max-width: 100%;
    }

    .player-dashboard-hero {
        align-items: flex-start;
        gap: 12px;
        padding: 13px;
        border-radius: 14px;
    }

    .player-dashboard-avatar {
        width: 68px;
        height: 68px;
        min-width: 68px;
        border-radius: 13px;
    }

    .player-dashboard-avatar span {
        font-size: 27px;
    }

    .player-dashboard-hero-main h2 {
        font-size: 20px;
    }

    .player-dashboard-subtitle {
        font-size: 11px;
        gap: 5px;
    }

    .player-dashboard-hero-meta {
        margin-top: 8px;
    }

    .player-dashboard-tabs {
        margin-top: 8px;
        border-radius: 11px;
    }

    .player-dashboard-tab {
        min-width: 88px;
        min-height: 34px;
        padding: 7px 10px;
        font-size: 9px;
    }

    .player-dashboard-panel {
        padding: 12px;
        border-radius: 13px;
    }

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

    .player-dashboard-section-heading h3 {
        font-size: 15px;
    }

    .player-dashboard-overview-grid,
    .player-dashboard-performance,
    .player-dashboard-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .player-dashboard-competition-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .player-dashboard-trophy-grid {
        grid-template-columns: 1fr;
    }

    .player-dashboard-transfer {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .player-dashboard-transfer-arrow {
        display: none;
    }

    .player-dashboard-transfer-fee {
        grid-column: auto;
        padding-top: 0;
    }

    .player-dashboard-transfer-club {
        min-height: 30px;
    }
}

/* ---------- SMALL MOBILE ---------- */

@media (max-width: 380px) {
    .player-dashboard-hero {
        padding: 10px;
    }

    .player-dashboard-avatar {
        width: 58px;
        height: 58px;
        min-width: 58px;
    }

    .player-dashboard-hero-main h2 {
        font-size: 17px;
    }

    .player-dashboard-overview-grid,
    .player-dashboard-performance,
    .player-dashboard-stat-grid {
        grid-template-columns: 1fr;
    }

    .player-dashboard-competition-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .player-dashboard-tab {
        min-width: 82px;
    }
}

/* ---------- REDUCED MOTION ---------- */

@media (prefers-reduced-motion: reduce) {
    .player-dashboard-tab {
        transition: none;
    }

    .player-dashboard-spinner {
        animation: none;
    }
}


/* =========================================================
   PREMIUM PLAYER + TEAM DASHBOARD OVERRIDES
   2026-09-04
   ========================================================= */


/* =========================================================
   PLAYER DASHBOARD — PREMIUM OVERVIEW
   ========================================================= */

.player-dashboard-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.player-dashboard-info-card {
    position: relative;
    min-height: 72px;
    padding: 13px 14px;
    border-radius: 13px;
    background: var(--surface-color, #f8fafc);
    border: 1px solid var(--border-color, #e5e7eb);
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition:
        border-color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

.player-dashboard-info-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(15, 23, 42, .06);
}

.player-dashboard-info-label {
    margin-bottom: 6px;
    color: var(--muted, #667085);
    font-size: 9px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: 1;
}

.player-dashboard-info-value {
    color: var(--text, #101828);
    font-size: 13px;
    line-height: 1.35;
    font-weight: 900;
    letter-spacing: -.01em;
    opacity: 1;
}


/* Full Name — prominent */
.player-dashboard-info-card:first-child {
    grid-column: 1 / -1;
    min-height: 78px;
    background:
        linear-gradient(
            135deg,
            rgba(37, 99, 235, .055),
            var(--surface-color, #f8fafc)
        );
}

.player-dashboard-info-card:first-child .player-dashboard-info-value {
    font-size: 15px;
    font-weight: 900;
}


/* Better stat cards */
.player-dashboard-performance {
    gap: 10px;
}

.player-dashboard-stat-card,
.player-dashboard-stat-item {
    border-radius: 13px;
}

.player-dashboard-stat-card span,
.player-dashboard-stat-item span {
    opacity: 1;
    color: var(--muted, #667085);
    font-weight: 900;
}

.player-dashboard-stat-card strong,
.player-dashboard-stat-item strong {
    font-weight: 900;
}


/* Better section hierarchy */
.player-dashboard-section-heading {
    margin-bottom: 15px;
}

.player-dashboard-section-heading h3 {
    font-weight: 900;
}

.player-dashboard-eyebrow {
    opacity: 1;
    font-weight: 900;
    color: var(--muted, #667085);
}


/* Better panel */
.player-dashboard-panel {
    padding: 17px;
    border-radius: 17px;
}


/* Better hero */
.player-dashboard-hero {
    border-radius: 18px;
    box-shadow: 0 5px 20px rgba(15, 23, 42, .05);
}

.player-dashboard-hero-main h2 {
    font-weight: 900;
}

.player-dashboard-subtitle {
    opacity: 1;
    font-weight: 800;
}


/* Better tabs */
.player-dashboard-tab {
    font-weight: 900;
}

.player-dashboard-tab.is-active {
    font-weight: 900;
}


/* =========================================================
   PLAYER DASHBOARD — DARK MODE
   ========================================================= */

body.dark-mode .player-dashboard,
html.dark .player-dashboard {
    color: #ffffff;
}

body.dark-mode .player-dashboard-hero,
html.dark .player-dashboard-hero,
body.dark-mode .player-dashboard-panel,
html.dark .player-dashboard-panel {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .045),
            rgba(255, 255, 255, .018)
        );
    border-color: rgba(255, 255, 255, .11);
}

body.dark-mode .player-dashboard-info-card,
html.dark .player-dashboard-info-card,
body.dark-mode .player-dashboard-stat-card,
html.dark .player-dashboard-stat-card,
body.dark-mode .player-dashboard-stat-item,
html.dark .player-dashboard-stat-item,
body.dark-mode .player-dashboard-competition,
html.dark .player-dashboard-competition,
body.dark-mode .player-dashboard-competition-stat,
html.dark .player-dashboard-competition-stat,
body.dark-mode .player-dashboard-transfer,
html.dark .player-dashboard-transfer,
body.dark-mode .player-dashboard-trophy,
html.dark .player-dashboard-trophy,
body.dark-mode .player-dashboard-injury,
html.dark .player-dashboard-injury,
body.dark-mode .player-dashboard-empty,
html.dark .player-dashboard-empty,
body.dark-mode .player-dashboard-retry,
html.dark .player-dashboard-retry {
    background:
        rgba(255, 255, 255, .035);
    border-color: rgba(255, 255, 255, .105);
    color: #ffffff;
}

body.dark-mode .player-dashboard-info-card:first-child,
html.dark .player-dashboard-info-card:first-child {
    background:
        linear-gradient(
            135deg,
            rgba(37, 99, 235, .18),
            rgba(255, 255, 255, .035)
        );
    border-color: rgba(96, 165, 250, .24);
}


/* FORCE TEXT VISIBILITY */
body.dark-mode .player-dashboard h2,
html.dark .player-dashboard h2,
body.dark-mode .player-dashboard h3,
html.dark .player-dashboard h3,
body.dark-mode .player-dashboard strong,
html.dark .player-dashboard strong,
body.dark-mode .player-dashboard b,
html.dark .player-dashboard b,
body.dark-mode .player-dashboard span,
html.dark .player-dashboard span,
body.dark-mode .player-dashboard small,
html.dark .player-dashboard small,
body.dark-mode .player-dashboard button,
html.dark .player-dashboard button {
    color: #ffffff;
}

body.dark-mode .player-dashboard .player-dashboard-info-label,
html.dark .player-dashboard .player-dashboard-info-label,
body.dark-mode .player-dashboard .player-dashboard-eyebrow,
html.dark .player-dashboard .player-dashboard-eyebrow,
body.dark-mode .player-dashboard .player-dashboard-competition-meta,
html.dark .player-dashboard .player-dashboard-competition-meta,
body.dark-mode .player-dashboard .player-dashboard-transfer-date,
html.dark .player-dashboard .player-dashboard-transfer-date,
body.dark-mode .player-dashboard .player-dashboard-trophy-content > span,
html.dark .player-dashboard .player-dashboard-trophy-content > span,
body.dark-mode .player-dashboard .player-dashboard-trophy-content small,
html.dark .player-dashboard .player-dashboard-trophy-content small,
body.dark-mode .player-dashboard .player-dashboard-injury-main span,
html.dark .player-dashboard .player-dashboard-injury-main span {
    color: #ffffff;
    opacity: .82;
    font-weight: 800;
}

body.dark-mode .player-dashboard .player-dashboard-info-value,
html.dark .player-dashboard .player-dashboard-info-value,
body.dark-mode .player-dashboard .player-dashboard-stat-card strong,
html.dark .player-dashboard .player-dashboard-stat-card strong,
body.dark-mode .player-dashboard .player-dashboard-stat-item strong,
html.dark .player-dashboard .player-dashboard-stat-item strong {
    color: #ffffff;
    opacity: 1;
    font-weight: 900;
}


/* Dark tabs */
body.dark-mode .player-dashboard-tabs,
html.dark .player-dashboard-tabs {
    background: rgba(255, 255, 255, .035);
    border-color: rgba(255, 255, 255, .10);
}

body.dark-mode .player-dashboard-tab,
html.dark .player-dashboard-tab {
    color: #ffffff !important;
    font-weight: 900;
    opacity: .88;
}

body.dark-mode .player-dashboard-tab:hover,
html.dark .player-dashboard-tab:hover {
    background: rgba(255, 255, 255, .08);
    color: #ffffff !important;
    opacity: 1;
}

body.dark-mode .player-dashboard-tab.is-active,
html.dark .player-dashboard-tab.is-active {
    background: rgba(255, 255, 255, .12);
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .24);
    opacity: 1;
}


/* Dark hero */
body.dark-mode .player-dashboard-kicker,
html.dark .player-dashboard-kicker,
body.dark-mode .player-dashboard-subtitle,
html.dark .player-dashboard-subtitle {
    color: #ffffff;
    opacity: .86;
}

body.dark-mode .player-dashboard-badge,
html.dark .player-dashboard-badge {
    background: rgba(255, 255, 255, .055);
    border-color: rgba(255, 255, 255, .14);
    color: #ffffff;
    font-weight: 900;
}


/* Dark loading / empty */
body.dark-mode .player-dashboard-loading,
html.dark .player-dashboard-loading,
body.dark-mode .player-dashboard-empty,
html.dark .player-dashboard-empty {
    color: #ffffff;
}

body.dark-mode .player-dashboard-empty span,
html.dark .player-dashboard-empty span {
    color: #ffffff;
    opacity: .78;
}


/* =========================================================
   TEAM DASHBOARD — DARK MODE TEXT VISIBILITY
   ========================================================= */

body.dark-mode .global-search-team-tabs,
html.dark .global-search-team-tabs {
    color: #ffffff;
}

body.dark-mode .global-search-team-tabs h1,
html.dark .global-search-team-tabs h1,
body.dark-mode .global-search-team-tabs h2,
html.dark .global-search-team-tabs h2,
body.dark-mode .global-search-team-tabs h3,
html.dark .global-search-team-tabs h3,
body.dark-mode .global-search-team-tabs strong,
html.dark .global-search-team-tabs strong,
body.dark-mode .global-search-team-tabs b,
html.dark .global-search-team-tabs b,
body.dark-mode .global-search-team-tabs span,
html.dark .global-search-team-tabs span,
body.dark-mode .global-search-team-tabs small,
html.dark .global-search-team-tabs small {
    color: #ffffff;
}

body.dark-mode .global-search-team-tabs .global-search-team-tab,
html.dark .global-search-team-tabs .global-search-team-tab {
    color: #ffffff !important;
    font-weight: 900;
}

body.dark-mode .global-search-team-tabs .global-search-team-tab.is-active,
html.dark .global-search-team-tabs .global-search-team-tab.is-active {
    color: #ffffff !important;
    font-weight: 900;
}

body.dark-mode .global-search-team-tabs .global-search-team-summary-card,
html.dark .global-search-team-tabs .global-search-team-summary-card,
body.dark-mode .global-search-team-tabs .global-search-team-player-card,
html.dark .global-search-team-tabs .global-search-team-player-card,
body.dark-mode .global-search-team-tabs .global-search-team-fixture,
html.dark .global-search-team-tabs .global-search-team-fixture {
    color: #ffffff;
}

body.dark-mode .global-search-team-tabs .global-search-team-summary-card *,
html.dark .global-search-team-tabs .global-search-team-summary-card *,
body.dark-mode .global-search-team-tabs .global-search-team-player-card *,
html.dark .global-search-team-tabs .global-search-team-player-card *,
body.dark-mode .global-search-team-tabs .global-search-team-fixture *,
html.dark .global-search-team-tabs .global-search-team-fixture * {
    color: #ffffff;
}

body.dark-mode .global-search-team-tabs .global-search-team-tab-heading,
html.dark .global-search-team-tabs .global-search-team-tab-heading {
    color: #ffffff;
}

body.dark-mode .global-search-team-tabs .global-search-team-tab-heading > span,
html.dark .global-search-team-tabs .global-search-team-tab-heading > span {
    color: #ffffff;
    opacity: .82;
    font-weight: 800;
}


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

@media (max-width: 820px) {
    .player-dashboard-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .player-dashboard-overview-grid {
        grid-template-columns: 1fr;
    }

    .player-dashboard-info-card:first-child {
        grid-column: auto;
    }

    .player-dashboard-info-card {
        min-height: 68px;
        padding: 12px 13px;
    }

    .player-dashboard-info-value {
        font-size: 12px;
    }

    .player-dashboard-info-card:first-child .player-dashboard-info-value {
        font-size: 14px;
    }
}


/* =========================================================
   RADAR LIVESCORE — DARK PREMIUM PLAYER + SEARCH
   FINAL VISUAL OVERRIDE
   2026-09-04
   ========================================================= */

/* =========================================================
   GLOBAL SEARCH DROPDOWN — DARK PREMIUM
   ========================================================= */

body.dark-mode #global-search-results,
html.dark #global-search-results,
html.dark-mode #global-search-results,
body.dark #global-search-results {
    background: linear-gradient(
        145deg,
        #0b1628 0%,
        #0f1d31 55%,
        #111f35 100%
    ) !important;

    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 14px !important;

    box-shadow:
        0 18px 45px rgba(0,0,0,.48),
        0 4px 14px rgba(0,0,0,.28) !important;

    color: #ffffff !important;
    overflow: hidden;
}

body.dark-mode #global-search-results .global-search-item,
html.dark #global-search-results .global-search-item,
html.dark-mode #global-search-results .global-search-item,
body.dark #global-search-results .global-search-item {
    background: transparent !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    transition:
        background .16s ease,
        transform .16s ease !important;
}

body.dark-mode #global-search-results .global-search-item:hover,
html.dark #global-search-results .global-search-item:hover,
html.dark-mode #global-search-results .global-search-item:hover,
body.dark #global-search-results .global-search-item:hover {
    background: rgba(59,130,246,.14) !important;
    color: #ffffff !important;
}

body.dark-mode #global-search-results .global-search-item:last-child,
html.dark #global-search-results .global-search-item:last-child,
html.dark-mode #global-search-results .global-search-item:last-child,
body.dark #global-search-results .global-search-item:last-child {
    border-bottom: 0 !important;
}

body.dark-mode #global-search-results .global-search-item-content,
html.dark #global-search-results .global-search-item-content,
html.dark-mode #global-search-results .global-search-item-content,
body.dark #global-search-results .global-search-item-content {
    color: #ffffff !important;
}

body.dark-mode #global-search-results .global-search-item-content *,
html.dark #global-search-results .global-search-item-content *,
html.dark-mode #global-search-results .global-search-item-content *,
body.dark #global-search-results .global-search-item-content * {
    color: #ffffff !important;
}

body.dark-mode #global-search-results .global-search-item-content strong,
html.dark #global-search-results .global-search-item-content strong,
html.dark-mode #global-search-results .global-search-item-content strong,
body.dark #global-search-results .global-search-item-content strong {
    color: #ffffff !important;
    font-weight: 900 !important;
}

body.dark-mode #global-search-results .global-search-type,
html.dark #global-search-results .global-search-type,
html.dark-mode #global-search-results .global-search-type,
body.dark #global-search-results .global-search-type {
    color: #aebbd0 !important;
    font-weight: 800 !important;
}

body.dark-mode #global-search-results .global-search-item-arrow,
html.dark #global-search-results .global-search-item-arrow,
html.dark-mode #global-search-results .global-search-item-arrow,
body.dark #global-search-results .global-search-item-arrow {
    color: #8fb9ff !important;
    font-weight: 900 !important;
}

body.dark-mode #global-search-results .global-search-item-image,
html.dark #global-search-results .global-search-item-image,
html.dark-mode #global-search-results .global-search-item-image,
body.dark #global-search-results .global-search-item-image {
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 10px !important;
}

body.dark-mode #global-search-results .global-search-message,
html.dark #global-search-results .global-search-message,
html.dark-mode #global-search-results .global-search-message,
body.dark #global-search-results .global-search-message {
    background: #0b1628 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
}

/* =========================================================
   SEARCH INPUT — DARK PREMIUM
   ========================================================= */

body.dark-mode .global-search-box input,
html.dark .global-search-box input,
html.dark-mode .global-search-box input,
body.dark .global-search-box input,
body.dark-mode #global-search,
html.dark #global-search,
html.dark-mode #global-search,
body.dark #global-search {
    background: #0b1628 !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.16) !important;
    font-weight: 800 !important;
}

body.dark-mode #global-search::placeholder,
html.dark #global-search::placeholder,
html.dark-mode #global-search::placeholder,
body.dark #global-search::placeholder {
    color: #8e9bb0 !important;
    opacity: 1 !important;
}

body.dark-mode .global-search-button,
html.dark .global-search-button,
html.dark-mode .global-search-button,
body.dark .global-search-button {
    color: #ffffff !important;
}

/* =========================================================
   PLAYER PROFILE MODAL — REMOVE WHITE CONTAINER
   ========================================================= */

body.dark-mode .global-search-profile-dialog,
html.dark .global-search-profile-dialog,
html.dark-mode .global-search-profile-dialog,
body.dark .global-search-profile-dialog {
    background:
        linear-gradient(
            145deg,
            #0a1425 0%,
            #0d192c 50%,
            #101e34 100%
        ) !important;

    border: 1px solid rgba(255,255,255,.12) !important;

    box-shadow:
        0 25px 70px rgba(0,0,0,.60),
        0 8px 25px rgba(0,0,0,.35) !important;

    color: #ffffff !important;
}

body.dark-mode .global-search-profile-content,
html.dark .global-search-profile-content,
html.dark-mode .global-search-profile-content,
body.dark .global-search-profile-content {
    background:
        linear-gradient(
            180deg,
            #0b1729 0%,
            #0d192c 100%
        ) !important;

    color: #ffffff !important;
}

/* =========================================================
   PLAYER DASHBOARD — ROOT
   ========================================================= */

body.dark-mode .global-search-profile-player.player-dashboard,
html.dark .global-search-profile-player.player-dashboard,
html.dark-mode .global-search-profile-player.player-dashboard,
body.dark .global-search-profile-player.player-dashboard {
    background: transparent !important;
    color: #ffffff !important;
}

/* =========================================================
   PLAYER HERO
   ========================================================= */

body.dark-mode .player-dashboard-hero,
html.dark .player-dashboard-hero,
html.dark-mode .player-dashboard-hero,
body.dark .player-dashboard-hero {
    background:
        linear-gradient(
            135deg,
            #111e35 0%,
            #152542 52%,
            #102039 100%
        ) !important;

    border: 1px solid rgba(255,255,255,.12) !important;

    box-shadow:
        0 10px 28px rgba(0,0,0,.30) !important;

    color: #ffffff !important;
}

body.dark-mode .player-dashboard-hero *,
html.dark .player-dashboard-hero *,
html.dark-mode .player-dashboard-hero *,
body.dark .player-dashboard-hero * {
    color: #ffffff !important;
}

body.dark-mode .player-dashboard-avatar,
html.dark .player-dashboard-avatar,
html.dark-mode .player-dashboard-avatar,
body.dark .player-dashboard-avatar {
    border-color: rgba(255,255,255,.16) !important;
    background: #0b1628 !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.30) !important;
}

/* =========================================================
   PLAYER TABS
   ========================================================= */

body.dark-mode .player-dashboard-tabs,
html.dark .player-dashboard-tabs,
html.dark-mode .player-dashboard-tabs,
body.dark .player-dashboard-tabs {
    background: #0b1729 !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.20) !important;
}

body.dark-mode .player-dashboard-tab,
html.dark .player-dashboard-tab,
html.dark-mode .player-dashboard-tab,
body.dark .player-dashboard-tab {
    color: #ffffff !important;
    font-weight: 900 !important;
}

body.dark-mode .player-dashboard-tab.is-active,
html.dark .player-dashboard-tab.is-active,
html.dark-mode .player-dashboard-tab.is-active,
body.dark .player-dashboard-tab.is-active {
    background:
        linear-gradient(
            135deg,
            rgba(59,130,246,.25),
            rgba(59,130,246,.12)
        ) !important;

    color: #ffffff !important;
    border-color: rgba(96,165,250,.28) !important;
}

/* =========================================================
   PLAYER PANELS
   ========================================================= */

body.dark-mode .player-dashboard-panel,
html.dark .player-dashboard-panel,
html.dark-mode .player-dashboard-panel,
body.dark .player-dashboard-panel {
    background:
        linear-gradient(
            145deg,
            #0f1c30 0%,
            #101f35 100%
        ) !important;

    border: 1px solid rgba(255,255,255,.10) !important;

    box-shadow:
        0 8px 22px rgba(0,0,0,.22) !important;

    color: #ffffff !important;
}

body.dark-mode .player-dashboard-panel *,
html.dark .player-dashboard-panel *,
html.dark-mode .player-dashboard-panel *,
body.dark .player-dashboard-panel * {
    color: #ffffff !important;
}

/* =========================================================
   PLAYER INFORMATION CARDS
   ========================================================= */

body.dark-mode .player-dashboard-info-card,
html.dark .player-dashboard-info-card,
html.dark-mode .player-dashboard-info-card,
body.dark .player-dashboard-info-card {
    background:
        linear-gradient(
            145deg,
            #14233a 0%,
            #101e33 100%
        ) !important;

    border: 1px solid rgba(255,255,255,.10) !important;

    box-shadow:
        0 5px 16px rgba(0,0,0,.18) !important;

    color: #ffffff !important;
}

body.dark-mode .player-dashboard-info-card:first-child,
html.dark .player-dashboard-info-card:first-child,
html.dark-mode .player-dashboard-info-card:first-child,
body.dark .player-dashboard-info-card:first-child {
    background:
        linear-gradient(
            135deg,
            #17345d 0%,
            #122642 55%,
            #101e33 100%
        ) !important;

    border-color: rgba(96,165,250,.28) !important;
}

body.dark-mode .player-dashboard-info-label,
html.dark .player-dashboard-info-label,
html.dark-mode .player-dashboard-info-label,
body.dark .player-dashboard-info-label {
    color: #b9c7da !important;
    font-weight: 900 !important;
}

body.dark-mode .player-dashboard-info-value,
html.dark .player-dashboard-info-value,
html.dark-mode .player-dashboard-info-value,
body.dark .player-dashboard-info-value {
    color: #ffffff !important;
    font-weight: 900 !important;
}

/* =========================================================
   PLAYER STAT CARDS
   ========================================================= */

body.dark-mode .player-dashboard-stat-card,
html.dark .player-dashboard-stat-card,
html.dark-mode .player-dashboard-stat-card,
body.dark .player-dashboard-stat-card,
body.dark-mode .player-dashboard-stat-item,
html.dark .player-dashboard-stat-item,
html.dark-mode .player-dashboard-stat-item,
body.dark .player-dashboard-stat-item {
    background:
        linear-gradient(
            145deg,
            #14233a,
            #101e33
        ) !important;

    border: 1px solid rgba(255,255,255,.10) !important;
    color: #ffffff !important;
}

body.dark-mode .player-dashboard-stat-card *,
html.dark .player-dashboard-stat-card *,
html.dark-mode .player-dashboard-stat-card *,
body.dark .player-dashboard-stat-card *,
body.dark-mode .player-dashboard-stat-item *,
html.dark .player-dashboard-stat-item *,
html.dark-mode .player-dashboard-stat-item *,
body.dark .player-dashboard-stat-item * {
    color: #ffffff !important;
}

body.dark-mode .player-dashboard-stat-card span,
html.dark .player-dashboard-stat-card span,
html.dark-mode .player-dashboard-stat-card span,
body.dark .player-dashboard-stat-card span,
body.dark-mode .player-dashboard-stat-item span,
html.dark .player-dashboard-stat-item span,
html.dark-mode .player-dashboard-stat-item span,
body.dark .player-dashboard-stat-item span {
    color: #b9c7da !important;
    font-weight: 800 !important;
}

/* =========================================================
   PLAYER COMPETITIONS / TRANSFERS / TROPHIES / INJURIES
   ========================================================= */

body.dark-mode .player-dashboard-competition,
html.dark .player-dashboard-competition,
html.dark-mode .player-dashboard-competition,
body.dark .player-dashboard-competition,
body.dark-mode .player-dashboard-competition-stat,
html.dark .player-dashboard-competition-stat,
html.dark-mode .player-dashboard-competition-stat,
body.dark .player-dashboard-competition-stat,
body.dark-mode .player-dashboard-transfer,
html.dark .player-dashboard-transfer,
html.dark-mode .player-dashboard-transfer,
body.dark .player-dashboard-transfer,
body.dark-mode .player-dashboard-trophy,
html.dark .player-dashboard-trophy,
html.dark-mode .player-dashboard-trophy,
body.dark .player-dashboard-trophy,
body.dark-mode .player-dashboard-injury,
html.dark .player-dashboard-injury,
html.dark-mode .player-dashboard-injury,
body.dark .player-dashboard-injury {
    background:
        linear-gradient(
            145deg,
            #14233a,
            #101e33
        ) !important;

    border-color: rgba(255,255,255,.10) !important;
    color: #ffffff !important;
}

body.dark-mode .player-dashboard-competition *,
html.dark .player-dashboard-competition *,
html.dark-mode .player-dashboard-competition *,
body.dark .player-dashboard-competition *,
body.dark-mode .player-dashboard-transfer *,
html.dark .player-dashboard-transfer *,
html.dark-mode .player-dashboard-transfer *,
body.dark .player-dashboard-transfer *,
body.dark-mode .player-dashboard-trophy *,
html.dark .player-dashboard-trophy *,
html.dark-mode .player-dashboard-trophy *,
body.dark .player-dashboard-trophy *,
body.dark-mode .player-dashboard-injury *,
html.dark .player-dashboard-injury *,
html.dark-mode .player-dashboard-injury *,
body.dark .player-dashboard-injury * {
    color: #ffffff !important;
}

/* Secondary metadata */
body.dark-mode .player-dashboard-competition-meta,
html.dark .player-dashboard-competition-meta,
html.dark-mode .player-dashboard-competition-meta,
body.dark .player-dashboard-competition-meta,
body.dark-mode .player-dashboard-transfer-date,
html.dark .player-dashboard-transfer-date,
html.dark-mode .player-dashboard-transfer-date,
body.dark .player-dashboard-transfer-date {
    color: #b9c7da !important;
    font-weight: 800 !important;
}

/* =========================================================
   EMPTY / LOADING / RETRY
   ========================================================= */

body.dark-mode .player-dashboard-empty,
html.dark .player-dashboard-empty,
html.dark-mode .player-dashboard-empty,
body.dark .player-dashboard-empty,
body.dark-mode .player-dashboard-retry,
html.dark .player-dashboard-retry,
html.dark-mode .player-dashboard-retry,
body.dark .player-dashboard-retry {
    background: #101e33 !important;
    border-color: rgba(255,255,255,.10) !important;
    color: #ffffff !important;
}

/* =========================================================
   PLAYER SECTION TITLES
   ========================================================= */

body.dark-mode .player-dashboard-section-heading,
html.dark .player-dashboard-section-heading,
html.dark-mode .player-dashboard-section-heading,
body.dark .player-dashboard-section-heading {
    color: #ffffff !important;
}

body.dark-mode .player-dashboard-section-heading *,
html.dark .player-dashboard-section-heading *,
html.dark-mode .player-dashboard-section-heading *,
body.dark .player-dashboard-section-heading * {
    color: #ffffff !important;
}

body.dark-mode .player-dashboard-eyebrow,
html.dark .player-dashboard-eyebrow,
html.dark-mode .player-dashboard-eyebrow,
body.dark .player-dashboard-eyebrow {
    color: #aebdd1 !important;
    font-weight: 900 !important;
}

/* =========================================================
   MODAL CLOSE BUTTON
   ========================================================= */

body.dark-mode .global-search-profile-close,
html.dark .global-search-profile-close,
html.dark-mode .global-search-profile-close,
body.dark .global-search-profile-close {
    background: #172640 !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    color: #ffffff !important;
}

body.dark-mode .global-search-profile-close:hover,
html.dark .global-search-profile-close:hover,
html.dark-mode .global-search-profile-close:hover,
body.dark .global-search-profile-close:hover {
    background: #223657 !important;
    color: #ffffff !important;
}



/* =========================================================
   RADAR LIVESCORE
   SEARCH DROPDOWN — DARK PREMIUM FINAL
   KHUSUS GLOBAL SEARCH
   ========================================================= */


/* =========================================================
   DROPDOWN CONTAINER
   ========================================================= */

html[data-theme="dark"] .global-search-results {
    background:
        linear-gradient(
            180deg,
            #0b1526 0%,
            #08111f 100%
        ) !important;

    border: 1px solid #263b56 !important;

    border-radius: 12px !important;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.60),
        0 0 0 1px rgba(76, 110, 145, 0.12) !important;

    color: #ffffff !important;

    overflow-x: hidden !important;
}


/* =========================================================
   SEARCH SECTION
   Teams / Players
   ========================================================= */

html[data-theme="dark"] .global-search-results
.global-search-section {

    background:
        linear-gradient(
            180deg,
            #101e32 0%,
            #0d192b 100%
        ) !important;

    color: #ffffff !important;

    font-weight: 900 !important;

    font-size: 11px !important;

    letter-spacing: 0.08em !important;

    text-transform: uppercase !important;

    border-bottom: 1px solid #263b56 !important;

    padding: 9px 14px !important;
}


/* =========================================================
   RESULT ITEM
   ========================================================= */

html[data-theme="dark"] .global-search-results
.global-search-item {

    background: #101d30 !important;

    color: #ffffff !important;

    border: 0 !important;

    border-bottom: 1px solid rgba(52, 75, 101, 0.55) !important;

    min-height: 58px !important;

    font-weight: 800 !important;

    transition:
        background 0.16s ease,
        transform 0.16s ease !important;
}


/* =========================================================
   LAST ITEM
   ========================================================= */

html[data-theme="dark"] .global-search-results
.global-search-item:last-child {

    border-bottom: 0 !important;
}


/* =========================================================
   HOVER
   ========================================================= */

html[data-theme="dark"] .global-search-results
.global-search-item:hover {

    background:
        linear-gradient(
            90deg,
            #18304d 0%,
            #142942 100%
        ) !important;

    color: #ffffff !important;
}


/* =========================================================
   IMAGE BOX
   ========================================================= */

html[data-theme="dark"] .global-search-results
.global-search-logo,
html[data-theme="dark"] .global-search-results
.global-search-item-image {

    background:
        linear-gradient(
            145deg,
            #172941 0%,
            #0d192b 100%
        ) !important;

    border: 1px solid #304866 !important;

    border-radius: 9px !important;

    color: #ffffff !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}


/* =========================================================
   IMAGE ITSELF
   ========================================================= */

html[data-theme="dark"] .global-search-results
.global-search-logo img,
html[data-theme="dark"] .global-search-results
.global-search-item-image img {

    display: block !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
}


/* =========================================================
   MAIN RESULT CONTENT
   ========================================================= */

html[data-theme="dark"] .global-search-results
.global-search-info,
html[data-theme="dark"] .global-search-results
.global-search-item-content {

    color: #ffffff !important;

    font-weight: 800 !important;
}


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

html[data-theme="dark"] .global-search-results
.global-search-info strong,
html[data-theme="dark"] .global-search-results
.global-search-item-content strong {

    color: #ffffff !important;

    font-weight: 900 !important;

    font-size: 13px !important;

    line-height: 1.25 !important;

    letter-spacing: 0.01em !important;

    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.45) !important;
}


/* =========================================================
   SECONDARY INFORMATION
   PLAYER • COUNTRY • POSITION
   ========================================================= */

html[data-theme="dark"] .global-search-results
.global-search-info small,
html[data-theme="dark"] .global-search-results
.global-search-item-content small {

    color: #d5deea !important;

    font-weight: 700 !important;

    font-size: 10.5px !important;

    line-height: 1.3 !important;
}


/* =========================================================
   PLAYER / TEAM LABEL
   ========================================================= */

html[data-theme="dark"] .global-search-results
.global-search-type {

    color: #ffffff !important;

    font-weight: 900 !important;

    letter-spacing: 0.04em !important;
}


/* =========================================================
   ARROW
   ========================================================= */

html[data-theme="dark"] .global-search-results
.global-search-item-arrow {

    color: #ffffff !important;

    font-size: 22px !important;

    font-weight: 900 !important;

    opacity: 0.90 !important;
}


/* =========================================================
   PLACEHOLDER ICON
   ========================================================= */

html[data-theme="dark"] .global-search-results
.global-search-item-placeholder {

    color: #ffffff !important;

    font-weight: 900 !important;
}


/* =========================================================
   EMPTY / MESSAGE
   ========================================================= */

html[data-theme="dark"] .global-search-results
.global-search-empty,
html[data-theme="dark"] .global-search-results
.global-search-message {

    background: #0b1526 !important;

    color: #ffffff !important;

    font-weight: 800 !important;

    border: 0 !important;
}


/* =========================================================
   SEARCH DROPDOWN SCROLLBAR
   ========================================================= */

html[data-theme="dark"] .global-search-results::-webkit-scrollbar {

    width: 6px !important;
}


html[data-theme="dark"] .global-search-results::-webkit-scrollbar-track {

    background: #08111f !important;
}


html[data-theme="dark"] .global-search-results::-webkit-scrollbar-thumb {

    background: #304866 !important;

    border-radius: 10px !important;
}


html[data-theme="dark"] .global-search-results::-webkit-scrollbar-thumb:hover {

    background: #49698c !important;
}


/* =========================================================
   ACCESSIBILITY / STRONG CONTRAST
   ========================================================= */

html[data-theme="dark"] .global-search-results
.global-search-item,
html[data-theme="dark"] .global-search-results
.global-search-item * {

    -webkit-font-smoothing: antialiased !important;

    text-rendering: optimizeLegibility !important;
}


/* =========================================================
   END SEARCH DROPDOWN DARK PREMIUM
   ========================================================= */



/* =========================================================
   RADAR LIVESCORE
   PLAYER DASHBOARD — DARK PREMIUM FINAL
   KHUSUS ISI PLAYER PROFILE
   ========================================================= */


/* =========================================================
   PLAYER PROFILE CONTENT
   ========================================================= */

html[data-theme="dark"] .global-search-profile-player.player-dashboard {

    background:
        linear-gradient(
            180deg,
            #0b1526 0%,
            #08111f 100%
        ) !important;

    color: #ffffff !important;
}


/* =========================================================
   PLAYER DASHBOARD INNER CONTENT
   ========================================================= */

html[data-theme="dark"] .global-search-profile-player.player-dashboard * {

    color: inherit;
}


/* =========================================================
   PLAYER HERO
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.global-search-profile-hero {

    background:
        linear-gradient(
            135deg,
            #13243a 0%,
            #0d1b2e 55%,
            #0a1626 100%
        ) !important;

    border: 1px solid #29415f !important;

    color: #ffffff !important;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}


/* =========================================================
   PLAYER AVATAR
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.global-search-profile-avatar {

    background:
        linear-gradient(
            145deg,
            #172b44 0%,
            #0b1728 100%
        ) !important;

    border: 1px solid #365271 !important;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.35) !important;
}


/* =========================================================
   PLAYER NAME
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.global-search-profile-main
h1,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.global-search-profile-main
h2 {

    color: #ffffff !important;

    font-weight: 900 !important;

    letter-spacing: -0.02em !important;

    text-shadow:
        0 2px 5px rgba(0, 0, 0, 0.45) !important;
}


/* =========================================================
   PLAYER PROFILE LABEL
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.global-search-profile-main
.global-search-profile-badge {

    color: #ffffff !important;

    font-weight: 900 !important;

    letter-spacing: 0.06em !important;
}


/* =========================================================
   PLAYER HERO SECONDARY TEXT
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.global-search-profile-main
span,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.global-search-profile-main
p {

    color: #dbe5f0 !important;

    font-weight: 700 !important;
}


/* =========================================================
   DASHBOARD TABS CONTAINER
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-tabs,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.global-search-profile-tabs {

    background:
        linear-gradient(
            180deg,
            #101f34 0%,
            #0c182a 100%
        ) !important;

    border: 1px solid #263e5b !important;

    color: #ffffff !important;
}


/* =========================================================
   TAB BUTTON
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-tab,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.global-search-profile-tab {

    background: transparent !important;

    color: #dbe5f0 !important;

    font-weight: 900 !important;

    border-color: transparent !important;
}


/* =========================================================
   ACTIVE TAB
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-tab.active,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-tab.is-active,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.global-search-profile-tab.active,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.global-search-profile-tab.is-active {

    background:
        linear-gradient(
            135deg,
            #173d66 0%,
            #12518a 100%
        ) !important;

    color: #ffffff !important;

    font-weight: 900 !important;

    border-color: #2f6da2 !important;

    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.28) !important;
}


/* =========================================================
   OVERVIEW WRAPPER
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.global-search-profile-grid {

    background: transparent !important;

    color: #ffffff !important;
}


/* =========================================================
   PLAYER INFORMATION CARDS
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.global-search-profile-card {

    background:
        linear-gradient(
            145deg,
            #12243a 0%,
            #0d1b2d 100%
        ) !important;

    border: 1px solid #29415f !important;

    border-radius: 12px !important;

    color: #ffffff !important;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}


/* =========================================================
   CARD HOVER
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.global-search-profile-card:hover {

    background:
        linear-gradient(
            145deg,
            #162b44 0%,
            #102238 100%
        ) !important;

    border-color: #365675 !important;
}


/* =========================================================
   CARD LABEL
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.global-search-profile-card
label,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.global-search-profile-card
small {

    color: #aebed0 !important;

    font-weight: 900 !important;

    font-size: 10px !important;

    letter-spacing: 0.07em !important;

    text-transform: uppercase !important;
}


/* =========================================================
   CARD VALUE
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.global-search-profile-card
strong {

    color: #ffffff !important;

    font-weight: 900 !important;

    font-size: 14px !important;

    line-height: 1.4 !important;

    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.35) !important;
}


/* =========================================================
   CARD NORMAL TEXT
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.global-search-profile-card
span,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.global-search-profile-card
p {

    color: #eef4fa !important;

    font-weight: 800 !important;
}


/* =========================================================
   STAT CARDS
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-stat-card {

    background:
        linear-gradient(
            145deg,
            #122943 0%,
            #0c1c30 100%
        ) !important;

    border: 1px solid #2b4968 !important;

    color: #ffffff !important;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.24) !important;
}


/* =========================================================
   STAT NUMBER
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-stat-card
strong,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-stat-value {

    color: #ffffff !important;

    font-weight: 900 !important;

    font-size: 22px !important;
}


/* =========================================================
   STAT LABEL
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-stat-card
span,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-stat-label {

    color: #c6d4e3 !important;

    font-weight: 800 !important;
}


/* =========================================================
   SECTION TITLE
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.section-title,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-section-title {

    color: #ffffff !important;

    font-weight: 900 !important;

    font-size: 15px !important;

    letter-spacing: 0.01em !important;
}


/* =========================================================
   SECTION SUBTITLE
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.section-subtitle,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-section-subtitle {

    color: #b8c7d7 !important;

    font-weight: 700 !important;
}


/* =========================================================
   TABLE / ROW STYLE
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
table {

    color: #ffffff !important;

    background: transparent !important;
}


html[data-theme="dark"]
.global-search-profile-player.player-dashboard
th {

    background: #13263d !important;

    color: #ffffff !important;

    font-weight: 900 !important;

    border-color: #29415f !important;
}


html[data-theme="dark"]
.global-search-profile-player.player-dashboard
td {

    background: #0e1d30 !important;

    color: #eef4fa !important;

    font-weight: 750 !important;

    border-color: #253b55 !important;
}


/* =========================================================
   BADGES
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.badge,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-badge {

    background:
        linear-gradient(
            135deg,
            #162d48 0%,
            #102239 100%
        ) !important;

    color: #ffffff !important;

    border: 1px solid #365675 !important;

    font-weight: 900 !important;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.empty-detail-icon {

    color: #ffffff !important;
}


html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.global-search-profile-error,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.empty-detail {

    background: #0e1d30 !important;

    border: 1px solid #29415f !important;

    color: #ffffff !important;

    font-weight: 800 !important;
}


/* =========================================================
   LINKS
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
a {

    color: #ffffff !important;

    font-weight: 800 !important;
}


html[data-theme="dark"]
.global-search-profile-player.player-dashboard
a:hover {

    color: #ffffff !important;
}


/* =========================================================
   SCROLLBAR PLAYER DASHBOARD
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard::-webkit-scrollbar {

    width: 7px !important;
}


html[data-theme="dark"]
.global-search-profile-player.player-dashboard::-webkit-scrollbar-track {

    background: #08111f !important;
}


html[data-theme="dark"]
.global-search-profile-player.player-dashboard::-webkit-scrollbar-thumb {

    background: #304866 !important;

    border-radius: 10px !important;
}


html[data-theme="dark"]
.global-search-profile-player.player-dashboard::-webkit-scrollbar-thumb:hover {

    background: #49698c !important;
}


/* =========================================================
   FINAL CONTRAST
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
strong {

    color: #ffffff !important;

    font-weight: 900 !important;
}


html[data-theme="dark"]
.global-search-profile-player.player-dashboard
b {

    color: #ffffff !important;

    font-weight: 900 !important;
}


/* =========================================================
   END PLAYER DASHBOARD DARK PREMIUM
   ========================================================= */



/* =========================================================
   RADAR LIVESCORE
   PLAYER DASHBOARD INNER CONTENT — DARK PREMIUM FINAL
   SCOPE: PLAYER DASHBOARD ONLY
   ========================================================= */


/* ---------------------------------------------------------
   PLAYER DASHBOARD MAIN INNER SURFACE
   --------------------------------------------------------- */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.global-search-profile-content {

    background:
        linear-gradient(
            180deg,
            #0b1526 0%,
            #08111f 100%
        ) !important;

    color: #ffffff !important;
}


/* ---------------------------------------------------------
   PLAYER DASHBOARD INNER WRAPPER
   --------------------------------------------------------- */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-content {

    background:
        linear-gradient(
            180deg,
            #0b1526 0%,
            #08111f 100%
        ) !important;

    color: #ffffff !important;
}


/* ---------------------------------------------------------
   PLAYER DASHBOARD SECTIONS
   --------------------------------------------------------- */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-section {

    background:
        linear-gradient(
            145deg,
            #101e32 0%,
            #0b1829 100%
        ) !important;

    color: #ffffff !important;

    border-color: #29415f !important;
}


/* ---------------------------------------------------------
   ALL DIRECT CONTENT SURFACES
   --------------------------------------------------------- */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-section > div {

    color: #ffffff !important;
}


/* ---------------------------------------------------------
   INNER CARDS — FORCE DARK SURFACE
   --------------------------------------------------------- */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.global-search-profile-card {

    background:
        linear-gradient(
            145deg,
            #12243a 0%,
            #0d1b2d 100%
        ) !important;

    color: #ffffff !important;

    border-color: #29415f !important;
}


/* ---------------------------------------------------------
   PLAYER INFORMATION VALUES
   --------------------------------------------------------- */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.global-search-profile-card
strong {

    color: #ffffff !important;

    font-weight: 900 !important;
}


/* ---------------------------------------------------------
   PLAYER INFORMATION LABELS
   --------------------------------------------------------- */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.global-search-profile-card
label,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.global-search-profile-card
small {

    color: #d5deea !important;

    font-weight: 900 !important;
}


/* ---------------------------------------------------------
   NORMAL TEXT
   --------------------------------------------------------- */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.global-search-profile-card
span,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.global-search-profile-card
p {

    color: #eef4fa !important;

    font-weight: 800 !important;
}


/* ---------------------------------------------------------
   TABS CONTAINER
   --------------------------------------------------------- */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-tabs {

    background:
        #0d192b !important;

    border-color: #263b56 !important;

    color: #ffffff !important;
}


/* ---------------------------------------------------------
   TAB TEXT
   --------------------------------------------------------- */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-tab {

    color: #dbe5f0 !important;

    font-weight: 900 !important;
}


/* ---------------------------------------------------------
   ACTIVE TAB
   --------------------------------------------------------- */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-tab.active,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-tab.is-active {

    background:
        linear-gradient(
            135deg,
            #173d66 0%,
            #12518a 100%
        ) !important;

    color: #ffffff !important;

    font-weight: 900 !important;

    border-color: #2f6da2 !important;
}


/* ---------------------------------------------------------
   SECTION TITLES
   --------------------------------------------------------- */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.section-title,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-section-title {

    color: #ffffff !important;

    font-weight: 900 !important;
}


/* ---------------------------------------------------------
   SECTION SUBTITLES
   --------------------------------------------------------- */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.section-subtitle,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-section-subtitle {

    color: #c6d4e3 !important;

    font-weight: 800 !important;
}


/* ---------------------------------------------------------
   STAT CARDS
   --------------------------------------------------------- */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-stat-card {

    background:
        linear-gradient(
            145deg,
            #122943 0%,
            #0c1c30 100%
        ) !important;

    color: #ffffff !important;

    border-color: #2b4968 !important;
}


/* ---------------------------------------------------------
   STAT VALUES
   --------------------------------------------------------- */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-stat-card
strong,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-stat-value {

    color: #ffffff !important;

    font-weight: 900 !important;
}


/* ---------------------------------------------------------
   STAT LABELS
   --------------------------------------------------------- */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-stat-card
span,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-stat-label {

    color: #c6d4e3 !important;

    font-weight: 800 !important;
}


/* ---------------------------------------------------------
   TABLE
   --------------------------------------------------------- */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
table {

    background: transparent !important;

    color: #ffffff !important;
}


/* ---------------------------------------------------------
   TABLE HEADER
   --------------------------------------------------------- */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
th {

    background:
        #13263d !important;

    color: #ffffff !important;

    font-weight: 900 !important;

    border-color: #29415f !important;
}


/* ---------------------------------------------------------
   TABLE BODY
   --------------------------------------------------------- */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
td {

    background:
        #0e1d30 !important;

    color: #eef4fa !important;

    font-weight: 800 !important;

    border-color: #253b55 !important;
}


/* ---------------------------------------------------------
   GENERIC DARK OVERRIDE
   ONLY INSIDE PLAYER DASHBOARD
   --------------------------------------------------------- */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
div,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
article,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
section {

    border-color: inherit;
}


/* ---------------------------------------------------------
   FINAL TEXT CONTRAST
   --------------------------------------------------------- */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
strong,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
b {

    color: #ffffff !important;

    font-weight: 900 !important;
}


/* =========================================================
   END PLAYER DASHBOARD INNER DARK PREMIUM
   ========================================================= */


/* =========================================================
   RADAR LIVESCORE — PLAYER DASHBOARD WHITE AREA FINAL FIX
   Dark premium override for remaining white containers
   ========================================================= */

html[data-theme="dark"] .global-search-profile-player.player-dashboard {
    background: #07111f !important;
    color: #ffffff !important;
}

/* TOP PLAYER HERO — the remaining white area */
html[data-theme="dark"] .global-search-profile-player.player-dashboard .global-search-profile-hero,
html[data-theme="dark"] .global-search-profile-player.player-dashboard .global-search-profile-hero.player {
    background:
        linear-gradient(
            145deg,
            #111c31 0%,
            #0c1729 55%,
            #091321 100%
        ) !important;
    border: 1px solid rgba(96, 165, 250, .22) !important;
    box-shadow:
        0 14px 35px rgba(0, 0, 0, .28),
        inset 0 1px 0 rgba(255, 255, 255, .035) !important;
    color: #ffffff !important;
}

/* Everything inside the top hero */
html[data-theme="dark"] .global-search-profile-player.player-dashboard .global-search-profile-hero *,
html[data-theme="dark"] .global-search-profile-player.player-dashboard .global-search-profile-hero.player * {
    color: #ffffff !important;
}

/* PLAYER DASHBOARD CONTENT */
html[data-theme="dark"] .global-search-profile-player.player-dashboard .global-search-profile-content,
html[data-theme="dark"] .global-search-profile-player.player-dashboard .player-dashboard-content {
    background:
        linear-gradient(
            180deg,
            #0b1525 0%,
            #08111f 100%
        ) !important;
    color: #ffffff !important;
}

/* OVERVIEW / INNER WHITE PANEL */
html[data-theme="dark"] .global-search-profile-player.player-dashboard .player-dashboard-panel,
html[data-theme="dark"] .global-search-profile-player.player-dashboard .global-search-profile-card {
    background:
        linear-gradient(
            145deg,
            #101b2d 0%,
            #0b1525 100%
        ) !important;
    border-color: rgba(96, 165, 250, .18) !important;
    color: #ffffff !important;
    box-shadow:
        0 12px 30px rgba(0, 0, 0, .22),
        inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}

/* Section itself */
html[data-theme="dark"] .global-search-profile-player.player-dashboard .player-dashboard-section {
    background:
        linear-gradient(
            145deg,
            #101b2d 0%,
            #0b1525 100%
        ) !important;
    color: #ffffff !important;
    border-color: rgba(96, 165, 250, .16) !important;
}

/* Information cards inside Overview */
html[data-theme="dark"] .global-search-profile-player.player-dashboard .player-dashboard-info-card {
    background:
        linear-gradient(
            145deg,
            #142238 0%,
            #0e192b 100%
        ) !important;
    border-color: rgba(148, 163, 184, .16) !important;
    color: #ffffff !important;
}

/* Catch nested white backgrounds used by the overview fields */
html[data-theme="dark"] .global-search-profile-player.player-dashboard .player-dashboard-info-card > *,
html[data-theme="dark"] .global-search-profile-player.player-dashboard .player-dashboard-section > * {
    color: #ffffff !important;
}

/* Labels */
html[data-theme="dark"] .global-search-profile-player.player-dashboard .player-dashboard-info-card span,
html[data-theme="dark"] .global-search-profile-player.player-dashboard .player-dashboard-info-card small {
    color: #cbd5e1 !important;
}

/* Values */
html[data-theme="dark"] .global-search-profile-player.player-dashboard .player-dashboard-info-card strong {
    color: #ffffff !important;
    font-weight: 900 !important;
}

/* Remove any inherited white background from direct overview containers */
html[data-theme="dark"] .global-search-profile-player.player-dashboard .player-dashboard-overview,
html[data-theme="dark"] .global-search-profile-player.player-dashboard .player-dashboard-overview-grid {
    background: transparent !important;
    color: #ffffff !important;
}

/* Keep avatar image area visually premium */
html[data-theme="dark"] .global-search-profile-player.player-dashboard .player-dashboard-avatar {
    background: #0b1525 !important;
    border-color: rgba(148, 163, 184, .20) !important;
}

/* Strong final text contrast */
html[data-theme="dark"] .global-search-profile-player.player-dashboard strong,
html[data-theme="dark"] .global-search-profile-player.player-dashboard b {
    color: #ffffff !important;
    font-weight: 900 !important;
}

/* =========================================================
   END PLAYER DASHBOARD WHITE AREA FINAL FIX
   ========================================================= */


/* =========================================================
   RADAR LIVESCORE
   PLAYER DASHBOARD — INNER CARDS DARK PREMIUM FINAL
   SCOPE: PLAYER DASHBOARD ONLY
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-competition,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-competition-stat,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-transfer,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-trophy,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-injury,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-trophy-summary,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-stat-item {

    background:
        linear-gradient(
            145deg,
            #12243a 0%,
            #0c1b2e 100%
        ) !important;

    color: #ffffff !important;

    border-color: #294563 !important;

    box-shadow:
        0 6px 18px rgba(0, 0, 0, .18),
        inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}


/* =========================================================
   COMPETITION STAT CARDS
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-competition-stat {

    background:
        linear-gradient(
            145deg,
            #142941 0%,
            #0d1d31 100%
        ) !important;

    border-color: #2c4968 !important;
}

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-competition-stat span {

    color: #b9c9da !important;

    font-weight: 900 !important;
}

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-competition-stat strong {

    color: #ffffff !important;

    font-weight: 900 !important;
}


/* =========================================================
   COMPETITION TITLE / META
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-competition-title {

    color: #ffffff !important;

    font-weight: 900 !important;
}

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-competition-meta {

    color: #b8c7d8 !important;

    font-weight: 800 !important;
}


/* =========================================================
   TRANSFERS
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-transfer {

    background:
        linear-gradient(
            145deg,
            #13273e 0%,
            #0d1c2f 100%
        ) !important;

    border-color: #2b4968 !important;
}

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-transfer-date {

    color: #b8c7d8 !important;

    font-weight: 900 !important;
}

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-transfer-club {

    color: #ffffff !important;

    font-weight: 900 !important;
}

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-transfer-club span {

    color: #ffffff !important;

    font-weight: 900 !important;
}

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-transfer-arrow {

    color: #8fb8df !important;

    font-weight: 900 !important;
}

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-transfer-fee {

    color: #ffffff !important;

    font-weight: 900 !important;
}


/* =========================================================
   TROPHY SUMMARY
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-trophy-summary {

    background:
        linear-gradient(
            145deg,
            #142941 0%,
            #0d1d31 100%
        ) !important;

    border: 1px solid #294563 !important;

    color: #ffffff !important;
}

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-trophy-summary strong {

    color: #ffffff !important;

    font-weight: 900 !important;
}

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-trophy-summary span {

    color: #bdcddd !important;

    font-weight: 900 !important;
}


/* =========================================================
   TROPHIES
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-trophy {

    background:
        linear-gradient(
            145deg,
            #142941 0%,
            #0d1d31 100%
        ) !important;

    border-color: #2b4968 !important;
}

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-trophy-icon {

    background:
        linear-gradient(
            145deg,
            #182f49 0%,
            #102238 100%
        ) !important;

    border-color: #355676 !important;

    color: #ffffff !important;
}

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-trophy-content strong {

    color: #ffffff !important;

    font-weight: 900 !important;
}

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-trophy-content > span {

    color: #c3d0de !important;

    font-weight: 800 !important;
}

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-trophy-content > div {

    color: #dbe6f0 !important;

    font-weight: 800 !important;
}


/* =========================================================
   INJURIES
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-injury {

    background:
        linear-gradient(
            145deg,
            #142941 0%,
            #0d1d31 100%
        ) !important;

    border-color: #2b4968 !important;
}

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-injury-icon {

    background:
        linear-gradient(
            145deg,
            #182f49 0%,
            #102238 100%
        ) !important;

    border-color: #355676 !important;

    color: #ffffff !important;
}

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-injury-main strong {

    color: #ffffff !important;

    font-weight: 900 !important;
}

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-injury-main span {

    color: #c3d0de !important;

    font-weight: 800 !important;
}


/* =========================================================
   STATISTIC CARDS
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-stat-card,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-stat-item {

    background:
        linear-gradient(
            145deg,
            #142941 0%,
            #0d1d31 100%
        ) !important;

    border-color: #2b4968 !important;

    color: #ffffff !important;
}

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-stat-card
strong,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-stat-item
strong {

    color: #ffffff !important;

    font-weight: 900 !important;
}

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-stat-card
span,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-stat-item
span {

    color: #c5d3e1 !important;

    font-weight: 900 !important;
}


/* =========================================================
   FORCE DARK BACKGROUND FOR NESTED WHITE ELEMENTS
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-competition *,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-transfer *,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-trophy *,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-injury * {

    --card-bg: #0e1d30 !important;
    --surface-color: #0e1d30 !important;
}


/* =========================================================
   FINAL TEXT CONTRAST
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-competition strong,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-transfer strong,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-trophy strong,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-injury strong {

    color: #ffffff !important;

    font-weight: 900 !important;
}


/* =========================================================
   END PLAYER DASHBOARD INNER CARDS DARK PREMIUM FINAL
   ========================================================= */


/* =========================================================
   RADAR LIVESCORE
   PLAYER DASHBOARD HERO — DARK PREMIUM FINAL
   ONLY PLAYER HERO
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-hero {

    background:
        linear-gradient(
            145deg,
            #111f34 0%,
            #0d1a2d 50%,
            #091321 100%
        ) !important;

    border: 1px solid #294b70 !important;

    color: #ffffff !important;

    box-shadow:
        0 14px 35px rgba(0, 0, 0, .30),
        inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}


/* =========================================================
   HERO ALL TEXT
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-hero
* {

    color: #ffffff !important;
}


/* =========================================================
   PLAYER NAME
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-hero-main h2 {

    color: #ffffff !important;

    font-weight: 900 !important;

    text-shadow:
        0 1px 10px rgba(255,255,255,.08) !important;
}


/* =========================================================
   HERO KICKER
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-kicker {

    color: #dbe7f3 !important;

    font-weight: 900 !important;

    opacity: 1 !important;
}


/* =========================================================
   HERO SUBTITLE
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-subtitle {

    color: #d7e3ef !important;

    font-weight: 800 !important;

    opacity: 1 !important;
}


/* =========================================================
   HERO BADGES
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-badge {

    background:
        linear-gradient(
            145deg,
            #172b43 0%,
            #102238 100%
        ) !important;

    border: 1px solid #365a7d !important;

    color: #ffffff !important;

    font-weight: 900 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035) !important;
}


/* AVAILABLE BADGE */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-badge.is-success {

    background:
        linear-gradient(
            145deg,
            #123528 0%,
            #0d2920 100%
        ) !important;

    border-color: rgba(34,197,94,.55) !important;

    color: #ffffff !important;
}


/* =========================================================
   AVATAR CONTAINER
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-avatar {

    background:
        linear-gradient(
            145deg,
            #162b44 0%,
            #0d1b2e 100%
        ) !important;

    border: 1px solid #42617f !important;

    box-shadow:
        0 8px 20px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.04) !important;
}


/* =========================================================
   AVATAR IMAGE
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-avatar img {

    background: transparent !important;
}


/* =========================================================
   HERO DIRECT CHILDREN
   PREVENT WHITE FALLBACK SURFACES
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-hero
.player-dashboard-hero-main {

    background: transparent !important;

    color: #ffffff !important;
}


/* =========================================================
   FINAL HERO CONTRAST
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-hero
strong,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-hero
b {

    color: #ffffff !important;

    font-weight: 900 !important;
}


/* =========================================================
   END PLAYER DASHBOARD HERO DARK PREMIUM FINAL
   ========================================================= */


/* =========================================================
   RADAR LIVESCORE
   PLAYER DASHBOARD — SECTION COUNT BADGES DARK PREMIUM
   SCOPE: PLAYER DASHBOARD ONLY
   FIX: 3 competitions / 4 transfers / 17 records
   ========================================================= */

/* ---------------------------------------------------------
   COUNT / BADGE ELEMENTS
   --------------------------------------------------------- */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
[class*="count"],
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
[class*="badge"],
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
[class*="records"] {

    background:
        linear-gradient(
            145deg,
            #162b43 0%,
            #0d1c2f 100%
        ) !important;

    color: #ffffff !important;

    border: 1px solid #365a7d !important;

    font-weight: 900 !important;

    opacity: 1 !important;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, .20),
        inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}


/* ---------------------------------------------------------
   SECTION HEADER COUNT BADGES
   --------------------------------------------------------- */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-section
[class*="count"],
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-section
[class*="badge"] {

    background:
        linear-gradient(
            145deg,
            #18324e 0%,
            #102238 100%
        ) !important;

    color: #ffffff !important;

    border: 1px solid #3b648b !important;

    font-weight: 900 !important;

    opacity: 1 !important;

    text-shadow:
        0 1px 3px rgba(0, 0, 0, .35) !important;
}


/* ---------------------------------------------------------
   COMPETITIONS COUNT
   --------------------------------------------------------- */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-competition
[class*="count"],
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-competition
[class*="badge"] {

    background:
        linear-gradient(
            145deg,
            #173552 0%,
            #0e2035 100%
        ) !important;

    color: #ffffff !important;

    border-color: #3d668e !important;

    font-weight: 900 !important;
}


/* ---------------------------------------------------------
   TRANSFERS COUNT
   --------------------------------------------------------- */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-transfer
[class*="count"],
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-transfer
[class*="badge"] {

    background:
        linear-gradient(
            145deg,
            #173552 0%,
            #0e2035 100%
        ) !important;

    color: #ffffff !important;

    border-color: #3d668e !important;

    font-weight: 900 !important;
}


/* ---------------------------------------------------------
   TROPHIES COUNT
   --------------------------------------------------------- */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-trophy
[class*="count"],
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-trophy
[class*="badge"] {

    background:
        linear-gradient(
            145deg,
            #173552 0%,
            #0e2035 100%
        ) !important;

    color: #ffffff !important;

    border-color: #3d668e !important;

    font-weight: 900 !important;
}


/* ---------------------------------------------------------
   INJURIES / RECORDS COUNT
   --------------------------------------------------------- */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-injury
[class*="count"],
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-injury
[class*="badge"] {

    background:
        linear-gradient(
            145deg,
            #173552 0%,
            #0e2035 100%
        ) !important;

    color: #ffffff !important;

    border-color: #3d668e !important;

    font-weight: 900 !important;
}


/* ---------------------------------------------------------
   FORCE WHITE TEXT INSIDE COUNT BADGES
   --------------------------------------------------------- */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
[class*="count"] *,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
[class*="badge"] * {

    color: #ffffff !important;

    font-weight: 900 !important;

    opacity: 1 !important;
}


/* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
[class*="count"]:hover,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
[class*="badge"]:hover {

    background:
        linear-gradient(
            145deg,
            #1d4163 0%,
            #12304d 100%
        ) !important;

    color: #ffffff !important;

    border-color: #4c7da8 !important;
}


/* =========================================================
   END PLAYER DASHBOARD SECTION COUNT BADGES DARK PREMIUM
   ========================================================= */


/* =========================================================
   RADAR LIVESCORE
   PLAYER DASHBOARD — COUNT BADGE FINAL VISUAL FIX
   TARGET:
   3 competitions
   4 transfers
   17 records
   ========================================================= */

/* =========================================================
   ALL SMALL COUNT / RECORD BADGES
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-section
span[class*="count"],
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-section
span[class*="badge"],
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-section
div[class*="count"],
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-section
div[class*="badge"] {

    background:
        linear-gradient(
            145deg,
            #183653 0%,
            #0d2035 100%
        ) !important;

    color: #ffffff !important;

    border: 1px solid #416b93 !important;

    font-weight: 900 !important;

    opacity: 1 !important;

    text-shadow:
        0 1px 3px rgba(0, 0, 0, .45) !important;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, .22),
        inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}


/* =========================================================
   FORCE EVERY TEXT NODE INSIDE BADGE
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-section
span[class*="count"] *,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-section
span[class*="badge"] *,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-section
div[class*="count"] *,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-section
div[class*="badge"] * {

    color: #ffffff !important;

    font-weight: 900 !important;

    opacity: 1 !important;
}


/* =========================================================
   COMPETITION COUNT
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-section
.player-dashboard-competition-stat
+ span,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-section
.player-dashboard-competition-count {

    background:
        linear-gradient(
            145deg,
            #183653 0%,
            #0d2035 100%
        ) !important;

    color: #ffffff !important;

    border: 1px solid #416b93 !important;

    font-weight: 900 !important;
}


/* =========================================================
   TRANSFER COUNT
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-transfer-count {

    background:
        linear-gradient(
            145deg,
            #183653 0%,
            #0d2035 100%
        ) !important;

    color: #ffffff !important;

    border: 1px solid #416b93 !important;

    font-weight: 900 !important;
}


/* =========================================================
   RECORD COUNT
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-injury-count {

    background:
        linear-gradient(
            145deg,
            #183653 0%,
            #0d2035 100%
        ) !important;

    color: #ffffff !important;

    border: 1px solid #416b93 !important;

    font-weight: 900 !important;
}


/* =========================================================
   TROPHY COUNT
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-trophy-count {

    background:
        linear-gradient(
            145deg,
            #183653 0%,
            #0d2035 100%
        ) !important;

    color: #ffffff !important;

    border: 1px solid #416b93 !important;

    font-weight: 900 !important;
}


/* =========================================================
   HOVER PREMIUM
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-section
span[class*="count"]:hover,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-section
span[class*="badge"]:hover {

    background:
        linear-gradient(
            145deg,
            #21496c 0%,
            #12304c 100%
        ) !important;

    color: #ffffff !important;

    border-color: #5685ae !important;
}


/* =========================================================
   FINAL FORCE
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-section
[class*="count"],
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-section
[class*="badge"] {

    color: #ffffff !important;

    font-weight: 900 !important;

    opacity: 1 !important;
}


/* =========================================================
   END PLAYER DASHBOARD COUNT BADGE FINAL VISUAL FIX
   ========================================================= */


/* =========================================================
   RADAR LIVESCORE
   PLAYER DASHBOARD — EXACT COUNT BADGE DARK FIX
   TARGET ONLY:
   3 competitions
   4 transfers
   17 records
   ========================================================= */


/* =========================================================
   SECTION HEADER — BADGE / COUNT
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-section-header
span,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-section-header
strong,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-section-header
small,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-section-header
.badge,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-section-header
.count {

    background:
        linear-gradient(
            145deg,
            #183653 0%,
            #0c1d31 100%
        ) !important;

    color: #ffffff !important;

    border: 1px solid #416b93 !important;

    border-radius: 999px !important;

    font-weight: 900 !important;

    opacity: 1 !important;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, .25),
        inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}


/* =========================================================
   FORCE TEXT INSIDE BADGE
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-section-header
span *,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-section-header
strong *,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-section-header
small * {

    background: transparent !important;

    color: #ffffff !important;

    font-weight: 900 !important;

    opacity: 1 !important;
}


/* =========================================================
   SECTION TITLE AREA
   KEEP TITLE DARK / WHITE
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-section-header {

    background: transparent !important;

    color: #ffffff !important;
}


/* =========================================================
   COMPETITION SECTION
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-competition-section
.player-dashboard-section-header
span:last-child,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-competition-section
.player-dashboard-section-header
small:last-child {

    background:
        linear-gradient(
            145deg,
            #183653 0%,
            #0c1d31 100%
        ) !important;

    color: #ffffff !important;

    border: 1px solid #416b93 !important;

    font-weight: 900 !important;
}


/* =========================================================
   TRANSFERS SECTION
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-transfers-section
.player-dashboard-section-header
span:last-child,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-transfers-section
.player-dashboard-section-header
small:last-child {

    background:
        linear-gradient(
            145deg,
            #183653 0%,
            #0c1d31 100%
        ) !important;

    color: #ffffff !important;

    border: 1px solid #416b93 !important;

    font-weight: 900 !important;
}


/* =========================================================
   INJURIES SECTION
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-injuries-section
.player-dashboard-section-header
span:last-child,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-injuries-section
.player-dashboard-section-header
small:last-child {

    background:
        linear-gradient(
            145deg,
            #183653 0%,
            #0c1d31 100%
        ) !important;

    color: #ffffff !important;

    border: 1px solid #416b93 !important;

    font-weight: 900 !important;
}


/* =========================================================
   HOVER
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-section-header
span:hover,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-section-header
small:hover {

    background:
        linear-gradient(
            145deg,
            #21496c 0%,
            #12304d 100%
        ) !important;

    color: #ffffff !important;

    border-color: #5a88b0 !important;
}


/* =========================================================
   FINAL CONTRAST
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-section-header
[class*="count"],
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-section-header
[class*="badge"],
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-section-header
[class*="record"] {

    background:
        linear-gradient(
            145deg,
            #183653 0%,
            #0c1d31 100%
        ) !important;

    color: #ffffff !important;

    border-color: #416b93 !important;

    font-weight: 900 !important;

    opacity: 1 !important;
}


/* =========================================================
   END PLAYER DASHBOARD EXACT COUNT BADGE DARK FIX
   ========================================================= */


/* =========================================================
   RADAR LIVESCORE
   PLAYER DASHBOARD — REAL COUNT BADGE FINAL
   TARGET: .player-dashboard-count
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-count {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    min-height: 34px !important;

    padding: 7px 14px !important;

    background:
        linear-gradient(
            145deg,
            #183653 0%,
            #0c1d31 100%
        ) !important;

    color: #ffffff !important;

    border: 1px solid #416b93 !important;

    border-radius: 999px !important;

    font-size: 13px !important;

    line-height: 1.2 !important;

    font-weight: 900 !important;

    letter-spacing: .1px !important;

    white-space: nowrap !important;

    opacity: 1 !important;

    text-shadow:
        0 1px 2px rgba(0,0,0,.35) !important;

    box-shadow:
        0 4px 12px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.06) !important;

    flex-shrink: 0 !important;
}


/* =========================================================
   FORCE TEXT
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-count,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-count * {

    color: #ffffff !important;

    font-weight: 900 !important;

    opacity: 1 !important;

    background: transparent !important;
}


/* =========================================================
   HOVER
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-count:hover {

    background:
        linear-gradient(
            145deg,
            #21496c 0%,
            #12304d 100%
        ) !important;

    color: #ffffff !important;

    border-color: #5a88b0 !important;

    transform: translateY(-1px) !important;

    box-shadow:
        0 6px 16px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}


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

@media (max-width: 620px) {

    html[data-theme="dark"]
    .global-search-profile-player.player-dashboard
    .player-dashboard-count {

        min-height: 32px !important;

        padding: 6px 11px !important;

        font-size: 12px !important;
    }
}


/* =========================================================
   END PLAYER DASHBOARD REAL COUNT BADGE FINAL
   ========================================================= */


/* =========================================================
   RADAR LIVESCORE
   PLAYER DASHBOARD — SEASON SNAPSHOT DARK PREMIUM
   TARGET ONLY:
   PERFORMANCE SUMMARY / SEASON SNAPSHOT
   ========================================================= */


/* =========================================================
   SNAPSHOT PANEL
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-panel {

    background:
        linear-gradient(
            145deg,
            #101f35 0%,
            #0b1729 55%,
            #091321 100%
        ) !important;

    border: 1px solid #29415f !important;

    border-radius: 18px !important;

    color: #ffffff !important;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, .28),
        inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}


/* =========================================================
   SEASON SNAPSHOT — TURUNKAN SEDIKIT
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-section {

    padding-top: 12px !important;

    margin-top: 10px !important;

    color: #ffffff !important;
}


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

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-section-heading {

    display: flex !important;

    align-items: flex-end !important;

    justify-content: space-between !important;

    gap: 16px !important;

    padding-top: 8px !important;

    padding-bottom: 14px !important;

    color: #ffffff !important;
}


/* =========================================================
   SEASON SNAPSHOT EYEBROW
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-eyebrow {

    display: block !important;

    margin-bottom: 5px !important;

    color: #63b8ff !important;

    font-size: 11px !important;

    line-height: 1.25 !important;

    font-weight: 900 !important;

    letter-spacing: .7px !important;

    text-transform: uppercase !important;

    opacity: 1 !important;
}


/* =========================================================
   PERFORMANCE SUMMARY TITLE
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-section-heading h3 {

    margin: 0 !important;

    color: #ffffff !important;

    font-size: 20px !important;

    line-height: 1.25 !important;

    font-weight: 900 !important;

    letter-spacing: -.2px !important;

    text-shadow:
        0 1px 2px rgba(0,0,0,.35) !important;
}


/* =========================================================
   STAT GRID
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-stat-grid {

    display: grid !important;

    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    gap: 10px !important;

    margin-top: 4px !important;
}


/* =========================================================
   STAT CARD — DARK
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-stat-card {

    min-height: 76px !important;

    padding: 13px 14px !important;

    background:
        linear-gradient(
            145deg,
            #122943 0%,
            #0d2036 100%
        ) !important;

    border: 1px solid #2d638c !important;

    border-radius: 15px !important;

    color: #ffffff !important;

    box-shadow:
        0 5px 14px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.035) !important;

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease !important;
}


/* =========================================================
   STAT CARD HOVER
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-stat-card:hover {

    transform: translateY(-2px) !important;

    background:
        linear-gradient(
            145deg,
            #173653 0%,
            #102a43 100%
        ) !important;

    border-color: #4b91bf !important;

    box-shadow:
        0 8px 20px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.05) !important;
}


/* =========================================================
   STAT LABEL
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-stat-card
span,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-stat-card
label,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-stat-label {

    color: #b9d7ee !important;

    font-size: 10px !important;

    line-height: 1.25 !important;

    font-weight: 900 !important;

    letter-spacing: .45px !important;

    text-transform: uppercase !important;

    opacity: 1 !important;
}


/* =========================================================
   STAT VALUE
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-stat-card
strong,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-stat-value {

    display: block !important;

    margin-top: 5px !important;

    color: #ffffff !important;

    font-size: 20px !important;

    line-height: 1.1 !important;

    font-weight: 900 !important;

    letter-spacing: -.2px !important;

    opacity: 1 !important;

    text-shadow:
        0 1px 2px rgba(0,0,0,.4) !important;
}


/* =========================================================
   FORCE EVERYTHING INSIDE STAT CARD
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-stat-card * {

    color: inherit !important;

    opacity: 1 !important;
}


/* =========================================================
   PREVENT WHITE BACKGROUND FROM OLD CSS
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-stat-card,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-stat-card::before,
html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-stat-card::after {

    background-color: transparent !important;
}


/* Re-apply the actual dark gradient after
   transparent background reset */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-stat-card {

    background:
        linear-gradient(
            145deg,
            #122943 0%,
            #0d2036 100%
        ) !important;
}


/* =========================================================
   SNAPSHOT PANEL INTERNAL SPACING
   ========================================================= */

html[data-theme="dark"]
.global-search-profile-player.player-dashboard
.player-dashboard-panel
.player-dashboard-stat-grid {

    padding-bottom: 4px !important;
}


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

@media (max-width: 900px) {

    html[data-theme="dark"]
    .global-search-profile-player.player-dashboard
    .player-dashboard-stat-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }
}


@media (max-width: 620px) {

    html[data-theme="dark"]
    .global-search-profile-player.player-dashboard
    .player-dashboard-section-heading {

        align-items: flex-start !important;

        flex-direction: column !important;

        gap: 8px !important;
    }

    html[data-theme="dark"]
    .global-search-profile-player.player-dashboard
    .player-dashboard-stat-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 8px !important;
    }

    html[data-theme="dark"]
    .global-search-profile-player.player-dashboard
    .player-dashboard-stat-card {

        min-height: 70px !important;

        padding: 11px 12px !important;
    }

    html[data-theme="dark"]
    .global-search-profile-player.player-dashboard
    .player-dashboard-stat-card
    strong,
    html[data-theme="dark"]
    .global-search-profile-player.player-dashboard
    .player-dashboard-stat-value {

        font-size: 18px !important;
    }
}


/* =========================================================
   END PLAYER DASHBOARD — SEASON SNAPSHOT DARK PREMIUM
   ========================================================= */


/* =========================================================
   RADAR LIVESCORE
   MAIN LIVESCORE UI — FINAL RESPONSIVE SYSTEM

   SCOPE:
   - Livescore layout
   - Competition headers
   - Match cards
   - Teams
   - Scores
   - Status / time
   - Light mode
   - Dark mode
   - PC
   - Laptop
   - Tablet
   - Mobile
   - Small mobile

   DO NOT TOUCH:
   - Player Dashboard
   - Team Dashboard
   - Global Search logic
   - livescore.js
   ========================================================= */


/* =========================================================
   BASE LIVESCORE LAYOUT
   ========================================================= */

.dashboard {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    box-sizing: border-box;

    display: grid;

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

    gap: 14px;

    align-items: start;
}


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

.left-sidebar,
.sidebar-left,
.competitions-sidebar {

    min-width: 0;

    box-sizing: border-box;

    border-radius: 14px;
}


/* =========================================================
   MAIN CONTENT
   ========================================================= */

.main-content,
.center-content,
.matches-area {

    width: 100%;
    max-width: 100%;
    min-width: 0;

    box-sizing: border-box;
}


/* =========================================================
   COMPETITION / FILTER AREA
   ========================================================= */

.matches-toolbar,
.match-controls,
.competition-filter {

    display: flex;

    align-items: center;

    gap: 8px;

    width: 100%;

    box-sizing: border-box;

    flex-wrap: wrap;
}


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

.league-header {

    width: 100%;

    min-width: 0;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding: 12px 14px;

    border-radius: 14px 14px 0 0;
}


/* =========================================================
   LEAGUE INFO
   ========================================================= */

.league-info {

    min-width: 0;

    flex: 1 1 auto;

    display: flex;

    align-items: center;

    gap: 10px;
}


/* =========================================================
   LEAGUE NAME
   ========================================================= */

.league-name {

    min-width: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 2px;
}


.league-name strong {

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 14px;

    line-height: 1.3;

    font-weight: 800;
}


.league-name small {

    font-size: 11px;

    line-height: 1.3;

    font-weight: 600;
}


/* =========================================================
   LEAGUE ACTIONS
   ========================================================= */

.league-actions {

    flex: 0 0 auto;

    display: flex;

    align-items: center;

    gap: 6px;
}


/* =========================================================
   LEAGUE MATCHES
   ========================================================= */

.league-matches {

    width: 100%;

    min-width: 0;

    box-sizing: border-box;
}


/* =========================================================
   MATCH CARD — BASE
   ========================================================= */

.match-card {

    position: relative;

    width: 100%;

    max-width: 100%;

    min-width: 0;

    box-sizing: border-box;

    display: grid;

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

    align-items: center;

    gap: 10px;

    min-height: 72px;

    padding: 12px 16px;

    border-radius: 0;

    overflow: hidden;

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}


/* =========================================================
   HOME / AWAY TEAM
   ========================================================= */

.match-home,
.match-away {

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 9px;

    line-height: 1.3;
}


.match-home {

    justify-content: flex-end;

    text-align: right;
}


.match-away {

    justify-content: flex-start;

    text-align: left;
}


/* =========================================================
   TEAM LOGO
   ========================================================= */

.match-home img,
.match-away img {

    width: 30px;

    height: 30px;

    object-fit: contain;

    flex: 0 0 30px;

    display: block;
}


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

.match-home .team-name,
.match-away .team-name,
.match-home-name,
.match-away-name,
.home-team,
.away-team {

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 13px;

    line-height: 1.35;

    font-weight: 750;
}


/* =========================================================
   SCORE CENTER
   ========================================================= */

.match-score {

    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 3px;

    text-align: center;
}


.match-score .score,
.match-score strong {

    font-size: 20px;

    line-height: 1;

    font-weight: 900;

    letter-spacing: -.3px;
}


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

.match-time,
.match-status {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 20px;

    font-size: 10px;

    line-height: 1.2;

    font-weight: 800;

    white-space: nowrap;
}


/* =========================================================
   STATUS BADGE
   ========================================================= */

.match-status {

    padding: 3px 7px;

    border-radius: 999px;
}


/* =========================================================
   MATCH META
   ========================================================= */

.match-meta,
.match-info {

    font-size: 11px;

    line-height: 1.3;

    font-weight: 650;
}


/* =========================================================
   MATCH HOVER
   ========================================================= */

.match-card:hover {

    transform: translateY(-1px);
}


/* =========================================================
   LIGHT MODE
   ========================================================= */

html:not([data-theme="dark"]) {

    --ls-bg: #eef5fb;
    --ls-surface: #ffffff;
    --ls-surface-soft: #f7faff;
    --ls-line: #d8e2ec;

    --ls-text: #101828;
    --ls-text-strong: #07111f;
    --ls-muted: #667085;

    --ls-accent: #1268a9;
    --ls-accent-soft: #e6f2fc;
}


/* =========================================================
   LIGHT — BODY AREA
   ========================================================= */

html:not([data-theme="dark"]) .dashboard {

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


/* =========================================================
   LIGHT — LEAGUE
   ========================================================= */

html:not([data-theme="dark"]) .league-header {

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f5f9fd 100%
        );

    border: 1px solid var(--ls-line);

    color: var(--ls-text-strong);

    box-shadow:
        0 3px 10px rgba(16,24,40,.05);
}


html:not([data-theme="dark"]) .league-name strong {

    color: #07111f;

    font-weight: 850;
}


html:not([data-theme="dark"]) .league-name small {

    color: #667085;

    font-weight: 650;
}


/* =========================================================
   LIGHT — MATCH CARD
   ========================================================= */

html:not([data-theme="dark"]) .match-card {

    background: #ffffff;

    border-left: 1px solid var(--ls-line);

    border-right: 1px solid var(--ls-line);

    border-bottom: 1px solid var(--ls-line);

    color: #101828;
}


html:not([data-theme="dark"]) .match-card:hover {

    background: #f8fbfe;

    box-shadow:
        0 5px 14px rgba(16,24,40,.06);
}


/* =========================================================
   LIGHT — TEAMS
   ========================================================= */

html:not([data-theme="dark"]) .match-home,
html:not([data-theme="dark"]) .match-away {

    color: #101828;

    font-weight: 750;
}


html:not([data-theme="dark"]) .match-home .team-name,
html:not([data-theme="dark"]) .match-away .team-name,
html:not([data-theme="dark"]) .home-team,
html:not([data-theme="dark"]) .away-team {

    color: #07111f;

    font-weight: 850;
}


/* =========================================================
   LIGHT — SCORE
   ========================================================= */

html:not([data-theme="dark"]) .match-score,
html:not([data-theme="dark"]) .match-score strong,
html:not([data-theme="dark"]) .match-score .score {

    color: #07111f;

    font-weight: 900;
}


/* =========================================================
   LIGHT — TIME / META
   ========================================================= */

html:not([data-theme="dark"]) .match-time,
html:not([data-theme="dark"]) .match-meta,
html:not([data-theme="dark"]) .match-info {

    color: #475467;

    font-weight: 700;
}


/* =========================================================
   LIGHT — STATUS
   ========================================================= */

html:not([data-theme="dark"]) .match-status {

    background: #edf4fa;

    border: 1px solid #cbdbea;

    color: #1d4f73;

    font-weight: 850;
}


/* =========================================================
   DARK MODE VARIABLES
   ========================================================= */

html[data-theme="dark"] {

    --ls-bg: #07111f;
    --ls-surface: #0d1b2d;
    --ls-surface-soft: #102239;
    --ls-line: #253d57;

    --ls-text: #ffffff;
    --ls-text-strong: #ffffff;
    --ls-muted: #aac4da;

    --ls-accent: #63b8ff;
    --ls-accent-soft: #12304c;
}


/* =========================================================
   DARK — MAIN LAYOUT
   ========================================================= */

html[data-theme="dark"] .dashboard {

    color: #ffffff;
}


/* =========================================================
   DARK — LEAGUE HEADER
   ========================================================= */

html[data-theme="dark"] .league-header {

    background:
        linear-gradient(
            145deg,
            #132a43 0%,
            #0c1b2e 100%
        ) !important;

    border: 1px solid #29445f !important;

    color: #ffffff !important;

    box-shadow:
        0 6px 18px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.035);
}


html[data-theme="dark"] .league-name strong {

    color: #ffffff !important;

    font-weight: 900 !important;
}


html[data-theme="dark"] .league-name small {

    color: #a9c5dc !important;

    font-weight: 700 !important;
}


/* =========================================================
   DARK — MATCH CARD
   ========================================================= */

html[data-theme="dark"] .match-card {

    background:
        linear-gradient(
            145deg,
            #0f2034 0%,
            #0b1829 100%
        ) !important;

    border-left: 1px solid #253e58 !important;

    border-right: 1px solid #253e58 !important;

    border-bottom: 1px solid #253e58 !important;

    color: #ffffff !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.018);
}


html[data-theme="dark"] .match-card:hover {

    background:
        linear-gradient(
            145deg,
            #142d48 0%,
            #0e2137 100%
        ) !important;

    border-color: #345775 !important;

    box-shadow:
        0 7px 18px rgba(0,0,0,.25);
}


/* =========================================================
   DARK — TEAM TEXT
   ========================================================= */

html[data-theme="dark"] .match-home,
html[data-theme="dark"] .match-away {

    color: #ffffff !important;

    font-weight: 800 !important;
}


html[data-theme="dark"] .match-home .team-name,
html[data-theme="dark"] .match-away .team-name,
html[data-theme="dark"] .home-team,
html[data-theme="dark"] .away-team {

    color: #ffffff !important;

    font-weight: 900 !important;
}


/* =========================================================
   DARK — SCORE
   ========================================================= */

html[data-theme="dark"] .match-score,
html[data-theme="dark"] .match-score strong,
html[data-theme="dark"] .match-score .score {

    color: #ffffff !important;

    font-weight: 900 !important;
}


/* =========================================================
   DARK — TIME / META
   ========================================================= */

html[data-theme="dark"] .match-time,
html[data-theme="dark"] .match-meta,
html[data-theme="dark"] .match-info {

    color: #b8d1e6 !important;

    font-weight: 750 !important;
}


/* =========================================================
   DARK — STATUS
   ========================================================= */

html[data-theme="dark"] .match-status {

    background:
        linear-gradient(
            145deg,
            #183653 0%,
            #0d2137 100%
        ) !important;

    border: 1px solid #3a6487 !important;

    color: #ffffff !important;

    font-weight: 900 !important;
}


/* =========================================================
   DARK — FORCE TEXT
   ========================================================= */

html[data-theme="dark"] .matches-area
.match-card * {

    opacity: 1 !important;
}


/* =========================================================
   LIVE VISUAL EMPHASIS
   ========================================================= */

html[data-theme="dark"] .match-card.is-live,
html[data-theme="dark"] .match-card.live,
html[data-theme="dark"] .match-card[data-live="true"] {

    border-color: #397da8 !important;

    box-shadow:
        0 0 0 1px rgba(70,160,210,.12),
        0 6px 18px rgba(0,0,0,.25);
}


html:not([data-theme="dark"]) .match-card.is-live,
html:not([data-theme="dark"]) .match-card.live,
html:not([data-theme="dark"]) .match-card[data-live="true"] {

    border-color: #7db8dd;
}


/* =========================================================
   COMPETITION LIST SPACING
   ========================================================= */

.matches-area > * {

    min-width: 0;

    box-sizing: border-box;
}


/* =========================================================
   DESKTOP LARGE
   1201px+
   ========================================================= */

@media (min-width: 1201px) {

    .dashboard {

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

        gap: 16px;
    }

    .match-card {

        min-height: 76px;

        padding-left: 20px;

        padding-right: 20px;
    }

    .match-home .team-name,
    .match-away .team-name,
    .home-team,
    .away-team {

        font-size: 14px;
    }

    .match-score .score,
    .match-score strong {

        font-size: 21px;
    }
}


/* =========================================================
   LAPTOP
   901px - 1200px
   ========================================================= */

@media (min-width: 901px) and (max-width: 1200px) {

    .dashboard {

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

        gap: 12px;
    }

    .match-card {

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

        min-height: 72px;

        padding:
            11px 14px;
    }

    .match-home .team-name,
    .match-away .team-name,
    .home-team,
    .away-team {

        font-size: 13px;
    }
}


/* =========================================================
   TABLET
   769px - 900px
   ========================================================= */

@media (min-width: 769px) and (max-width: 900px) {

    .dashboard {

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

        gap: 10px;
    }

    .match-card {

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

        min-height: 68px;

        padding:
            10px 12px;
    }

    .match-home,
    .match-away {

        gap: 7px;
    }

    .match-home img,
    .match-away img {

        width: 27px;

        height: 27px;

        flex-basis: 27px;
    }

    .match-home .team-name,
    .match-away .team-name,
    .home-team,
    .away-team {

        font-size: 12px;
    }

    .match-score .score,
    .match-score strong {

        font-size: 18px;
    }
}


/* =========================================================
   SMALL TABLET / LARGE PHONE
   601px - 768px
   ========================================================= */

@media (min-width: 601px) and (max-width: 768px) {

    .dashboard {

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

        gap: 8px;
    }

    .left-sidebar,
    .sidebar-left,
    .competitions-sidebar {

        max-width: 165px;
    }

    .main-nav {

        width: 100%;

        overflow-x: auto;

        scrollbar-width: thin;
    }

    .match-card {

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

        min-height: 66px;

        padding:
            9px 10px;
    }

    .match-home img,
    .match-away img {

        width: 25px;

        height: 25px;

        flex-basis: 25px;
    }

    .match-home .team-name,
    .match-away .team-name,
    .home-team,
    .away-team {

        font-size: 11px;
    }

    .match-score .score,
    .match-score strong {

        font-size: 17px;
    }
}


/* =========================================================
   MOBILE
   <= 600px
   ========================================================= */

@media (max-width: 600px) {

    .dashboard {

        display: block;

        width: 100%;

        max-width: 100%;
    }

    .left-sidebar,
    .sidebar-left,
    .competitions-sidebar {

        width: 100%;

        max-width: 100%;

        margin-bottom: 10px;
    }

    .main-content,
    .center-content,
    .matches-area {

        width: 100%;

        max-width: 100%;
    }

    .main-nav {

        width: 100%;

        overflow-x: auto;

        white-space: nowrap;

        scrollbar-width: thin;
    }

    .matches-toolbar,
    .match-controls,
    .competition-filter {

        width: 100%;

        flex-wrap: wrap;

        gap: 7px;
    }

    .league-header {

        padding:
            10px 11px;

        gap: 8px;

        border-radius: 12px 12px 0 0;
    }

    .league-info {

        gap: 7px;
    }

    .league-name strong {

        font-size: 12px;
    }

    .league-name small {

        font-size: 10px;
    }

    .match-card {

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

        min-height: 62px;

        padding:
            8px 8px;

        gap: 6px;
    }

    .match-home,
    .match-away {

        gap: 5px;
    }

    .match-home img,
    .match-away img {

        width: 23px;

        height: 23px;

        flex-basis: 23px;
    }

    .match-home .team-name,
    .match-away .team-name,
    .home-team,
    .away-team {

        font-size: 10px;

        line-height: 1.25;
    }

    .match-score .score,
    .match-score strong {

        font-size: 16px;
    }

    .match-time,
    .match-status {

        font-size: 9px;
    }

    .match-status {

        padding:
            3px 5px;
    }

    .match-meta,
    .match-info {

        font-size: 9px;
    }
}


/* =========================================================
   VERY SMALL PHONE
   <= 420px
   ========================================================= */

@media (max-width: 420px) {

    .league-header {

        padding:
            9px 9px;
    }

    .league-name strong {

        font-size: 11px;
    }

    .league-name small {

        font-size: 9px;
    }

    .match-card {

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

        min-height: 59px;

        padding:
            7px 6px;

        gap: 4px;
    }

    .match-home img,
    .match-away img {

        width: 21px;

        height: 21px;

        flex-basis: 21px;
    }

    .match-home .team-name,
    .match-away .team-name,
    .home-team,
    .away-team {

        font-size: 9px;
    }

    .match-score .score,
    .match-score strong {

        font-size: 15px;
    }

    .match-time,
    .match-status {

        font-size: 8px;
    }
}


/* =========================================================
   EXTREMELY SMALL PHONE
   <= 360px
   ========================================================= */

@media (max-width: 360px) {

    .league-header {

        padding:
            8px;
    }

    .match-card {

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

        min-height: 56px;

        padding:
            6px 5px;
    }

    .match-home img,
    .match-away img {

        width: 19px;

        height: 19px;

        flex-basis: 19px;
    }

    .match-home .team-name,
    .match-away .team-name,
    .home-team,
    .away-team {

        font-size: 8.5px;
    }

    .match-score .score,
    .match-score strong {

        font-size: 14px;
    }
}


/* =========================================================
   PREVENT HORIZONTAL OVERFLOW
   ========================================================= */

.dashboard,
.main-content,
.center-content,
.matches-area,
.league-header,
.league-matches,
.match-card {

    max-width: 100%;

    overflow-x: hidden;

    box-sizing: border-box;
}


/* =========================================================
   END RADAR LIVESCORE FINAL RESPONSIVE SYSTEM
   ========================================================= */



/* =========================================================
   RADAR LIVESCORE — PROFESSIONAL UI V2
   REAL STRUCTURE MATCH
   Uses actual livescore.html + livescore.js selectors
   ========================================================= */


/* =========================================================
   GLOBAL LIVESCORE VARIABLES
   ========================================================= */

:root {
    --rl-bg: #f4f7fb;
    --rl-surface: #ffffff;
    --rl-surface-soft: #f8fafc;
    --rl-surface-hover: #f1f6fc;

    --rl-line: #dfe7f1;
    --rl-line-strong: #ccd8e6;

    --rl-text: #101828;
    --rl-text-strong: #07111f;
    --rl-muted: #667085;

    --rl-blue: #1769d1;
    --rl-blue-soft: #eaf3ff;

    --rl-green: #079455;
    --rl-green-soft: #e8f8f1;

    --rl-red: #e63946;
    --rl-red-soft: #fff0f1;

    --rl-shadow-sm:
        0 2px 8px rgba(16, 24, 40, .05);

    --rl-shadow:
        0 8px 24px rgba(16, 24, 40, .07);

    --rl-radius: 14px;
}


/* =========================================================
   DARK VARIABLES
   ========================================================= */

html[data-theme="dark"] {
    --rl-bg: #06111f;
    --rl-surface: #0c1a2b;
    --rl-surface-soft: #102238;
    --rl-surface-hover: #142a43;

    --rl-line: #000000;
    --rl-line-strong: #000000;

    --rl-text: #ffffff;
    --rl-text-strong: #ffffff;
    --rl-muted: #aac2d8;

    --rl-blue: #69b9ff;
    --rl-blue-soft: #123452;

    --rl-green: #42d99b;
    --rl-green-soft: #103b2d;

    --rl-red: #ff6873;
    --rl-red-soft: #401c22;

    --rl-shadow-sm:
        0 2px 10px rgba(0, 0, 0, .22);

    --rl-shadow:
        0 12px 32px rgba(0, 0, 0, .28);
}


/* =========================================================
   MAIN DASHBOARD
   ========================================================= */

.dashboard {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;

    display: grid;

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

    gap: 16px;

    padding: 16px;

    box-sizing: border-box;

    background:
        radial-gradient(
            circle at top right,
            rgba(23, 105, 209, .055),
            transparent 32%
        );

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


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

.sidebar,
.right-sidebar {
    min-width: 0;
    box-sizing: border-box;
}


/* =========================================================
   LEFT SIDEBAR CONTAINER
   ========================================================= */

.sidebar {
    background: var(--rl-surface);

    border: 1px solid var(--rl-line);

    border-radius: var(--rl-radius);

    box-shadow: var(--rl-shadow-sm);

    overflow: hidden;

    align-self: start;
}


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

.sidebar-title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 48px;

    padding: 0 14px;

    border-bottom: 1px solid var(--rl-line);

    background:
        linear-gradient(
            180deg,
            var(--rl-surface),
            var(--rl-surface-soft)
        );

    color: var(--rl-text-strong);

    font-size: 13px;
    font-weight: 900;

    letter-spacing: .02em;

    box-sizing: border-box;
}


.sidebar-more-button {
    width: 30px;
    height: 30px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--rl-line);

    border-radius: 8px;

    background: var(--rl-surface);

    color: var(--rl-text);

    cursor: pointer;
}


/* =========================================================
   BASIC SIDEBAR ITEMS
   ========================================================= */

.sidebar-group {
    border-bottom: 1px solid var(--rl-line);
}


.sidebar-basic-group {
    padding: 7px;
}


.competition-item {
    min-height: 42px;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 8px 10px;

    border-radius: 10px;

    color: var(--rl-text);

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;

    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}


.competition-item:hover {
    background: var(--rl-surface-hover);
    color: var(--rl-blue);
}


.competition-item.active {
    background:
        linear-gradient(
            135deg,
            var(--rl-blue-soft),
            var(--rl-surface-soft)
        );

    color: var(--rl-blue);

    box-shadow:
        inset 3px 0 0 var(--rl-blue);
}


.competition-icon {
    width: 24px;
    min-width: 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 17px;
}


.competition-item .live-dot,
.sidebar .live-dot {
    width: 8px;
    height: 8px;

    min-width: 8px;

    border-radius: 50%;

    background: var(--rl-red);

    box-shadow:
        0 0 0 4px var(--rl-red-soft);
}


/* =========================================================
   POPULAR COMPETITIONS
   ========================================================= */

.popular-competitions-group {
    padding: 8px;
}


.popular-competitions-toggle,
.other-competitions-toggle,
.cup-competitions-toggle {
    width: 100%;

    min-height: 42px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 9px 10px;

    border: 1px solid var(--rl-line);

    border-radius: 10px;

    background: var(--rl-surface-soft);

    color: var(--rl-text-strong);

    font-size: 11px;
    font-weight: 900;

    letter-spacing: .04em;

    cursor: pointer;

    box-sizing: border-box;
}


.popular-competitions-toggle:hover,
.other-competitions-toggle:hover,
.cup-competitions-toggle:hover {
    background: var(--rl-surface-hover);
}


.popular-competitions-list {
    display: flex;
    flex-direction: column;

    gap: 3px;

    margin-top: 6px;
}


.popular-competition-item {
    min-height: 48px;

    display: grid;

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

    align-items: center;

    gap: 9px;

    padding: 6px 8px;

    border: 1px solid transparent;

    border-radius: 10px;

    background: transparent;

    color: var(--rl-text);

    text-decoration: none;

    box-sizing: border-box;

    transition:
        background .18s ease,
        border-color .18s ease;
}


.popular-competition-item:hover {
    background: var(--rl-surface-hover);

    border-color: var(--rl-line);
}


.popular-competition-logo {
    width: 32px;
    height: 32px;

    object-fit: contain;

    display: block;

    border-radius: 7px;

    background: #ffffff;

    padding: 3px;

    box-sizing: border-box;
}


.popular-competition-info {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;
}


.popular-competition-info strong {
    overflow: hidden;

    color: var(--rl-text-strong);

    font-size: 12px;
    font-weight: 900;

    line-height: 1.2;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.popular-competition-info small {
    color: var(--rl-muted);

    font-size: 10px;
    font-weight: 700;

    line-height: 1.2;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   OTHER / CUP COMPETITIONS
   ========================================================= */

.other-competitions-group,
.cup-competitions-section {
    padding: 8px;
}


.other-competitions-panel,
.sidebar-competition-list {
    margin-top: 6px;

    border-radius: 10px;

    overflow: hidden;
}


.other-competitions-loading {
    min-height: 42px;

    display: flex;
    align-items: center;

    padding: 9px 10px;

    border: 1px dashed var(--rl-line-strong);

    border-radius: 9px;

    color: var(--rl-muted);

    background: var(--rl-surface-soft);

    font-size: 11px;
    font-weight: 700;
}


/* =========================================================
   MATCHES AREA
   ========================================================= */

.matches-area {
    min-width: 0;

    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 12px;

    color: var(--rl-text);

    box-sizing: border-box;
}


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

.matches-area .page-loading {
    min-height: 180px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-direction: column;

    gap: 8px;

    padding: 28px;

    border: 1px solid var(--rl-line);

    border-radius: var(--rl-radius);

    background:
        linear-gradient(
            145deg,
            var(--rl-surface),
            var(--rl-surface-soft)
        );

    box-shadow: var(--rl-shadow-sm);

    color: var(--rl-text);

    text-align: center;

    box-sizing: border-box;
}


.matches-area .page-loading .empty-detail-icon {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background: var(--rl-blue-soft);

    font-size: 25px;
}


.matches-area .page-loading strong {
    color: var(--rl-text-strong);

    font-size: 14px;
    font-weight: 900;
}


.matches-area .page-loading span {
    color: var(--rl-muted);

    font-size: 12px;
    font-weight: 600;
}


/* =========================================================
   LEAGUE BLOCK
   ========================================================= */

.livescore-league {
    width: 100%;

    overflow: hidden;

    border: 1px solid var(--rl-line);

    border-radius: var(--rl-radius);

    background: var(--rl-surface);

    box-shadow: var(--rl-shadow-sm);

    box-sizing: border-box;
}


.livescore-league + .livescore-league {
    margin-top: 1px;
}


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

.livescore-league-header {
    min-height: 58px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 9px 14px;

    border-bottom: 1px solid var(--rl-line);

    background:
        linear-gradient(
            135deg,
            var(--rl-surface-soft),
            var(--rl-surface)
        );

    box-sizing: border-box;
}


.league-heading {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 10px;
}


.league-logo {
    width: 34px;
    height: 34px;

    min-width: 34px;

    display: block;

    object-fit: contain;

    border-radius: 8px;

    background: #ffffff;

    padding: 3px;

    box-sizing: border-box;
}


.league-logo-fallback {
    width: 34px;
    height: 34px;

    min-width: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: var(--rl-blue-soft);

    font-size: 17px;
}


.league-heading > div {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;
}


.league-heading strong {
    overflow: hidden;

    color: var(--rl-text-strong);

    font-size: 13px;
    font-weight: 900;

    line-height: 1.25;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.league-heading span {
    color: var(--rl-muted);

    font-size: 10px;
    font-weight: 700;

    line-height: 1.2;
}


.league-match-count {
    min-width: 28px;
    height: 28px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 8px;

    border: 1px solid var(--rl-line-strong);

    border-radius: 999px;

    background: var(--rl-surface);

    color: var(--rl-text-strong);

    font-size: 11px;
    font-weight: 900;

    box-sizing: border-box;
}


/* =========================================================
   MATCH LIST
   ========================================================= */

.livescore-match-list {
    width: 100%;

    display: flex;
    flex-direction: column;

    background: var(--rl-surface);
}


.livescore-match-list > .livescore-match-card + .livescore-match-card {
    border-top: 1px solid var(--rl-line);
}


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

.livescore-match-card {
    position: relative;

    width: 100%;
    min-height: 76px;

    display: grid;

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

    align-items: stretch;

    background: var(--rl-surface);

    color: var(--rl-text);

    box-sizing: border-box;

    transition:
        background .16s ease,
        box-shadow .16s ease;
}


.livescore-match-card:hover {
    background: var(--rl-surface-hover);

    z-index: 1;
}


.livescore-match-card.is-live {
    background:
        linear-gradient(
            90deg,
            var(--rl-red-soft),
            var(--rl-surface) 24%
        );
}


.livescore-match-card.is-live::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 3px;

    background: var(--rl-red);
}


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

.match-time-column {
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 8px;

    border-right: 1px solid var(--rl-line);

    box-sizing: border-box;
}


.match-status {
    min-width: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 5px;

    padding: 5px 7px;

    border-radius: 7px;

    color: var(--rl-muted);

    background: var(--rl-surface-soft);

    font-size: 10px;
    font-weight: 900;

    line-height: 1;

    text-align: center;

    box-sizing: border-box;
}


.match-status.upcoming {
    color: var(--rl-blue);

    background: var(--rl-blue-soft);
}


.match-status.finished {
    color: var(--rl-muted);

    background: var(--rl-surface-soft);

    border: 1px solid var(--rl-line);
}


.match-status.live {
    color: #ffffff;

    background: var(--rl-red);

    border: 1px solid var(--rl-red);

    box-shadow:
        0 4px 12px rgba(230, 57, 70, .22);
}


.match-status .live-dot {
    width: 6px;
    height: 6px;

    min-width: 6px;

    border-radius: 50%;

    background: #ffffff;

    animation: radarLivePulse 1.35s ease-in-out infinite;
}


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

    50% {
        opacity: .45;
        transform: scale(.72);
    }
}


/* =========================================================
   TWO TEAM ROWS
   ========================================================= */

.match-teams {
    min-width: 0;

    display: flex;
    flex-direction: column;

    justify-content: center;

    padding: 6px 12px;

    box-sizing: border-box;
}


.match-team {
    min-width: 0;
    min-height: 31px;

    display: grid;

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

    align-items: center;

    gap: 8px;

    box-sizing: border-box;
}


.match-team + .match-team {
    margin-top: 2px;
}


.match-team-logo {
    width: 25px;
    height: 25px;

    min-width: 25px;

    display: block;

    object-fit: contain;

    border-radius: 6px;

    background: #ffffff;

    box-sizing: border-box;
}


.match-team-logo-fallback {
    width: 25px;
    height: 25px;

    min-width: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 6px;

    background: var(--rl-surface-soft);

    color: var(--rl-muted);

    font-size: 13px;
}


.match-team-name {
    min-width: 0;

    overflow: hidden;

    color: var(--rl-text);

    font-size: 12px;
    font-weight: 750;

    line-height: 1.25;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.match-score {
    min-width: 28px;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    color: var(--rl-text-strong);

    font-size: 15px;
    font-weight: 950;

    line-height: 1;

    text-align: right;
}


/* =========================================================
   LIVE SCORE EMPHASIS
   ========================================================= */

.livescore-match-card.is-live .match-team-name {
    font-weight: 850;
}


.livescore-match-card.is-live .match-score {
    color: var(--rl-text-strong);

    font-size: 16px;
    font-weight: 950;
}


.livescore-match-card.is-live .match-team-logo {
    box-shadow:
        0 0 0 1px var(--rl-line);
}


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

.right-sidebar {
    display: flex;
    flex-direction: column;

    gap: 12px;
}


.right-sidebar > * {
    min-width: 0;
    box-sizing: border-box;
}


.sidebar-banners,
.rankings-sidebar,
.whatsapp-sidebar,
.telegram-sidebar {
    width: 100%;

    border: 1px solid var(--rl-line);

    border-radius: var(--rl-radius);

    background: var(--rl-surface);

    box-shadow: var(--rl-shadow-sm);

    overflow: hidden;
}


/* =========================================================
   DARK MODE — FORCE REAL LIVESCORE CONTENT
   ========================================================= */

html[data-theme="dark"] .dashboard,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .matches-area,
html[data-theme="dark"] .right-sidebar {
    color: #ffffff;
}


html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .livescore-league,
html[data-theme="dark"] .livescore-match-card,
html[data-theme="dark"] .livescore-match-list,
html[data-theme="dark"] .sidebar-banners,
html[data-theme="dark"] .rankings-sidebar,
html[data-theme="dark"] .whatsapp-sidebar,
html[data-theme="dark"] .telegram-sidebar {
    background: var(--rl-surface);
}


html[data-theme="dark"] .sidebar-title,
html[data-theme="dark"] .popular-competitions-toggle,
html[data-theme="dark"] .other-competitions-toggle,
html[data-theme="dark"] .cup-competitions-toggle,
html[data-theme="dark"] .livescore-league-header {
    background:
        linear-gradient(
            135deg,
            #10243a,
            #0c1a2b
        );

    color: #ffffff;
}


html[data-theme="dark"] .competition-item,
html[data-theme="dark"] .popular-competition-item,
html[data-theme="dark"] .match-team-name,
html[data-theme="dark"] .league-heading strong,
html[data-theme="dark"] .popular-competition-info strong,
html[data-theme="dark"] .match-score {
    color: #ffffff;
}


html[data-theme="dark"] .competition-item:hover,
html[data-theme="dark"] .popular-competition-item:hover,
html[data-theme="dark"] .livescore-match-card:hover {
    background: #142a43;
}


html[data-theme="dark"] .competition-item.active {
    background:
        linear-gradient(
            135deg,
            #123452,
            #10243a
        );

    color: #ffffff;
}


html[data-theme="dark"] .popular-competition-info small,
html[data-theme="dark"] .league-heading span,
html[data-theme="dark"] .other-competitions-loading {
    color: #aac2d8;
}


html[data-theme="dark"] .league-match-count {
    background: #10243a;
    color: #ffffff;

    border-color: #31506f;
}


html[data-theme="dark"] .match-time-column {
    border-color: #223b56;
}


html[data-theme="dark"] .match-status.finished {
    background: #142a43;
    color: #c2d5e6;
    border-color: #31506f;
}


html[data-theme="dark"] .match-team-logo,
html[data-theme="dark"] .league-logo,
html[data-theme="dark"] .popular-competition-logo {
    background: #ffffff;
}


/* =========================================================
   DESKTOP LARGE
   ========================================================= */

@media (min-width: 1400px) {

    .dashboard {
        grid-template-columns:
            255px
            minmax(0, 1fr)
            300px;

        gap: 18px;

        padding: 18px;
    }

    .livescore-match-card {
        min-height: 80px;

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

    .match-team {
        grid-template-columns:
            30px
            minmax(0, 1fr)
            42px;

        gap: 9px;
    }

    .match-team-name {
        font-size: 13px;
    }

    .match-score {
        font-size: 16px;
    }

    .livescore-match-card.is-live .match-score {
        font-size: 17px;
    }
}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (min-width: 1001px) and (max-width: 1399px) {

    .dashboard {
        grid-template-columns:
            225px
            minmax(0, 1fr)
            250px;

        gap: 12px;

        padding: 12px;
    }

    .livescore-match-card {
        min-height: 72px;

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

    .match-teams {
        padding: 5px 10px;
    }

    .match-team {
        grid-template-columns:
            27px
            minmax(0, 1fr)
            34px;

        gap: 7px;
    }

    .match-team-name {
        font-size: 11.5px;
    }

    .match-score {
        font-size: 14px;
    }
}


/* =========================================================
   TABLET / SMALL LAPTOP
   ========================================================= */

@media (min-width: 769px) and (max-width: 1000px) {

    .dashboard {
        grid-template-columns:
            190px
            minmax(0, 1fr);

        gap: 10px;

        padding: 10px;
    }

    .right-sidebar {
        grid-column: 1 / -1;

        display: grid;

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

        gap: 10px;
    }

    .livescore-match-card {
        min-height: 68px;

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

    .match-team {
        grid-template-columns:
            25px
            minmax(0, 1fr)
            32px;

        gap: 6px;
    }

    .match-team-logo,
    .match-team-logo-fallback {
        width: 23px;
        height: 23px;
        min-width: 23px;
    }

    .match-team-name {
        font-size: 11px;
    }

    .match-score {
        font-size: 13px;
    }

    .league-heading strong {
        font-size: 12px;
    }
}


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

@media (max-width: 768px) {

    .dashboard {
        display: flex;
        flex-direction: column;

        gap: 10px;

        padding: 8px;
    }

    .sidebar,
    .matches-area,
    .right-sidebar {
        width: 100%;
        max-width: 100%;
    }

    .sidebar {
        overflow: hidden;
    }

    .sidebar-basic-group {
        display: flex;

        overflow-x: auto;

        gap: 5px;

        padding: 6px;

        scrollbar-width: thin;
    }

    .sidebar-basic-group .competition-item {
        flex: 0 0 auto;

        min-width: max-content;
    }

    .popular-competitions-list {
        display: grid;

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

        gap: 4px;
    }

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

    .right-sidebar {
        display: grid;

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

        gap: 8px;
    }

    .livescore-league-header {
        min-height: 52px;

        padding: 8px 10px;
    }

    .league-logo,
    .league-logo-fallback {
        width: 30px;
        height: 30px;
        min-width: 30px;
    }

    .league-heading strong {
        font-size: 11.5px;
    }

    .league-heading span {
        font-size: 9px;
    }

    .livescore-match-card {
        min-height: 64px;

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

    .match-time-column {
        padding: 6px;
    }

    .match-status {
        min-width: 42px;

        padding: 4px 5px;

        font-size: 9px;
    }

    .match-teams {
        padding: 5px 8px;
    }

    .match-team {
        min-height: 27px;

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

        gap: 6px;
    }

    .match-team-logo,
    .match-team-logo-fallback {
        width: 21px;
        height: 21px;
        min-width: 21px;
    }

    .match-team-name {
        font-size: 10.5px;
    }

    .match-score {
        font-size: 13px;
    }

    .livescore-match-card.is-live .match-score {
        font-size: 14px;
    }
}


/* =========================================================
   SMALL PHONE
   ========================================================= */

@media (max-width: 520px) {

    .dashboard {
        padding: 5px;

        gap: 7px;
    }

    .sidebar,
    .livescore-league {
        border-radius: 11px;
    }

    .popular-competitions-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .popular-competition-item {
        grid-template-columns:
            30px
            minmax(0, 1fr);

        gap: 6px;

        min-height: 43px;

        padding: 5px 6px;
    }

    .popular-competition-logo {
        width: 27px;
        height: 27px;
    }

    .popular-competition-info strong {
        font-size: 10px;
    }

    .popular-competition-info small {
        font-size: 8px;
    }

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

    .livescore-league-header {
        min-height: 48px;

        padding: 7px 8px;
    }

    .league-logo,
    .league-logo-fallback {
        width: 27px;
        height: 27px;
        min-width: 27px;
    }

    .league-heading {
        gap: 7px;
    }

    .league-heading strong {
        font-size: 10.5px;
    }

    .league-heading span {
        font-size: 8px;
    }

    .league-match-count {
        min-width: 24px;
        height: 24px;

        padding: 0 6px;

        font-size: 9px;
    }

    .livescore-match-card {
        min-height: 60px;

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

    .match-time-column {
        padding: 5px;
    }

    .match-status {
        min-width: 39px;

        padding: 4px;

        font-size: 8px;
    }

    .match-teams {
        padding: 4px 6px;
    }

    .match-team {
        min-height: 25px;

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

        gap: 5px;
    }

    .match-team-logo,
    .match-team-logo-fallback {
        width: 19px;
        height: 19px;
        min-width: 19px;
    }

    .match-team-name {
        font-size: 9.5px;
    }

    .match-score {
        font-size: 12px;
    }

    .livescore-match-card.is-live .match-score {
        font-size: 13px;
    }
}


/* =========================================================
   VERY SMALL PHONE
   ========================================================= */

@media (max-width: 360px) {

    .dashboard {
        padding: 3px;
    }

    .popular-competition-item {
        grid-template-columns:
            26px
            minmax(0, 1fr);

        gap: 5px;

        padding: 4px 5px;
    }

    .popular-competition-logo {
        width: 24px;
        height: 24px;
    }

    .popular-competition-info strong {
        font-size: 9px;
    }

    .popular-competition-info small {
        display: none;
    }

    .livescore-match-card {
        min-height: 57px;

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

    .match-team {
        grid-template-columns:
            19px
            minmax(0, 1fr)
            24px;

        gap: 4px;
    }

    .match-team-logo,
    .match-team-logo-fallback {
        width: 18px;
        height: 18px;
        min-width: 18px;
    }

    .match-team-name {
        font-size: 9px;
    }

    .match-score {
        font-size: 11px;
    }

    .match-status {
        min-width: 36px;

        font-size: 7px;
    }
}


/* =========================================================
   SAFETY — NO HORIZONTAL OVERFLOW
   ========================================================= */

.dashboard,
.sidebar,
.matches-area,
.right-sidebar,
.livescore-league,
.livescore-league-header,
.livescore-match-list,
.livescore-match-card,
.match-teams,
.match-team {
    max-width: 100%;

    box-sizing: border-box;
}


.matches-area,
.livescore-match-list,
.sidebar {
    overflow-x: hidden;
}


/* =========================================================
   END RADAR LIVESCORE — PROFESSIONAL UI V2
   ========================================================= */


/* =========================================================
   RADAR LIVESCORE — PERFORMANCE V3
   Browser rendering optimization
   ========================================================= */

.livescore-match-list {
    contain: layout paint;
}

.livescore-league {
    content-visibility: auto;
    contain-intrinsic-size: 0 180px;
}

.livescore-match-card {
    contain: layout paint;
}

.match-team-logo,
.league-logo {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    object-fit: contain;
    display: block;
}

.match-team-logo-fallback,
.league-logo-fallback {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.right-sidebar {
    min-width: 0;
    contain: layout paint;
}

.right-sidebar .sidebar-banners {
    display: grid;
    gap: 10px;
}

.right-sidebar .sidebar-banner {
    width: 100%;
    height: auto;
    max-height: 180px;
    object-fit: cover;
    display: block;
}

.right-sidebar .whatsapp-sidebar,
.right-sidebar .telegram-sidebar,
.right-sidebar .rankings-sidebar {
    contain: layout paint;
}

.right-sidebar .whatsapp-sidebar img,
.right-sidebar .telegram-sidebar img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 150px;
    object-fit: contain;
}

@media (max-width: 1000px) {

    .livescore-league {
        contain-intrinsic-size: 0 150px;
    }

    .right-sidebar .sidebar-banner {
        max-height: 150px;
    }

    .right-sidebar .whatsapp-sidebar img,
    .right-sidebar .telegram-sidebar img {
        max-height: 120px;
    }

}

@media (max-width: 768px) {

    .livescore-league {
        contain-intrinsic-size: 0 130px;
    }

    .match-team-logo,
    .league-logo,
    .match-team-logo-fallback,
    .league-logo-fallback {
        width: 25px;
        height: 25px;
        min-width: 25px;
        min-height: 25px;
    }

    .right-sidebar .sidebar-banner {
        max-height: 130px;
    }

}

@media (max-width: 520px) {

    .livescore-league {
        contain-intrinsic-size: 0 110px;
    }

    .match-team-logo,
    .league-logo,
    .match-team-logo-fallback,
    .league-logo-fallback {
        width: 23px;
        height: 23px;
        min-width: 23px;
        min-height: 23px;
    }

}

@media (max-width: 360px) {

    .match-team-logo,
    .league-logo,
    .match-team-logo-fallback,
    .league-logo-fallback {
        width: 21px;
        height: 21px;
        min-width: 21px;
        min-height: 21px;
    }

}


/* =========================================================
   RADAR LIVESCORE — SIDEBAR V4
   Compact / Professional / Performance Safe
   ========================================================= */

/* ---------------------------------------------------------
   RIGHT SIDEBAR BASE
   --------------------------------------------------------- */

.right-sidebar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    width: 100%;
    align-self: start;
    box-sizing: border-box;
}


/* Semua blok sidebar konsisten */

.right-sidebar > * {
    width: 100%;
    min-width: 0;
    margin: 0;
    box-sizing: border-box;
}


/* ---------------------------------------------------------
   SIDEBAR CARD SYSTEM
   --------------------------------------------------------- */

.right-sidebar .sidebar-banners,
.right-sidebar .whatsapp-sidebar,
.right-sidebar .telegram-sidebar,
.right-sidebar .rankings-sidebar {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--rl-line);
    border-radius: 12px;
    background: var(--rl-surface);
    box-shadow: var(--rl-shadow-sm);
    overflow: hidden;
    box-sizing: border-box;
}


/* ---------------------------------------------------------
   BANNERS
   Fix giant empty banner area
   --------------------------------------------------------- */

.right-sidebar .sidebar-banners {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
}


/* Anchor banner harus punya tinggi tetap */

.right-sidebar .sidebar-banner {
    display: block;
    position: relative;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 10 / 3;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 1px solid var(--rl-line);
    border-radius: 12px;
    background: var(--rl-surface);
    box-sizing: border-box;
    box-shadow: var(--rl-shadow-sm);
}


/* Placeholder GIF tidak boleh membuat area membesar */

.right-sidebar .sidebar-banner img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: center;
    border: 0;
    margin: 0;
    padding: 0;
}


/* ---------------------------------------------------------
   WHATSAPP
   --------------------------------------------------------- */

.right-sidebar .whatsapp-sidebar {
    padding: 0;
}


.right-sidebar .whatsapp-dropdown {
    width: 100%;
    margin: 0;
    padding: 0;
}


.right-sidebar .whatsapp-button {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 58px;
    height: 58px;
    margin: 0;
    padding: 8px 11px;
    gap: 10px;
    border: 0;
    background: transparent;
    color: var(--rl-text-strong);
    box-sizing: border-box;
    cursor: pointer;
}


.right-sidebar .whatsapp-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #25d366;
}


.right-sidebar .whatsapp-icon svg {
    width: 22px;
    height: 22px;
    display: block;
    fill: #ffffff;
}


.right-sidebar .whatsapp-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    flex: 1;
    line-height: 1.15;
    text-align: left;
}


.right-sidebar .whatsapp-text strong {
    display: block;
    color: var(--rl-text-strong);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}


.right-sidebar .whatsapp-text small {
    display: block;
    margin-top: 3px;
    color: var(--rl-muted);
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}


.right-sidebar .whatsapp-arrow {
    flex: 0 0 auto;
    font-size: 17px;
    line-height: 1;
    color: var(--rl-muted);
}


.right-sidebar .whatsapp-button:hover {
    background: var(--rl-surface-soft);
}


/* Admin list */

.right-sidebar .whatsapp-admin-list {
    width: 100%;
    padding: 5px;
    border-top: 1px solid var(--rl-line);
    background: var(--rl-surface-soft);
    box-sizing: border-box;
}


.right-sidebar .whatsapp-admin {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 6px 8px;
    gap: 8px;
    border-radius: 8px;
    color: var(--rl-text);
    text-decoration: none;
    box-sizing: border-box;
}


.right-sidebar .whatsapp-admin:hover {
    background: var(--rl-accent-soft);
}


.right-sidebar .admin-whatsapp-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
}


.right-sidebar .admin-whatsapp-icon svg {
    width: 21px;
    height: 21px;
    display: block;
    fill: #25d366;
}


.right-sidebar .whatsapp-admin > span:nth-child(2) {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    font-weight: 800;
    color: var(--rl-text-strong);
}


.right-sidebar .admin-arrow {
    font-size: 16px;
    color: var(--rl-muted);
}


/* ---------------------------------------------------------
   TELEGRAM
   --------------------------------------------------------- */

.right-sidebar .telegram-sidebar {
    padding: 0;
}


.right-sidebar .telegram-button {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 58px;
    height: 58px;
    margin: 0;
    padding: 8px 11px;
    gap: 10px;
    color: var(--rl-text);
    text-decoration: none;
    box-sizing: border-box;
}


.right-sidebar .telegram-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #229ed9;
}


.right-sidebar .telegram-icon svg {
    width: 21px;
    height: 21px;
    display: block;
    fill: #ffffff;
}


.right-sidebar .telegram-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    flex: 1;
    line-height: 1.15;
}


.right-sidebar .telegram-text strong {
    display: block;
    color: var(--rl-text-strong);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}


.right-sidebar .telegram-text small {
    display: block;
    margin-top: 3px;
    color: var(--rl-muted);
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}


.right-sidebar .telegram-arrow {
    flex: 0 0 auto;
    font-size: 18px;
    color: var(--rl-muted);
}


.right-sidebar .telegram-button:hover {
    background: var(--rl-surface-soft);
}


/* ---------------------------------------------------------
   FIFA / UEFA RANKINGS
   --------------------------------------------------------- */

.right-sidebar .rankings-sidebar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
}


.right-sidebar .ranking-card {
    display: flex;
    align-items: center;
    min-height: 58px;
    width: 100%;
    margin: 0;
    padding: 8px 11px;
    gap: 10px;
    border: 0;
    border-bottom: 1px solid var(--rl-line);
    background: transparent;
    color: var(--rl-text);
    text-decoration: none;
    box-sizing: border-box;
}


.right-sidebar .ranking-card:last-child {
    border-bottom: 0;
}


.right-sidebar .ranking-card:hover {
    background: var(--rl-surface-soft);
}


.right-sidebar .ranking-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--rl-surface-soft);
    border: 1px solid var(--rl-line);
    color: var(--rl-text-strong);
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .03em;
    overflow: hidden;
}


.right-sidebar .ranking-brand img {
    display: block;
    width: 25px;
    height: 25px;
    object-fit: contain;
}


.right-sidebar .ranking-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    min-width: 0;
    color: var(--rl-text-strong);
    font-size: 11px;
    font-weight: 850;
}


.right-sidebar .ranking-arrow {
    margin-left: 8px;
    color: var(--rl-muted);
    font-size: 17px;
    line-height: 1;
}


/* ---------------------------------------------------------
   DARK MODE
   --------------------------------------------------------- */

html[data-theme="dark"] .right-sidebar .sidebar-banners,
html[data-theme="dark"] .right-sidebar .whatsapp-sidebar,
html[data-theme="dark"] .right-sidebar .telegram-sidebar,
html[data-theme="dark"] .right-sidebar .rankings-sidebar {
    background: #0d1b2d;
    border-color: #253d57;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}


html[data-theme="dark"] .right-sidebar .sidebar-banner {
    background: #0d1b2d;
    border-color: #253d57;
}


html[data-theme="dark"] .right-sidebar .whatsapp-button:hover,
html[data-theme="dark"] .right-sidebar .telegram-button:hover,
html[data-theme="dark"] .right-sidebar .ranking-card:hover {
    background: #102239;
}


html[data-theme="dark"] .right-sidebar .whatsapp-admin-list {
    background: #0a1727;
    border-color: #253d57;
}


/* ---------------------------------------------------------
   DESKTOP
   --------------------------------------------------------- */

@media (min-width: 1201px) {

    .right-sidebar {
        gap: 10px;
    }

    .right-sidebar .sidebar-banners {
        gap: 8px;
    }

}


/* ---------------------------------------------------------
   LAPTOP
   --------------------------------------------------------- */

@media (min-width: 1001px) and (max-width: 1200px) {

    .right-sidebar {
        gap: 9px;
    }

    .right-sidebar .whatsapp-button,
    .right-sidebar .telegram-button {
        min-height: 54px;
        height: 54px;
    }

    .right-sidebar .ranking-card {
        min-height: 54px;
    }

}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (min-width: 769px) and (max-width: 1000px) {

    .right-sidebar {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .right-sidebar .sidebar-banners {
        grid-column: 1 / -1;
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .right-sidebar .ranking-card,
    .right-sidebar .whatsapp-button,
    .right-sidebar .telegram-button {
        min-height: 52px;
        height: 52px;
    }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 768px) {

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

    .right-sidebar .sidebar-banners {
        grid-column: 1 / -1;
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .right-sidebar .whatsapp-button,
    .right-sidebar .telegram-button {
        min-height: 52px;
        height: 52px;
        padding: 7px 8px;
        gap: 7px;
    }

    .right-sidebar .whatsapp-icon,
    .right-sidebar .telegram-icon {
        flex-basis: 29px;
        width: 29px;
        height: 29px;
        border-radius: 8px;
    }

    .right-sidebar .whatsapp-icon svg,
    .right-sidebar .telegram-icon svg {
        width: 18px;
        height: 18px;
    }

    .right-sidebar .whatsapp-text strong,
    .right-sidebar .telegram-text strong {
        font-size: 10px;
    }

    .right-sidebar .whatsapp-text small,
    .right-sidebar .telegram-text small {
        font-size: 8px;
    }

    .right-sidebar .ranking-card {
        min-height: 52px;
        padding: 7px 8px;
        gap: 7px;
    }

    .right-sidebar .ranking-brand {
        flex-basis: 29px;
        width: 29px;
        height: 29px;
        border-radius: 8px;
        font-size: 8px;
    }

    .right-sidebar .ranking-brand img {
        width: 21px;
        height: 21px;
    }

    .right-sidebar .ranking-title {
        font-size: 9px;
    }

}


/* ---------------------------------------------------------
   SMALL PHONE
   --------------------------------------------------------- */

@media (max-width: 520px) {

    .right-sidebar {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .right-sidebar .sidebar-banners {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .right-sidebar .whatsapp-button,
    .right-sidebar .telegram-button {
        min-height: 50px;
        height: 50px;
    }

    .right-sidebar .ranking-card {
        min-height: 50px;
    }

}


/* ---------------------------------------------------------
   VERY SMALL PHONE
   --------------------------------------------------------- */

@media (max-width: 360px) {

    .right-sidebar {
        gap: 6px;
    }

    .right-sidebar .sidebar-banners {
        gap: 5px;
    }

    .right-sidebar .whatsapp-text small,
    .right-sidebar .telegram-text small {
        display: none;
    }

    .right-sidebar .whatsapp-button,
    .right-sidebar .telegram-button {
        min-height: 46px;
        height: 46px;
    }

    .right-sidebar .ranking-card {
        min-height: 46px;
    }

}


/* ---------------------------------------------------------
   SIDEBAR PAINT OPTIMIZATION
   --------------------------------------------------------- */

.right-sidebar .whatsapp-sidebar,
.right-sidebar .telegram-sidebar,
.right-sidebar .rankings-sidebar,
.right-sidebar .sidebar-banner {
    contain: layout paint;
}


/* =========================================================
   END RADAR LIVESCORE — SIDEBAR V4
   ========================================================= */


/* =========================================================
   LIVESCORE PERFORMANCE — CONTENT VISIBILITY V1
   Tidak mengubah layout/fungsi, hanya mengurangi pekerjaan
   rendering untuk league yang berada jauh di bawah viewport.
   ========================================================= */

.livescore-league {
    content-visibility: auto;
    contain-intrinsic-size: auto 140px;
}


/* =========================================================
   RADAR LIVESCORE — COMMUNITY MOBILE CLEANUP V1
   Fix desktop stray mobile community / oversized SVG
   ========================================================= */

/* ---------------------------------------------------------
   DEFAULT: MOBILE COMMUNITY HARUS TERSEMBUNYI
   --------------------------------------------------------- */

.mobile-community-button {
    display: none !important;
}

.mobile-community-modal {
    display: none !important;
    position: fixed;
    inset: 0;
    z-index: 99999;
}

.mobile-community-modal[aria-hidden="true"] {
    display: none !important;
}

/* ---------------------------------------------------------
   CEGAH SVG WHATSAPP MENJADI RAKSASA
   --------------------------------------------------------- */

.mobile-social-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 42px !important;
    overflow: hidden !important;
}

.mobile-social-icon svg {
    display: block !important;

    width: 24px !important;
    height: 24px !important;

    min-width: 24px !important;
    max-width: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;

    flex: 0 0 24px !important;
}

/* ---------------------------------------------------------
   MOBILE MODAL
   --------------------------------------------------------- */

@media screen and (max-width: 600px) {

    .mobile-community-button {
        display: flex !important;

        position: fixed;
        right: 16px;
        bottom: 16px;

        width: 52px;
        height: 52px;

        align-items: center;
        justify-content: center;

        padding: 0;

        border: 1px solid #315985;
        border-radius: 50%;

        background: #17365d;
        color: #ffffff;

        cursor: pointer;

        z-index: 9998;
    }

    .mobile-community-button .mobile-community-text,
    .mobile-community-button .mobile-community-arrow {
        display: none;
    }

    .mobile-community-modal {
        display: none !important;

        position: fixed;
        inset: 0;

        width: 100%;
        height: 100%;

        z-index: 99999;

        align-items: center;
        justify-content: center;

        padding: 16px;

        box-sizing: border-box;
    }

    .mobile-community-modal.active,
    .mobile-community-modal[aria-hidden="false"] {
        display: flex !important;
    }

    .mobile-community-overlay {
        position: absolute;
        inset: 0;

        width: 100%;
        height: 100%;

        background: rgba(3, 14, 29, 0.72);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }

    .mobile-community-popup {
        position: relative;

        z-index: 2;

        width: min(100%, 390px);
        max-height: calc(100vh - 32px);

        overflow-y: auto;

        box-sizing: border-box;

        padding: 22px 16px 16px;

        border: 1px solid #29415f;
        border-radius: 16px;

        background: #0d1b2d;

        box-shadow:
            0 24px 70px rgba(0, 0, 0, 0.45);

        color: #ffffff;
    }

    .mobile-community-close {
        position: absolute;

        top: 10px;
        right: 10px;

        width: 34px;
        height: 34px;

        display: flex;
        align-items: center;
        justify-content: center;

        padding: 0;

        border: 1px solid #29415f;
        border-radius: 50%;

        background: #132238;
        color: #ffffff;

        font-size: 22px;
        line-height: 1;

        cursor: pointer;
    }

    .mobile-community-header {
        display: flex;
        flex-direction: column;

        padding-right: 42px;
    }

    .mobile-community-header-icon {
        width: 42px;
        height: 42px;

        display: flex;
        align-items: center;
        justify-content: center;

        margin-bottom: 10px;

        border-radius: 50%;

        background: #172943;

        font-size: 22px;
    }

    .mobile-community-header strong {
        display: block;

        color: #ffffff;

        font-size: 18px;
        font-weight: 900;
        line-height: 1.2;
    }

    .mobile-community-header small {
        display: block;

        margin-top: 5px;

        color: #8fa0b5;

        font-size: 11px;
        line-height: 1.4;
    }

    .mobile-social-options {
        display: flex;
        flex-direction: column;

        width: 100%;

        margin-top: 14px;
    }

    .mobile-social-option {
        width: 100%;
        min-height: 64px;

        display: flex;
        align-items: center;

        gap: 11px;

        margin-top: 10px;
        padding: 9px 11px;

        box-sizing: border-box;

        border: 1px solid #29415f;
        border-radius: 10px;

        background: #132238;
        color: #ffffff;

        cursor: pointer;
        font-family: inherit;

        text-decoration: none;
    }

    .mobile-social-text {
        min-width: 0;
        flex: 1;

        display: flex;
        flex-direction: column;

        text-align: left;
    }

    .mobile-social-text strong {
        color: #ffffff;

        font-size: 13px;
        font-weight: 800;
        line-height: 1.2;
    }

    .mobile-social-text small {
        margin-top: 3px;

        color: #8fa0b5;

        font-size: 10px;
        line-height: 1.3;
    }

    .mobile-social-arrow {
        flex: 0 0 auto;

        color: #8fa0b5;

        font-size: 22px;
        line-height: 1;
    }

    .mobile-social-icon.whatsapp {
        background: #18c967;
    }

    .mobile-social-icon.telegram {
        background: #229ed9;
    }
}

/* ---------------------------------------------------------
   HP KECIL
   --------------------------------------------------------- */

@media screen and (max-width: 480px) {

    .mobile-community-popup {
        width: 100%;
        max-width: 360px;

        padding: 22px 14px 14px;
    }

}

/* ---------------------------------------------------------
   HP SANGAT KECIL
   --------------------------------------------------------- */

@media screen and (max-width: 360px) {

    .mobile-community-popup {
        max-width: 330px;
    }

}


/* =========================================================
   RADAR LIVESCORE — PREMIUM FOOTER V1
   Full width / non-sticky / no logo / no social icons
   ========================================================= */

footer {
    width: 100%;
    min-height: 96px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    box-sizing: border-box;

    margin: 32px 0 0;
    padding: 24px 6vw;

    background: #071a33;

    border-top: 2px solid #164d82;
    border-bottom: 2px solid #164d82;

    color: #ffffff;

    box-shadow:
        0 -6px 24px rgba(7, 26, 51, 0.08);

    position: relative;
    z-index: 1;
}

/* COPYRIGHT */

footer p {
    margin: 0;

    color: #dce8f5;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;

    white-space: nowrap;
}

/* FOOTER NAVIGATION */

footer nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 24px;

    margin: 0;
    padding: 0;
}

/* FOOTER LINKS */

footer nav a {
    display: inline-flex;
    align-items: center;

    margin: 0;
    padding: 4px 0;

    color: #dce8f5;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;

    text-decoration: none;

    transition:
        color 0.18s ease,
        opacity 0.18s ease;
}

footer nav a:hover {
    color: #ffffff;
    opacity: 1;
}

/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media screen and (max-width: 900px) {

    footer {
        padding: 22px 28px;
    }

    footer nav {
        gap: 18px;
    }

}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media screen and (max-width: 600px) {

    footer {
        min-height: auto;

        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 12px;

        margin-top: 24px;

        padding: 22px 16px;

        text-align: center;
    }

    footer p {
        white-space: normal;

        font-size: 12px;
    }

    footer nav {
        width: 100%;

        justify-content: center;

        flex-wrap: wrap;

        gap: 8px 18px;
    }

    footer nav a {
        font-size: 12px;
    }

}

/* ---------------------------------------------------------
   SMALL MOBILE
   --------------------------------------------------------- */

@media screen and (max-width: 360px) {

    footer {
        padding: 20px 12px;
    }

    footer nav {
        gap: 7px 14px;
    }

    footer nav a {
        font-size: 11px;
    }

}

/* =========================================================
   RADAR LIVESCORE — DARK MODE BLACK TABLE LINES
   FINAL SAFE OVERRIDE
   2026-09-05
   HANYA BORDER/GARIS LIVESCORE
   ========================================================= */

html[data-theme="dark"] .livescore-league {
    border-color: #000000 !important;
}

html[data-theme="dark"] .livescore-league-header {
    border-bottom-color: #000000 !important;
}

html[data-theme="dark"] .livescore-match-list > .livescore-match-card + .livescore-match-card {
    border-top-color: #000000 !important;
}

html[data-theme="dark"] .livescore-match-card {
    border-bottom-color: #000000 !important;
}


/* =========================================================
   RADAR LIVESCORE — CLUB & LEAGUE LOGO PREMIUM
   TRANSPARENT + BOLD + CRISP
   LIGHT / DARK / RESPONSIVE
   2026-09-05
   ========================================================= */

/* ---------------------------------------------------------
   LEAGUE LOGO
   --------------------------------------------------------- */

.livescore-league-header img,
.matches-area .livescore-league-header img {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    object-fit: contain !important;
    object-position: center !important;

    display: block !important;

    filter:
        contrast(1.12)
        saturate(1.10)
        drop-shadow(0 1px 1px rgba(0, 0, 0, .18));

    transform: translateZ(0);
}


/* ---------------------------------------------------------
   CLUB LOGO — MAIN LIVESCORE
   --------------------------------------------------------- */

.livescore-team img,
.matches-area .match-team-logo {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    object-fit: contain !important;
    object-position: center !important;

    display: block !important;

    filter:
        contrast(1.14)
        saturate(1.12)
        drop-shadow(0 1px 1.5px rgba(0, 0, 0, .22));

    transform: translateZ(0);
}


/* ---------------------------------------------------------
   FALLBACK LOGO
   --------------------------------------------------------- */

.matches-area .match-team-logo-fallback {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}


/* ---------------------------------------------------------
   POPULAR / COMPETITION SIDEBAR LOGOS
   --------------------------------------------------------- */

.popular-competition-item img,
.competition-item img {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    object-fit: contain !important;
    object-position: center !important;

    display: block !important;

    filter:
        contrast(1.12)
        saturate(1.10)
        drop-shadow(0 1px 1px rgba(0, 0, 0, .18));

    transform: translateZ(0);
}


/* ---------------------------------------------------------
   DARK MODE — LOGO LEBIH TAJAM
   --------------------------------------------------------- */

html[data-theme="dark"] .livescore-league-header img,
html[data-theme="dark"] .livescore-team img,
html[data-theme="dark"] .matches-area .match-team-logo,
html[data-theme="dark"] .popular-competition-item img,
html[data-theme="dark"] .competition-item img {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    filter:
        contrast(1.16)
        saturate(1.14)
        drop-shadow(0 1px 2px rgba(0, 0, 0, .55));
}


/* ---------------------------------------------------------
   LIGHT MODE — CLEAN PREMIUM
   --------------------------------------------------------- */

html:not([data-theme="dark"]) .livescore-league-header img,
html:not([data-theme="dark"]) .livescore-team img,
html:not([data-theme="dark"]) .matches-area .match-team-logo,
html:not([data-theme="dark"]) .popular-competition-item img,
html:not([data-theme="dark"]) .competition-item img {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    filter:
        contrast(1.12)
        saturate(1.10)
        drop-shadow(0 1px 1px rgba(15, 42, 68, .16));
}


/* ---------------------------------------------------------
   RESPONSIVE — TABLET
   --------------------------------------------------------- */

@media (max-width: 900px) {

    .livescore-league-header img,
    .matches-area .livescore-league-header img {
        object-fit: contain !important;
    }

    .livescore-team img,
    .matches-area .match-team-logo {
        object-fit: contain !important;
    }

    .popular-competition-item img,
    .competition-item img {
        object-fit: contain !important;
    }
}


/* ---------------------------------------------------------
   RESPONSIVE — HP
   --------------------------------------------------------- */

@media (max-width: 600px) {

    .livescore-league-header img,
    .matches-area .livescore-league-header img,
    .livescore-team img,
    .matches-area .match-team-logo,
    .popular-competition-item img,
    .competition-item img {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;

        object-fit: contain !important;
        object-position: center !important;

        filter:
            contrast(1.14)
            saturate(1.12)
            drop-shadow(0 1px 1px rgba(0, 0, 0, .22));
    }
}


/* ---------------------------------------------------------
   VERY SMALL HP
   --------------------------------------------------------- */

@media (max-width: 420px) {

    .livescore-league-header img,
    .matches-area .livescore-league-header img,
    .livescore-team img,
    .matches-area .match-team-logo,
    .popular-competition-item img,
    .competition-item img {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;

        object-fit: contain !important;
        object-position: center !important;

        filter:
            contrast(1.15)
            saturate(1.13)
            drop-shadow(0 1px 1px rgba(0, 0, 0, .25));
    }
}


/* ---------------------------------------------------------
   SAFETY — JANGAN UBAH UKURAN / LAYOUT LOGO
   --------------------------------------------------------- */

.livescore-league-header img,
.livescore-team img,
.matches-area .match-team-logo,
.popular-competition-item img,
.competition-item img {
    max-width: 100%;
    height: auto;
}


/* =========================================================
   RADAR LIVESCORE — LEAGUE LOGO WHITE OUTLINE
   TRANSPARENT + BOLD + PREMIUM
   LIGHT / DARK / RESPONSIVE
   2026-09-05
   ========================================================= */

/* ---------------------------------------------------------
   LEAGUE LOGO — WHITE OUTLINE
   --------------------------------------------------------- */

.livescore-league-header img,
.matches-area .livescore-league-header img {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    object-fit: contain !important;
    object-position: center !important;

    display: block !important;

    /*
     * White outline mengikuti bentuk logo PNG transparan.
     */
    filter:
        drop-shadow(1px 0 0 #ffffff)
        drop-shadow(-1px 0 0 #ffffff)
        drop-shadow(0 1px 0 #ffffff)
        drop-shadow(0 -1px 0 #ffffff)
        contrast(1.14)
        saturate(1.12);

    transform: translateZ(0);
}


/* ---------------------------------------------------------
   DARK MODE — OUTLINE LEBIH TEGAS
   --------------------------------------------------------- */

html[data-theme="dark"] .livescore-league-header img,
html[data-theme="dark"] .matches-area .livescore-league-header img {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    filter:
        drop-shadow(1px 0 0 #ffffff)
        drop-shadow(-1px 0 0 #ffffff)
        drop-shadow(0 1px 0 #ffffff)
        drop-shadow(0 -1px 0 #ffffff)
        drop-shadow(0 0 1px rgba(255,255,255,.85))
        contrast(1.16)
        saturate(1.14);
}


/* ---------------------------------------------------------
   SIDEBAR — COMPETITION / LEAGUE LOGO
   --------------------------------------------------------- */

.popular-competition-item img,
.competition-item img {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    object-fit: contain !important;
    object-position: center !important;

    filter:
        drop-shadow(1px 0 0 #ffffff)
        drop-shadow(-1px 0 0 #ffffff)
        drop-shadow(0 1px 0 #ffffff)
        drop-shadow(0 -1px 0 #ffffff)
        contrast(1.12)
        saturate(1.10);
}


/* ---------------------------------------------------------
   DARK MODE SIDEBAR
   --------------------------------------------------------- */

html[data-theme="dark"] .popular-competition-item img,
html[data-theme="dark"] .competition-item img {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    filter:
        drop-shadow(1px 0 0 #ffffff)
        drop-shadow(-1px 0 0 #ffffff)
        drop-shadow(0 1px 0 #ffffff)
        drop-shadow(0 -1px 0 #ffffff)
        drop-shadow(0 0 1px rgba(255,255,255,.85))
        contrast(1.16)
        saturate(1.14);
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 900px) {

    .livescore-league-header img,
    .matches-area .livescore-league-header img,
    .popular-competition-item img,
    .competition-item img {
        object-fit: contain !important;
    }
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 600px) {

    .livescore-league-header img,
    .matches-area .livescore-league-header img,
    .popular-competition-item img,
    .competition-item img {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;

        object-fit: contain !important;

        filter:
            drop-shadow(1px 0 0 #ffffff)
            drop-shadow(-1px 0 0 #ffffff)
            drop-shadow(0 1px 0 #ffffff)
            drop-shadow(0 -1px 0 #ffffff)
            contrast(1.14)
            saturate(1.12);
    }
}


/* ---------------------------------------------------------
   VERY SMALL MOBILE
   --------------------------------------------------------- */

@media (max-width: 420px) {

    .livescore-league-header img,
    .matches-area .livescore-league-header img,
    .popular-competition-item img,
    .competition-item img {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;

        object-fit: contain !important;

        filter:
            drop-shadow(1px 0 0 #ffffff)
            drop-shadow(-1px 0 0 #ffffff)
            drop-shadow(0 1px 0 #ffffff)
            drop-shadow(0 -1px 0 #ffffff)
            contrast(1.15)
            saturate(1.13);
    }
}


/* =========================================================
   POPULAR COMPETITIONS — RESPONSIVE DROPDOWN
   2026-09-05
   DESKTOP  : SELALU TERBUKA
   TABLET/HP: DEFAULT TERTUTUP
   ========================================================= */

/* ---------------------------------------------------------
   DESKTOP / LAPTOP
   > 900px
   --------------------------------------------------------- */

@media (min-width: 901px) {

    .popular-competitions-list {
        display: flex !important;
        flex-direction: column !important;

        gap: 3px !important;

        margin-top: 6px !important;

        max-height: none !important;
        overflow: visible !important;

        opacity: 1 !important;
        visibility: visible !important;
    }

    .popular-competitions-toggle {
        cursor: default !important;
    }

    .popular-competitions-arrow {
        display: none !important;
    }
}


/* ---------------------------------------------------------
   TABLET + MOBILE
   <= 900px
   --------------------------------------------------------- */

@media (max-width: 900px) {

    .popular-competitions-list {
        display: flex !important;
        flex-direction: column !important;

        gap: 3px !important;

        margin-top: 6px !important;

        max-height: 0 !important;

        overflow: hidden !important;

        opacity: 0 !important;

        visibility: hidden !important;

        transition:
            max-height .22s ease,
            opacity .18s ease,
            visibility .18s ease;
    }


    .popular-competitions-list.is-open {
        max-height: 600px !important;

        opacity: 1 !important;

        visibility: visible !important;
    }


    .popular-competitions-toggle {
        cursor: pointer !important;

        user-select: none;
    }


    .popular-competitions-arrow {
        display: inline-flex !important;

        align-items: center;
        justify-content: center;

        width: 22px;
        height: 22px;

        font-size: 15px;
        font-weight: 900;

        line-height: 1;

        transition:
            transform .2s ease;
    }


    .popular-competitions-toggle[aria-expanded="true"]
    .popular-competitions-arrow {
        transform: rotate(180deg);
    }

}


/* ---------------------------------------------------------
   SMALL MOBILE
   <= 600px
   --------------------------------------------------------- */

@media (max-width: 600px) {

    .popular-competitions-list {
        max-height: 0 !important;
    }


    .popular-competitions-list.is-open {
        max-height: 600px !important;
    }

}

/* =========================================================
   WORLD COMPETITIONS SIDEBAR
   OTHER + CUP
   2026-09-05
   SEMUA DEVICE = CLOSED BY DEFAULT
   ========================================================= */

.other-competitions-panel,
.sidebar-competition-list#cup-competitions-list {
    max-height: 0 !important;

    overflow: hidden !important;

    opacity: 0 !important;

    visibility: hidden !important;

    margin-top: 0 !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    transition:
        max-height .24s ease,
        opacity .18s ease,
        visibility .18s ease,
        margin-top .18s ease;
}


/* ---------------------------------------------------------
   OPEN
   --------------------------------------------------------- */

.other-competitions-panel.is-open,
.sidebar-competition-list#cup-competitions-list.is-open {
    max-height: 4200px !important;

    overflow-y: auto !important;

    opacity: 1 !important;

    visibility: visible !important;

    margin-top: 6px !important;

    padding-top: 2px !important;
    padding-bottom: 4px !important;
}


/* ---------------------------------------------------------
   EXISTING COLLAPSED CLASS
   --------------------------------------------------------- */

.other-competitions-panel.is-collapsed,
.sidebar-competition-list#cup-competitions-list.is-collapsed {
    max-height: 0 !important;

    overflow: hidden !important;

    opacity: 0 !important;

    visibility: hidden !important;

    margin-top: 0 !important;
}


/* ---------------------------------------------------------
   TOGGLE ARROW
   --------------------------------------------------------- */

.other-competitions-arrow,
.sidebar-section-arrow {
    transition:
        transform .2s ease;
}


.other-competitions-toggle[aria-expanded="true"]
.other-competitions-arrow,
.cup-competitions-toggle[aria-expanded="true"]
.sidebar-section-arrow {
    transform: rotate(180deg);
}


/* ---------------------------------------------------------
   WORLD COMPETITION ITEM
   --------------------------------------------------------- */

.world-competition-item {
    min-height: 44px !important;

    display: grid !important;

    grid-template-columns:
        32px
        minmax(0, 1fr) !important;

    align-items: center !important;

    gap: 8px !important;

    padding:
        6px 8px !important;

    box-sizing: border-box !important;
}


.world-competition-item img {
    width: 30px !important;
    height: 30px !important;

    object-fit: contain !important;

    display: block !important;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;
}


.world-competition-item .competition-item-info {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 2px;
}


.world-competition-item .competition-item-info strong {
    display: block;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 11px;

    font-weight: 900;

    line-height: 1.2;
}


.world-competition-item .competition-item-info small {
    display: block;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 9px;

    font-weight: 700;

    line-height: 1.2;

    color: var(--rl-muted);
}


.competition-item-placeholder {
    width: 30px;
    height: 30px;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 16px;

    border-radius: 7px;

    background:
        var(--rl-surface-soft);
}


/* ---------------------------------------------------------
   LOADING / EMPTY
   --------------------------------------------------------- */

.sidebar-competitions-empty,
.other-competitions-loading {
    margin: 2px 0;

    padding: 10px 8px;

    border:
        1px solid var(--rl-line);

    border-radius: 8px;

    font-size: 10px;

    font-weight: 800;

    line-height: 1.35;

    text-align: center;

    color: var(--rl-muted);

    background:
        var(--rl-surface-soft);
}


/* ---------------------------------------------------------
   DARK MODE
   --------------------------------------------------------- */

html[data-theme="dark"]
.world-competition-item .competition-item-info strong {
    color: #ffffff;
}


html[data-theme="dark"]
.world-competition-item .competition-item-info small {
    color: #aac2d8;
}


html[data-theme="dark"]
.sidebar-competitions-empty,
html[data-theme="dark"]
.other-competitions-loading {
    color: #aac2d8;

    background: #10243a;

    border-color: #223b56;
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 900px) {

    .other-competitions-panel.is-open,
    .sidebar-competition-list#cup-competitions-list.is-open {
        max-height: 3800px !important;

        overflow-y: auto !important;
    }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 600px) {

    .other-competitions-panel.is-open,
    .sidebar-competition-list#cup-competitions-list.is-open {
        max-height: 3200px !important;
    }


    .world-competition-item {
        min-height: 42px !important;
    }


    .world-competition-item img,
    .competition-item-placeholder {
        width: 28px !important;
        height: 28px !important;
    }


    .world-competition-item .competition-item-info strong {
        font-size: 10px;
    }


    .world-competition-item .competition-item-info small {
        font-size: 8px;
    }

}


/* ---------------------------------------------------------
   VERY SMALL MOBILE
   --------------------------------------------------------- */

@media (max-width: 420px) {

    .other-competitions-panel.is-open,
    .sidebar-competition-list#cup-competitions-list.is-open {
        max-height: 2800px !important;
    }

}


/* =========================================================
   WORLD COMPETITIONS - LOAD MORE
   2026-09-05
   ========================================================= */

.world-competition-load-more {
    width: calc(100% - 12px);

    min-height: 34px;

    margin: 6px;

    padding: 7px 10px;

    border: 1px solid var(--rl-line);

    border-radius: 8px;

    background: var(--rl-surface-soft);

    color: var(--rl-text);

    font-family: inherit;

    font-size: 10px;

    font-weight: 900;

    line-height: 1.2;

    text-align: center;

    cursor: pointer;

    transition:
        background .16s ease,
        border-color .16s ease,
        opacity .16s ease;
}


.world-competition-load-more:hover {
    border-color: var(--rl-primary);

    background:
        rgba(0, 174, 255, .08);
}


.world-competition-load-more:disabled {
    opacity: .65;

    cursor: wait;
}


html[data-theme="dark"]
.world-competition-load-more {
    color: #ffffff;

    background: #10243a;

    border-color: #223b56;
}


html[data-theme="dark"]
.world-competition-load-more:hover {
    background: #15314d;
}


@media (max-width: 600px) {

    .world-competition-load-more {
        width: calc(100% - 10px);

        min-height: 32px;

        margin: 5px;

        font-size: 9px;
    }

}



/* =========================================================
   RADAR LIVESCORE — PREMIUM MATCH PREVIEW
   MATCH-PREVIEW-20260905-V1
   ---------------------------------------------------------
   LEFT STATUS COLUMN IS PRESERVED.
   RIGHT PREVIEW COLUMN IS ADDED.
   RESPONSIVE: DESKTOP / LAPTOP / TABLET / MOBILE / SMALL
   ========================================================= */

.matches-area .livescore-match-card {
    grid-template-columns:
        62px
        minmax(0, 1fr)
        86px;

    gap: 12px;
    min-width: 0;
}


/* =========================================================
   CENTER TEAM AREA
   ========================================================= */

.matches-area .match-teams {
    min-width: 0;
    width: 100%;
}

.matches-area .match-team {
    min-width: 0;
    width: 100%;

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

    align-items: center;
    column-gap: 9px;
}

.matches-area .match-team-logo {
    width: 28px;
    height: 28px;

    flex: 0 0 28px;

    object-fit: contain;
    object-position: center;

    display: block;
}

.matches-area .match-team-logo-fallback {
    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 17px;
    line-height: 1;

    flex: 0 0 28px;
}

.matches-area .match-team-name {
    min-width: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 13px;
    line-height: 1.25;
    font-weight: 800;

    color: #102b46;
}

.matches-area .match-score {
    width: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 14px;
    line-height: 1;

    font-weight: 900;

    color: #102b46;
}


/* =========================================================
   RIGHT PREVIEW COLUMN
   ========================================================= */

.matches-area .match-preview-column {
    min-width: 0;

    width: 100%;

    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.matches-area .match-preview-btn {
    width: 82px;
    min-width: 82px;
    height: 34px;

    padding: 0 9px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    border: 1px solid rgba(15, 42, 68, .18);
    border-radius: 8px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f2f5f8 100%
        );

    box-shadow:
        0 2px 5px rgba(15, 42, 68, .10),
        inset 0 1px 0 rgba(255, 255, 255, .95);

    color: #101828;

    font-family: inherit;
    font-size: 10px;
    line-height: 1;

    font-weight: 900;
    letter-spacing: .1px;

    cursor: pointer;

    white-space: nowrap;

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        border-color .15s ease,
        background .15s ease;
}

.matches-area .match-preview-icon {
    font-size: 9px;
    line-height: 1;

    font-weight: 900;
}

.matches-area .match-preview-text {
    font-weight: 900;
}

.matches-area .match-preview-btn:hover {
    transform: translateY(-1px);

    border-color: rgba(15, 42, 68, .32);

    box-shadow:
        0 4px 10px rgba(15, 42, 68, .14),
        inset 0 1px 0 rgba(255, 255, 255, .98);
}

.matches-area .match-preview-btn:active {
    transform: translateY(0);

    box-shadow:
        0 2px 4px rgba(15, 42, 68, .10),
        inset 0 1px 2px rgba(15, 42, 68, .08);
}

.matches-area .match-preview-btn:focus-visible {
    outline: 2px solid #2878b8;
    outline-offset: 2px;
}


/* =========================================================
   DARK MODE
   ========================================================= */

html[data-theme="dark"] .matches-area .match-team-name,
html[data-theme="dark"] .matches-area .match-score {
    color: #f8fafc;
}

html[data-theme="dark"] .matches-area .match-preview-btn {
    border-color: rgba(255, 255, 255, .18);

    background:
        linear-gradient(
            180deg,
            #1b2a3a 0%,
            #122132 100%
        );

    color: #ffffff;

    box-shadow:
        0 2px 6px rgba(0, 0, 0, .28),
        inset 0 1px 0 rgba(255, 255, 255, .07);
}

html[data-theme="dark"] .matches-area .match-preview-btn:hover {
    border-color: rgba(255, 255, 255, .32);

    background:
        linear-gradient(
            180deg,
            #223448 0%,
            #17283a 100%
        );

    box-shadow:
        0 4px 12px rgba(0, 0, 0, .34),
        inset 0 1px 0 rgba(255, 255, 255, .09);
}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (max-width: 1200px) {

    .matches-area .livescore-match-card {
        grid-template-columns:
            60px
            minmax(0, 1fr)
            82px;

        gap: 10px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .matches-area .match-preview-btn {
        width: 78px;
        min-width: 78px;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .matches-area .livescore-match-card {
        grid-template-columns:
            56px
            minmax(0, 1fr)
            76px;

        gap: 9px;

        min-height: 70px;

        padding:
            9px
            10px;
    }

    .matches-area .match-team {
        grid-template-columns:
            27px
            minmax(0, 1fr)
            28px;

        column-gap: 7px;
    }

    .matches-area .match-team-logo,
    .matches-area .match-team-logo-fallback {
        width: 25px;
        height: 25px;
        flex-basis: 25px;
    }

    .matches-area .match-team-name {
        font-size: 12px;
    }

    .matches-area .match-score {
        width: 28px;
        font-size: 13px;
    }

    .matches-area .match-preview-btn {
        width: 72px;
        min-width: 72px;
        height: 32px;

        padding: 0 7px;

        font-size: 9px;
    }
}


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

@media (max-width: 600px) {

    .matches-area .livescore-match-card {
        grid-template-columns:
            48px
            minmax(0, 1fr)
            68px;

        gap: 7px;

        min-height: 66px;

        padding:
            8px
            8px;
    }

    .matches-area .match-team {
        grid-template-columns:
            23px
            minmax(0, 1fr)
            24px;

        column-gap: 6px;
    }

    .matches-area .match-team-logo,
    .matches-area .match-team-logo-fallback {
        width: 22px;
        height: 22px;
        flex-basis: 22px;
    }

    .matches-area .match-team-logo-fallback {
        font-size: 14px;
    }

    .matches-area .match-team-name {
        font-size: 11px;
        font-weight: 800;
    }

    .matches-area .match-score {
        width: 24px;
        font-size: 12px;
    }

    .matches-area .match-preview-btn {
        width: 64px;
        min-width: 64px;
        height: 30px;

        gap: 4px;

        padding:
            0
            5px;

        border-radius: 7px;

        font-size: 8px;
    }

    .matches-area .match-preview-icon {
        font-size: 8px;
    }
}


/* =========================================================
   SMALL PHONE
   360px
   ========================================================= */

@media (max-width: 380px) {

    .matches-area .livescore-match-card {
        grid-template-columns:
            44px
            minmax(0, 1fr)
            62px;

        gap: 5px;

        padding:
            7px
            6px;
    }

    .matches-area .match-team {
        grid-template-columns:
            21px
            minmax(0, 1fr)
            22px;

        column-gap: 5px;
    }

    .matches-area .match-team-logo,
    .matches-area .match-team-logo-fallback {
        width: 20px;
        height: 20px;
        flex-basis: 20px;
    }

    .matches-area .match-team-name {
        font-size: 10px;
    }

    .matches-area .match-score {
        width: 22px;
        font-size: 11px;
    }

    .matches-area .match-preview-btn {
        width: 58px;
        min-width: 58px;
        height: 28px;

        gap: 3px;

        padding:
            0
            4px;

        font-size: 7.5px;
    }

    .matches-area .match-preview-icon {
        display: none;
    }
}


/* =========================================================
   VERY SMALL PHONE
   320px
   ========================================================= */

@media (max-width: 340px) {

    .matches-area .livescore-match-card {
        grid-template-columns:
            40px
            minmax(0, 1fr)
            56px;

        gap: 4px;

        padding:
            6px
            5px;
    }

    .matches-area .match-team {
        grid-template-columns:
            19px
            minmax(0, 1fr)
            20px;

        column-gap: 4px;
    }

    .matches-area .match-team-logo,
    .matches-area .match-team-logo-fallback {
        width: 18px;
        height: 18px;
        flex-basis: 18px;
    }

    .matches-area .match-team-name {
        font-size: 9px;
    }

    .matches-area .match-score {
        width: 20px;
        font-size: 10px;
    }

    .matches-area .match-preview-btn {
        width: 53px;
        min-width: 53px;
        height: 27px;

        border-radius: 6px;

        font-size: 7px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .matches-area .match-preview-btn {
        transition: none;
    }
}


/* =========================================================
   RADAR LIVESCORE — LIVE MATCH DARK PREMIUM
   LIVE-DARK-FIX-20260905-V1
   ---------------------------------------------------------
   Tujuan:
   - Hilangkan background putih pada LIVE MATCH
   - Samakan dengan match card normal
   - STATUS / JAM / LIVE DI KIRI TIDAK DISENTUH
   - Preview tetap dipertahankan
   ========================================================= */


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

.matches-area .livescore-match-card.is-live {
    background: #0b1b2c !important;

    color: #ffffff;

    border-color: rgba(255, 255, 255, .08) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .025);
}


/* =========================================================
   LIVE MATCH TEAM ROW
   ---------------------------------------------------------
   Ini bagian yang sebelumnya terlihat PUTIH.
   ========================================================= */

.matches-area .livescore-match-card.is-live .match-team {
    background: #0b1b2c !important;

    color: #ffffff !important;

    border-color: rgba(255, 255, 255, .07) !important;
}


/* =========================================================
   LIVE MATCH TEAM CONTENT
   ========================================================= */

.matches-area .livescore-match-card.is-live .match-team-name {
    color: #ffffff !important;
}

.matches-area .livescore-match-card.is-live .match-score {
    color: #ffffff !important;
}


/* =========================================================
   REMOVE POSSIBLE WHITE BACKGROUND FROM CHILDREN
   ========================================================= */

.matches-area .livescore-match-card.is-live .match-teams,
.matches-area .livescore-match-card.is-live .match-team-name,
.matches-area .livescore-match-card.is-live .match-score {
    background: transparent !important;
}


/* =========================================================
   LIVE CARD HOVER
   ========================================================= */

.matches-area .livescore-match-card.is-live:hover {
    background: #10243a !important;
}

.matches-area .livescore-match-card.is-live:hover .match-team {
    background: #10243a !important;
}


/* =========================================================
   DARK MODE
   ========================================================= */

html[data-theme="dark"] .matches-area .livescore-match-card.is-live {
    background: #0b1b2c !important;

    color: #ffffff !important;
}

html[data-theme="dark"]
.matches-area
.livescore-match-card.is-live
.match-team {
    background: #0b1b2c !important;

    color: #ffffff !important;
}

html[data-theme="dark"]
.matches-area
.livescore-match-card.is-live
.match-team-name,
html[data-theme="dark"]
.matches-area
.livescore-match-card.is-live
.match-score {
    color: #ffffff !important;
}


/* =========================================================
   LIGHT MODE
   ---------------------------------------------------------
   Tetap mengikuti tampilan normal light mode.
   Tidak dibuat putih keras pada LIVE.
   ========================================================= */

html:not([data-theme="dark"])
.matches-area
.livescore-match-card.is-live {
    background: #f8fafc !important;

    color: #101828 !important;

    border-color: rgba(15, 42, 68, .10) !important;
}

html:not([data-theme="dark"])
.matches-area
.livescore-match-card.is-live
.match-team {
    background: #f8fafc !important;

    color: #101828 !important;
}

html:not([data-theme="dark"])
.matches-area
.livescore-match-card.is-live
.match-team-name,
html:not([data-theme="dark"])
.matches-area
.livescore-match-card.is-live
.match-score {
    color: #101828 !important;
}


/* =========================================================
   LIVE PREVIEW BUTTON
   ---------------------------------------------------------
   Tidak mengubah desain Preview.
   ========================================================= */

.matches-area
.livescore-match-card.is-live
.match-preview-column {
    background: transparent !important;
}


/* =========================================================
   SAFETY: STATUS LEFT SIDE
   ---------------------------------------------------------
   Tidak mengubah desain/status kiri.
   ========================================================= */

.matches-area
.livescore-match-card.is-live
.match-time-column {
    background: transparent !important;
}


/* =========================================================
   SMALL DEVICES
   ========================================================= */

@media (max-width: 600px) {

    .matches-area .livescore-match-card.is-live,
    .matches-area .livescore-match-card.is-live .match-team {
        background: #0b1b2c !important;
    }

    html:not([data-theme="dark"])
    .matches-area
    .livescore-match-card.is-live,
    html:not([data-theme="dark"])
    .matches-area
    .livescore-match-card.is-live
    .match-team {
        background: #f8fafc !important;
    }
}


/* =========================================================
   VERY SMALL PHONE
   ========================================================= */

@media (max-width: 340px) {

    .matches-area .livescore-match-card.is-live {
        background: #0b1b2c !important;
    }

    html:not([data-theme="dark"])
    .matches-area
    .livescore-match-card.is-live {
        background: #f8fafc !important;
    }
}



/* =========================================================
   RADAR LIVESCORE
   LIVE MATCH DARK PREMIUM — FINAL OVERRIDE
   LIVE-DARK-FINAL-20260905-V2
   ---------------------------------------------------------
   FORCE LIVE ROW SAMA DENGAN MATCH DARK
   ========================================================= */


/* =========================================================
   LIVE CARD — FORCE DARK
   ========================================================= */

.matches-area
.livescore-match-card.is-live {

    background: #0b1b2c !important;

    color: #ffffff !important;

    border-color: rgba(255, 255, 255, .08) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}


/* =========================================================
   LIVE TEAMS AREA — FORCE DARK
   ========================================================= */

.matches-area
.livescore-match-card.is-live
.match-teams {

    background: #0b1b2c !important;

    color: #ffffff !important;
}


/* =========================================================
   EACH TEAM ROW — FORCE DARK
   ========================================================= */

.matches-area
.livescore-match-card.is-live
.match-team {

    background: #0b1b2c !important;

    color: #ffffff !important;

    border-color: rgba(255, 255, 255, .07) !important;
}


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

.matches-area
.livescore-match-card.is-live
.match-team-name {

    background: transparent !important;

    color: #ffffff !important;
}


/* =========================================================
   SCORE
   ========================================================= */

.matches-area
.livescore-match-card.is-live
.match-score {

    background: transparent !important;

    color: #ffffff !important;
}


/* =========================================================
   TIME / STATUS COLUMN
   ---------------------------------------------------------
   Jangan diberi putih.
   Tetap menyatu dengan card.
   ========================================================= */

.matches-area
.livescore-match-card.is-live
.match-time-column {

    background: transparent !important;

    color: #ffffff !important;
}


/* =========================================================
   PREVIEW AREA
   ========================================================= */

.matches-area
.livescore-match-card.is-live
.match-preview-column {

    background: transparent !important;
}


/* =========================================================
   POSSIBLE GENERIC CHILDREN
   ---------------------------------------------------------
   Mencegah rule lama menghasilkan baris putih.
   ========================================================= */

.matches-area
.livescore-match-card.is-live
.match-teams > *,
.matches-area
.livescore-match-card.is-live
.match-team > * {

    background: transparent !important;
}


/* =========================================================
   HOVER
   ========================================================= */

.matches-area
.livescore-match-card.is-live:hover {

    background: #10243a !important;
}

.matches-area
.livescore-match-card.is-live:hover
.match-team {

    background: #10243a !important;
}


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

html[data-theme="dark"]
.matches-area
.livescore-match-card.is-live,
html[data-theme="dark"]
.matches-area
.livescore-match-card.is-live
.match-team {

    background: #0b1b2c !important;

    color: #ffffff !important;
}


/* =========================================================
   LIGHT THEME
   ---------------------------------------------------------
   Tetap FORCE DARK sesuai desain Livescore.
   ========================================================= */

html:not([data-theme="dark"])
.matches-area
.livescore-match-card.is-live,
html:not([data-theme="dark"])
.matches-area
.livescore-match-card.is-live
.match-team {

    background: #0b1b2c !important;

    color: #ffffff !important;
}

html:not([data-theme="dark"])
.matches-area
.livescore-match-card.is-live
.match-team-name,
html:not([data-theme="dark"])
.matches-area
.livescore-match-card.is-live
.match-score {

    color: #ffffff !important;
}


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

@media (max-width: 600px) {

    .matches-area
    .livescore-match-card.is-live,
    .matches-area
    .livescore-match-card.is-live
    .match-team {

        background: #0b1b2c !important;

        color: #ffffff !important;
    }
}


/* =========================================================
   FINAL SAFETY OVERRIDE
   ========================================================= */

.matches-area
.livescore-match-card.is-live
.match-team-name,
.matches-area
.livescore-match-card.is-live
.match-score,
.matches-area
.livescore-match-card.is-live
.match-time-column {

    background: transparent !important;
}


/* =========================================================
   RADAR LIVESCORE
   LIVE MATCH RED PREMIUM
   LIVE-RED-PREMIUM-20260905-V1
   ---------------------------------------------------------
   Hanya pertandingan yang sedang LIVE.
   Card tetap dark premium.
   Badge LIVE + indikator kiri menjadi merah.
   ========================================================= */


/* =========================================================
   LIVE CARD — RED LEFT INDICATOR
   ========================================================= */

.matches-area
.livescore-match-card.is-live {

    border-left:
        3px solid #ff3347 !important;

}


/* =========================================================
   LIVE STATUS BADGE
   ---------------------------------------------------------
   Contoh:
   33'
   45'
   67'
   ========================================================= */

.matches-area
.livescore-match-card.is-live
.match-status.live {

    background:
        linear-gradient(
            135deg,
            #ff1f3d 0%,
            #dc1632 100%
        ) !important;

    color:
        #ffffff !important;

    border:
        1px solid rgba(255, 255, 255, .18) !important;

    box-shadow:
        0 3px 10px rgba(255, 31, 61, .28),
        inset 0 1px 0 rgba(255, 255, 255, .18) !important;

    font-weight:
        800 !important;

}


/* =========================================================
   LIVE STATUS DOT
   ---------------------------------------------------------
   Kalau status LIVE mempunyai dot/icon.
   ========================================================= */

.matches-area
.livescore-match-card.is-live
.match-status.live::before {

    background:
        #ffffff !important;

    box-shadow:
        0 0 6px rgba(255, 255, 255, .85);

}


/* =========================================================
   LIVE TIME COLUMN
   ---------------------------------------------------------
   Hanya aksen merah.
   Background tetap transparan/dark.
   ========================================================= */

.matches-area
.livescore-match-card.is-live
.match-time-column {

    background:
        transparent !important;

}


/* =========================================================
   LIVE STATUS — POSSIBLE ALTERNATE SELECTOR
   ---------------------------------------------------------
   Untuk struktur lama yang memakai .match-live
   ========================================================= */

.matches-area
.livescore-match-card.is-live
.match-live {

    background:
        linear-gradient(
            135deg,
            #ff1f3d 0%,
            #dc1632 100%
        ) !important;

    color:
        #ffffff !important;

    border:
        1px solid rgba(255, 255, 255, .18) !important;

    box-shadow:
        0 3px 10px rgba(255, 31, 61, .28),
        inset 0 1px 0 rgba(255, 255, 255, .18) !important;

}


/* =========================================================
   LIVE CARD HOVER
   ---------------------------------------------------------
   Jangan menghilangkan indikator merah.
   ========================================================= */

.matches-area
.livescore-match-card.is-live:hover {

    border-left:
        3px solid #ff3347 !important;

}


/* =========================================================
   DARK MODE
   ========================================================= */

html[data-theme="dark"]
.matches-area
.livescore-match-card.is-live
.match-status.live {

    background:
        linear-gradient(
            135deg,
            #ff1f3d 0%,
            #dc1632 100%
        ) !important;

    color:
        #ffffff !important;

}


/* =========================================================
   LIGHT MODE
   ---------------------------------------------------------
   LIVE tetap merah.
   Tidak mengikuti background light.
   ========================================================= */

html:not([data-theme="dark"])
.matches-area
.livescore-match-card.is-live
.match-status.live {

    background:
        linear-gradient(
            135deg,
            #ff1f3d 0%,
            #dc1632 100%
        ) !important;

    color:
        #ffffff !important;

}


/* =========================================================
   DARK + LIGHT — LEFT LIVE INDICATOR
   ========================================================= */

html[data-theme="dark"]
.matches-area
.livescore-match-card.is-live,

html:not([data-theme="dark"])
.matches-area
.livescore-match-card.is-live {

    border-left:
        3px solid #ff3347 !important;

}


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

@media (max-width: 600px) {

    .matches-area
    .livescore-match-card.is-live {

        border-left:
            3px solid #ff3347 !important;

    }

    .matches-area
    .livescore-match-card.is-live
    .match-status.live {

        background:
            linear-gradient(
                135deg,
                #ff1f3d 0%,
                #dc1632 100%
            ) !important;

        color:
            #ffffff !important;

    }

}


/* =========================================================
   VERY SMALL PHONE
   ========================================================= */

@media (max-width: 340px) {

    .matches-area
    .livescore-match-card.is-live {

        border-left:
            3px solid #ff3347 !important;

    }

}


/* =========================================================
   FINAL SAFETY
   ---------------------------------------------------------
   Jangan mengubah FT / UPCOMING.
   ========================================================= */

.matches-area
.livescore-match-card:not(.is-live)
.match-status.live {

    background:
        unset;

}



/* =========================================================
   RADAR LIVESCORE
   LIVE STATUS — TRANSPARENT PREMIUM


/* =========================================================
   RADAR LIVESCORE
   LIVE STATUS — FINAL LIGHT MODE
   LIVE-STATUS-FINAL-LIGHTMODE-20260905-V4
   ---------------------------------------------------------
   LIGHT MODE:
   - LIVE card tetap putih
   - status box transparan
   - border sama dengan FT / waktu
   - dot merah
   - angka menit merah

   DARK MODE:
   - TIDAK DISENTUH
   ========================================================= */


/* =========================================================
   LIGHT MODE — LIVE MATCH CARD
   ========================================================= */

html:not([data-theme="dark"])
.matches-area
.livescore-match-card.is-live {

    background: #ffffff !important;
}


/* =========================================================
   LIGHT MODE — LIVE STATUS
   ========================================================= */

html:not([data-theme="dark"])
.matches-area
.livescore-match-card.is-live
.match-status.live {

    background: transparent !important;

    border: 1px solid var(--rl-line) !important;

    border-color: var(--rl-line) !important;

    color: #ff3347 !important;

    box-shadow: none !important;

    font-weight: 900 !important;
}


/* =========================================================
   LIGHT MODE — LIVE DOT
   ========================================================= */

html:not([data-theme="dark"])
.matches-area
.livescore-match-card.is-live
.match-status.live
.live-dot {

    background: #ff3347 !important;

    color: #ff3347 !important;

    box-shadow: none !important;
}


/* =========================================================
   LIGHT MODE — PSEUDO DOT
   ========================================================= */

html:not([data-theme="dark"])
.matches-area
.livescore-match-card.is-live
.match-status.live::before {

    background: #ff3347 !important;

    box-shadow: none !important;
}


/* =========================================================
   LIGHT MODE — HOVER
   ========================================================= */

html:not([data-theme="dark"])
.matches-area
.livescore-match-card.is-live:hover {

    background: #ffffff !important;
}


/* =========================================================
   LIGHT MODE — MOBILE
   ========================================================= */

@media (max-width: 600px) {

    html:not([data-theme="dark"])
    .matches-area
    .livescore-match-card.is-live {

        background: #ffffff !important;
    }

    html:not([data-theme="dark"])
    .matches-area
    .livescore-match-card.is-live
    .match-status.live {

        background: transparent !important;

        border: 1px solid var(--rl-line) !important;

        border-color: var(--rl-line) !important;

        color: #ff3347 !important;

        box-shadow: none !important;
    }

    html:not([data-theme="dark"])
    .matches-area
    .livescore-match-card.is-live
    .match-status.live
    .live-dot {

        background: #ff3347 !important;

        color: #ff3347 !important;

        box-shadow: none !important;
    }
}


/* =========================================================
   LIGHT MODE — VERY SMALL PHONE
   ========================================================= */

@media (max-width: 340px) {

    html:not([data-theme="dark"])
    .matches-area
    .livescore-match-card.is-live {

        background: #ffffff !important;
    }

    html:not([data-theme="dark"])
    .matches-area
    .livescore-match-card.is-live
    .match-status.live {

        background: transparent !important;

        border: 1px solid var(--rl-line) !important;

        border-color: var(--rl-line) !important;

        color: #ff3347 !important;

        box-shadow: none !important;
    }
}



/* =========================================================
   LIVE-TIME-COLOR-BACKGROUND-FINAL-20260905-V5
   =========================================================
   LIGHT:
   - LIVE match background putih
   - LIVE time background putih
   - LIVE border mengikuti border waktu normal
   - LIVE text merah
   - LIVE dot merah

   DARK:
   - LIVE match background mengikuti match normal
   - LIVE time background mengikuti badge FT/upcoming
   - LIVE border mengikuti badge FT/upcoming
   - LIVE text merah
   - LIVE dot merah
   ========================================================= */


/* =========================================================
   LIGHT MODE
   ========================================================= */

html:not([data-theme="dark"])
.matches-area
.livescore-match-card.is-live {

    background: #ffffff !important;
}


/* LIVE TIME — LIGHT */

html:not([data-theme="dark"])
.matches-area
.livescore-match-card.is-live
.match-status.live {

    background: #ffffff !important;

    border: 1px solid var(--rl-line) !important;

    border-color: var(--rl-line) !important;

    color: #ff3347 !important;

    box-shadow: none !important;
}


/* LIVE DOT — LIGHT */

html:not([data-theme="dark"])
.matches-area
.livescore-match-card.is-live
.match-status.live
.live-dot {

    background: #ff3347 !important;

    color: #ff3347 !important;

    box-shadow: none !important;
}


/* =========================================================
   DARK MODE
   ========================================================= */

html[data-theme="dark"]
.matches-area
.livescore-match-card.is-live {

    background: #0b1a2a !important;
}


/* LIVE TIME — DARK */

html[data-theme="dark"]
.matches-area
.livescore-match-card.is-live
.match-status.live {

    background: #0b1a2a !important;

    border: 1px solid var(--rl-line) !important;

    border-color: var(--rl-line) !important;

    color: #ff3347 !important;

    box-shadow: none !important;
}


/* LIVE DOT — DARK */

html[data-theme="dark"]
.matches-area
.livescore-match-card.is-live
.match-status.live
.live-dot {

    background: #ff3347 !important;

    color: #ff3347 !important;

    box-shadow: none !important;
}


/* =========================================================
   LIVE TEXT / MINUTE — RED
   ========================================================= */

html[data-theme="dark"]
.matches-area
.livescore-match-card.is-live
.match-status.live {

    color: #ff3347 !important;
}


html:not([data-theme="dark"])
.matches-area
.livescore-match-card.is-live
.match-status.live {

    color: #ff3347 !important;
}


/* =========================================================
   PREVENT HOVER FROM TURNING LIVE CARD DARK IN LIGHT MODE
   ========================================================= */

html:not([data-theme="dark"])
.matches-area
.livescore-match-card.is-live:hover {

    background: #ffffff !important;
}


/* =========================================================
   END V5
   ========================================================= */



/* =========================================================
   RADAR LIVESCORE
   LIVE-STATUS-FINAL-FIX-20260905-V6
   =========================================================
   FINAL TARGET:

   LIGHT MODE
   - seluruh area LIVE putih
   - match-teams putih
   - match-team putih
   - nama tim hitam
   - score hitam
   - badge LIVE putih
   - border badge sama dengan FT
   - dot merah
   - menit merah

   DARK MODE
   - seluruh area LIVE mengikuti dark match normal
   - match-teams dark
   - match-team dark
   - nama tim putih
   - score putih
   - badge LIVE mengikuti FT/upcoming
   - border badge sama dengan FT
   - dot merah
   - menit merah

   FT / UPCOMING TIDAK DISENTUH
   ========================================================= */


/* =========================================================
   LIGHT MODE
   ========================================================= */

html:not([data-theme="dark"])
.matches-area
.livescore-match-card.is-live {

    background: #ffffff !important;

    color: #101828 !important;
}


/* LIVE TEAMS CONTAINER — LIGHT */

html:not([data-theme="dark"])
.matches-area
.livescore-match-card.is-live
.match-teams {

    background: #ffffff !important;

    color: #101828 !important;
}


/* LIVE TEAM ROW — LIGHT */

html:not([data-theme="dark"])
.matches-area
.livescore-match-card.is-live
.match-team {

    background: #ffffff !important;

    color: #101828 !important;

    border-color: var(--rl-line) !important;
}


/* TEAM NAME — LIGHT */

html:not([data-theme="dark"])
.matches-area
.livescore-match-card.is-live
.match-team-name {

    background: transparent !important;

    color: #101828 !important;
}


/* SCORE — LIGHT */

html:not([data-theme="dark"])
.matches-area
.livescore-match-card.is-live
.match-score {

    background: transparent !important;

    color: #101828 !important;
}


/* TIME COLUMN — LIGHT */

html:not([data-theme="dark"])
.matches-area
.livescore-match-card.is-live
.match-time-column {

    background: transparent !important;

    color: #101828 !important;
}


/* LIVE BADGE — LIGHT */

html:not([data-theme="dark"])
.matches-area
.livescore-match-card.is-live
.match-status.live {

    background: #ffffff !important;

    border: 1px solid var(--rl-line) !important;

    border-color: var(--rl-line) !important;

    color: #ff3347 !important;

    box-shadow: none !important;

    font-weight: 900 !important;
}


/* LIVE DOT — LIGHT */

html:not([data-theme="dark"])
.matches-area
.livescore-match-card.is-live
.match-status.live
.live-dot {

    width: 6px !important;

    height: 6px !important;

    min-width: 6px !important;

    background: #ff3347 !important;

    color: #ff3347 !important;

    box-shadow: none !important;
}


/* LIVE DOT FALLBACK ::before */

html:not([data-theme="dark"])
.matches-area
.livescore-match-card.is-live
.match-status.live::before {

    background: #ff3347 !important;

    color: #ff3347 !important;

    box-shadow: none !important;
}


/* LIGHT HOVER */

html:not([data-theme="dark"])
.matches-area
.livescore-match-card.is-live:hover {

    background: #ffffff !important;
}

html:not([data-theme="dark"])
.matches-area
.livescore-match-card.is-live:hover
.match-teams,

html:not([data-theme="dark"])
.matches-area
.livescore-match-card.is-live:hover
.match-team {

    background: #ffffff !important;
}


/* =========================================================
   DARK MODE
   ========================================================= */

html[data-theme="dark"]
.matches-area
.livescore-match-card.is-live {

    background: #0b1b2c !important;

    color: #ffffff !important;
}


/* LIVE TEAMS CONTAINER — DARK */

html[data-theme="dark"]
.matches-area
.livescore-match-card.is-live
.match-teams {

    background: #0b1b2c !important;

    color: #ffffff !important;
}


/* LIVE TEAM ROW — DARK */

html[data-theme="dark"]
.matches-area
.livescore-match-card.is-live
.match-team {

    background: #0b1b2c !important;

    color: #ffffff !important;

    border-color: rgba(255, 255, 255, .07) !important;
}


/* TEAM NAME — DARK */

html[data-theme="dark"]
.matches-area
.livescore-match-card.is-live
.match-team-name {

    background: transparent !important;

    color: #ffffff !important;
}


/* SCORE — DARK */

html[data-theme="dark"]
.matches-area
.livescore-match-card.is-live
.match-score {

    background: transparent !important;

    color: #ffffff !important;
}


/* TIME COLUMN — DARK */

html[data-theme="dark"]
.matches-area
.livescore-match-card.is-live
.match-time-column {

    background: transparent !important;

    color: #ffffff !important;
}


/* =========================================================
   LIVE BADGE DARK
   SAMA DENGAN FT / UPCOMING
   HANYA TEXT + DOT MERAH
   ========================================================= */

html[data-theme="dark"]
.matches-area
.livescore-match-card.is-live
.match-status.live {

    background: var(--rl-surface-soft) !important;

    border: 1px solid var(--rl-line) !important;

    border-color: var(--rl-line) !important;

    color: #ff3347 !important;

    box-shadow: none !important;

    font-weight: 900 !important;
}


/* LIVE DOT — DARK */

html[data-theme="dark"]
.matches-area
.livescore-match-card.is-live
.match-status.live
.live-dot {

    width: 6px !important;

    height: 6px !important;

    min-width: 6px !important;

    background: #ff3347 !important;

    color: #ff3347 !important;

    box-shadow: none !important;
}


/* LIVE DOT FALLBACK ::before — DARK */

html[data-theme="dark"]
.matches-area
.livescore-match-card.is-live
.match-status.live::before {

    background: #ff3347 !important;

    color: #ff3347 !important;

    box-shadow: none !important;
}


/* DARK HOVER */

html[data-theme="dark"]
.matches-area
.livescore-match-card.is-live:hover {

    background: #10243a !important;
}

html[data-theme="dark"]
.matches-area
.livescore-match-card.is-live:hover
.match-teams,

html[data-theme="dark"]
.matches-area
.livescore-match-card.is-live:hover
.match-team {

    background: #10243a !important;
}


/* =========================================================
   ABSOLUTE FINAL PROTECTION
   LIVE ONLY
   ========================================================= */

html:not([data-theme="dark"])
.matches-area
.livescore-match-card.is-live
.match-teams > *,

html:not([data-theme="dark"])
.matches-area
.livescore-match-card.is-live
.match-team > * {

    background: transparent !important;
}


html[data-theme="dark"]
.matches-area
.livescore-match-card.is-live
.match-teams > *,

html[data-theme="dark"]
.matches-area
.livescore-match-card.is-live
.match-team > * {

    background: transparent !important;
}


/* =========================================================
   END LIVE-STATUS-FINAL-FIX-20260905-V6
   ========================================================= */



/* =========================================================
   LIVE-DARK-BORDER-SAME-AS-FT-20260905-V7
   =========================================================
   DARK MODE ONLY

   LIVE badge:
   - background = same as FT
   - border     = same as FT
   - text       = red
   - dot        = red

   LIGHT MODE = TIDAK DISENTUH
   FT          = TIDAK DISENTUH
   UPCOMING    = TIDAK DISENTUH
   ========================================================= */


/* =========================================================
   DARK MODE — LIVE BADGE
   SAME AS FINISHED / FT
   ========================================================= */

html[data-theme="dark"]
.matches-area
.livescore-match-card.is-live
.match-status.live {

    background: #142a43 !important;

    border: 1px solid #31506f !important;

    border-color: #31506f !important;

    color: #ff3347 !important;

    box-shadow: none !important;
}


/* =========================================================
   DARK MODE — LIVE DOT
   ========================================================= */

html[data-theme="dark"]
.matches-area
.livescore-match-card.is-live
.match-status.live
.live-dot {

    background: #ff3347 !important;

    color: #ff3347 !important;

    box-shadow: none !important;
}


/* =========================================================
   DARK MODE — LIVE DOT FALLBACK
   ========================================================= */

html[data-theme="dark"]
.matches-area
.livescore-match-card.is-live
.match-status.live::before {

    background: #ff3347 !important;

    color: #ff3347 !important;

    box-shadow: none !important;
}


/* =========================================================
   DARK MODE — LIVE TEXT
   ========================================================= */

html[data-theme="dark"]
.matches-area
.livescore-match-card.is-live
.match-status.live {

    color: #ff3347 !important;
}


/* =========================================================
   END V7
   ========================================================= */



/* =========================================================
   RADAR LIVESCORE
   THEME-BUTTON-HEADER-STYLE-FINAL-20260905-V8
   =========================================================
   TARGET:

   LIGHT MODE
   - Theme button background = header
   - Theme icon = WHITE
   - Border = header button border

   DARK MODE
   - Theme button background = header
   - Theme icon = WHITE
   - Border = header button border

   ONLY THEME BUTTON
   OTHER HEADER BUTTONS = TIDAK DISENTUH
   ========================================================= */


/* =========================================================
   THEME BUTTON — BASE
   ========================================================= */

#theme-toggle,
.theme-toggle,
.theme-switch,
.theme-button,
[data-theme-toggle],
[data-theme-switch],
button[aria-label*="theme" i],
button[title*="theme" i],
button[aria-label*="mode" i],
button[title*="mode" i] {

    background: var(--nav) !important;

    background-color: var(--nav) !important;

    border: 1px solid rgba(255, 255, 255, .16) !important;

    color: #ffffff !important;

    box-shadow: none !important;
}


/* =========================================================
   LIGHT MODE
   ========================================================= */

html:not([data-theme="dark"])
#theme-toggle,

html:not([data-theme="dark"])
.theme-toggle,

html:not([data-theme="dark"])
.theme-switch,

html:not([data-theme="dark"])
.theme-button,

html:not([data-theme="dark"])
[data-theme-toggle],

html:not([data-theme="dark"])
[data-theme-switch] {

    background: var(--nav) !important;

    background-color: var(--nav) !important;

    border-color: rgba(255, 255, 255, .16) !important;

    color: #ffffff !important;
}


/* =========================================================
   DARK MODE
   ========================================================= */

html[data-theme="dark"]
#theme-toggle,

html[data-theme="dark"]
.theme-toggle,

html[data-theme="dark"]
.theme-switch,

html[data-theme="dark"]
.theme-button,

html[data-theme="dark"]
[data-theme-toggle],

html[data-theme="dark"]
[data-theme-switch] {

    background: var(--nav) !important;

    background-color: var(--nav) !important;

    border-color: rgba(255, 255, 255, .16) !important;

    color: #ffffff !important;
}


/* =========================================================
   ICON — WHITE
   SVG
   ========================================================= */

#theme-toggle svg,
.theme-toggle svg,
.theme-switch svg,
.theme-button svg,
[data-theme-toggle] svg,
[data-theme-switch] svg {

    color: #ffffff !important;

    fill: #ffffff !important;

    stroke: #ffffff !important;
}


/* =========================================================
   ICON — I / SPAN / EM
   ========================================================= */

#theme-toggle i,
#theme-toggle span,
#theme-toggle em,

.theme-toggle i,
.theme-toggle span,
.theme-toggle em,

.theme-switch i,
.theme-switch span,
.theme-switch em,

.theme-button i,
.theme-button span,
.theme-button em,

[data-theme-toggle] i,
[data-theme-toggle] span,
[data-theme-toggle] em,

[data-theme-switch] i,
[data-theme-switch] span,
[data-theme-switch] em {

    color: #ffffff !important;
}


/* =========================================================
   COMMON ICON LIBRARIES
   ========================================================= */

#theme-toggle .fa,
#theme-toggle .fas,
#theme-toggle .far,
#theme-toggle .fa-sun,
#theme-toggle .fa-moon,

.theme-toggle .fa,
.theme-toggle .fas,
.theme-toggle .far,
.theme-toggle .fa-sun,
.theme-toggle .fa-moon,

.theme-switch .fa,
.theme-switch .fas,
.theme-switch .far,
.theme-switch .fa-sun,
.theme-switch .fa-moon,

.theme-button .fa,
.theme-button .fas,
.theme-button .far,
.theme-button .fa-sun,
.theme-button .fa-moon {

    color: #ffffff !important;

    fill: #ffffff !important;

    stroke: #ffffff !important;
}


/* =========================================================
   HOVER
   Tetap navy, icon tetap putih
   ========================================================= */

#theme-toggle:hover,
.theme-toggle:hover,
.theme-switch:hover,
.theme-button:hover,
[data-theme-toggle]:hover,
[data-theme-switch]:hover {

    background: var(--nav) !important;

    background-color: var(--nav) !important;

    color: #ffffff !important;

    border-color: rgba(255, 255, 255, .28) !important;

    box-shadow: none !important;
}


/* =========================================================
   HOVER ICON
   ========================================================= */

#theme-toggle:hover svg,
.theme-toggle:hover svg,
.theme-switch:hover svg,
.theme-button:hover svg,
[data-theme-toggle]:hover svg,
[data-theme-switch]:hover svg {

    color: #ffffff !important;

    fill: #ffffff !important;

    stroke: #ffffff !important;
}


/* =========================================================
   FOCUS / ACTIVE
   ========================================================= */

#theme-toggle:focus,
#theme-toggle:active,
.theme-toggle:focus,
.theme-toggle:active,
.theme-switch:focus,
.theme-switch:active,
.theme-button:focus,
.theme-button:active,
[data-theme-toggle]:focus,
[data-theme-toggle]:active,
[data-theme-switch]:focus,
[data-theme-switch]:active {

    background: var(--nav) !important;

    background-color: var(--nav) !important;

    color: #ffffff !important;

    border-color: rgba(255, 255, 255, .28) !important;

    box-shadow: none !important;
}


/* =========================================================
   END THEME-BUTTON-HEADER-STYLE-FINAL-20260905-V8
   ========================================================= */


/* =========================================================
   RADAR LIVESCORE
   DATE NAVIGATION + MATCH SEARCH
   2026-09-06
   ========================================================= */

.livescore-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    width: 100%;

    margin-bottom: 16px;

    padding: 12px;

    box-sizing: border-box;

    background: var(--surface, #ffffff);

    border: 1px solid var(--line, #e1e7ef);

    border-radius: 12px;
}


/* =========================================================
   DATE NAVIGATION
   ========================================================= */

.livescore-date-navigation {
    display: flex;
    align-items: center;

    gap: 8px;

    min-width: 0;
}


.livescore-date-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    padding: 0;

    border: 1px solid var(--line, #e1e7ef);

    border-radius: 10px;

    background: var(--surface-soft, #f8fafc);

    color: var(--text, #101828);

    font-size: 28px;
    line-height: 1;

    cursor: pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


.livescore-date-btn:hover {
    background: var(--surface, #ffffff);

    border-color: var(--primary, #2563eb);

    transform: translateY(-1px);
}


.livescore-date-btn:active {
    transform: translateY(0);
}


.livescore-date-current {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    min-width: 140px;
    height: 40px;

    padding: 6px 12px;

    box-sizing: border-box;

    border: 1px solid var(--line, #e1e7ef);

    border-radius: 10px;

    background: var(--surface, #ffffff);

    color: var(--text, #101828);

    cursor: pointer;

    transition:
        border-color .2s ease,
        background .2s ease;
}


.livescore-date-current:hover {
    border-color: var(--primary, #2563eb);
}


.livescore-date-label {
    font-size: 11px;
    line-height: 1.1;

    font-weight: 700;

    color: var(--muted, #667085);

    text-transform: uppercase;

    letter-spacing: .04em;
}


.livescore-date-value {
    margin-top: 2px;

    font-size: 13px;
    line-height: 1.2;

    font-weight: 700;

    color: var(--text, #101828);

    white-space: nowrap;
}


/* =========================================================
   DATE PICKER
   ========================================================= */

.livescore-date-picker {
    width: 40px;
    height: 40px;

    padding: 0 4px;

    box-sizing: border-box;

    border: 1px solid var(--line, #e1e7ef);

    border-radius: 10px;

    background: var(--surface-soft, #f8fafc);

    color: var(--text, #101828);

    cursor: pointer;

    overflow: hidden;
}


/* =========================================================
   MATCH SEARCH
   ========================================================= */

.livescore-match-search {
    position: relative;

    display: flex;
    align-items: center;

    width: min(320px, 100%);
    min-width: 220px;
}


.livescore-match-search-icon {
    position: absolute;

    left: 13px;

    pointer-events: none;

    color: var(--muted, #667085);

    font-size: 20px;

    line-height: 1;
}


#livescore-match-search-input {
    width: 100%;
    height: 40px;

    padding:
        0
        40px
        0
        40px;

    box-sizing: border-box;

    border: 1px solid var(--line, #e1e7ef);

    border-radius: 10px;

    outline: none;

    background: var(--surface-soft, #f8fafc);

    color: var(--text, #101828);

    font-size: 13px;

    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}


#livescore-match-search-input::placeholder {
    color: var(--muted, #667085);
}


#livescore-match-search-input:focus {
    background: var(--surface, #ffffff);

    border-color: var(--primary, #2563eb);

    box-shadow:
        0 0 0 3px
        rgba(37, 99, 235, .08);
}


.livescore-match-search-clear {
    position: absolute;

    right: 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: transparent;

    color: var(--muted, #667085);

    font-size: 20px;
    line-height: 1;

    cursor: pointer;
}


.livescore-match-search-clear:hover {
    background: var(--line, #e1e7ef);

    color: var(--text, #101828);
}


/* =========================================================
   DARK MODE
   ========================================================= */

body.dark-mode .livescore-toolbar,
.dark .livescore-toolbar,
[data-theme="dark"] .livescore-toolbar {
    background: var(--surface, #111827);

    border-color: var(--line, #273244);
}


body.dark-mode .livescore-date-btn,
.dark .livescore-date-btn,
[data-theme="dark"] .livescore-date-btn,
body.dark-mode .livescore-date-picker,
.dark .livescore-date-picker,
[data-theme="dark"] .livescore-date-picker {
    background: var(--surface-soft, #172033);

    border-color: var(--line, #273244);

    color: var(--text, #f8fafc);
}


body.dark-mode .livescore-date-current,
.dark .livescore-date-current,
[data-theme="dark"] .livescore-date-current {
    background: var(--surface, #111827);

    border-color: var(--line, #273244);

    color: var(--text, #f8fafc);
}


body.dark-mode #livescore-match-search-input,
.dark #livescore-match-search-input,
[data-theme="dark"] #livescore-match-search-input {
    background: var(--surface-soft, #172033);

    border-color: var(--line, #273244);

    color: var(--text, #f8fafc);
}


body.dark-mode #livescore-match-search-input:focus,
.dark #livescore-match-search-input:focus,
[data-theme="dark"] #livescore-match-search-input:focus {
    background: var(--surface, #111827);

    border-color: var(--primary, #2563eb);
}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 900px) {

    .livescore-toolbar {
        align-items: stretch;

        flex-direction: column;
    }


    .livescore-date-navigation {
        width: 100%;
    }


    .livescore-date-current {
        flex: 1;
    }


    .livescore-match-search {
        width: 100%;

        min-width: 0;
    }

}


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

@media screen and (max-width: 600px) {

    .livescore-toolbar {
        gap: 10px;

        padding: 10px;

        border-radius: 10px;
    }


    .livescore-date-navigation {
        gap: 6px;
    }


    .livescore-date-btn,
    .livescore-date-picker {
        width: 38px;
        height: 38px;

        flex-basis: 38px;
    }


    .livescore-date-current {
        min-width: 0;

        height: 38px;
    }


    #livescore-match-search-input {
        height: 38px;
    }

}



/* =========================================================
   RADAR LIVESCORE
   DATE BOX NAVIGATION FINAL
   ========================================================= */

.livescore-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;
}


.livescore-date-navigation {
    display: flex;
    align-items: stretch;

    gap: 8px;

    flex: 1;

    min-width: 0;
}


/* =========================================================
   DATE STRIP
   ========================================================= */

.livescore-date-strip {
    display: grid;

    grid-template-columns:
        repeat(7, minmax(72px, 1fr));

    width: 100%;

    min-width: 0;

    overflow: hidden;

    border: 1px solid var(--line, #e1e7ef);

    border-radius: 8px;

    background: var(--surface, #ffffff);
}


/* =========================================================
   DATE BOX
   ========================================================= */

.livescore-date-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-width: 0;

    height: 78px;

    padding: 8px 6px;

    border: 0;

    border-right:
        1px solid
        var(--line, #e1e7ef);

    background:
        var(--surface, #ffffff);

    color:
        var(--text, #101828);

    cursor: pointer;

    transition:
        background .18s ease,
        color .18s ease,
        box-shadow .18s ease;
}


.livescore-date-box:last-child {
    border-right: 0;
}


.livescore-date-box:hover {
    background:
        var(--surface-soft, #f8fafc);
}


/* =========================================================
   ACTIVE DATE
   ========================================================= */

.livescore-date-box.is-active {
    background:
        var(--primary, #2563eb);

    color: #ffffff;

    box-shadow:
        inset 0 0 0 1px
        var(--primary, #2563eb);
}


.livescore-date-box.is-active
.livescore-date-box-day,
.livescore-date-box.is-active
.livescore-date-box-number,
.livescore-date-box.is-active
.livescore-date-box-month {
    color: #ffffff;
}


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

.livescore-date-box-day {
    font-size: 11px;

    line-height: 1.2;

    font-weight: 700;

    color:
        var(--muted, #667085);

    white-space: nowrap;
}


/* =========================================================
   DATE NUMBER
   ========================================================= */

.livescore-date-box-number {
    margin-top: 4px;

    font-size: 21px;

    line-height: 1;

    font-weight: 800;

    color:
        var(--text, #101828);
}


/* =========================================================
   MONTH
   ========================================================= */

.livescore-date-box-month {
    margin-top: 4px;

    font-size: 10px;

    line-height: 1.2;

    font-weight: 700;

    color:
        var(--muted, #667085);

    white-space: nowrap;
}


/* =========================================================
   CALENDAR BUTTON
   ========================================================= */

.livescore-calendar-button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 54px;

    min-width: 54px;

    height: 78px;

    padding: 0;

    border:
        1px solid
        var(--line, #e1e7ef);

    border-radius: 8px;

    background:
        var(--surface, #ffffff);

    color:
        var(--text, #101828);

    font-size: 21px;

    cursor: pointer;

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}


.livescore-calendar-button:hover {
    background:
        var(--surface-soft, #f8fafc);

    border-color:
        var(--primary, #2563eb);

    transform:
        translateY(-1px);
}


.livescore-calendar-button:active {
    transform:
        translateY(0);
}


/* =========================================================
   HIDDEN NATIVE DATE INPUT
   CALENDAR SUPPORT DESKTOP + MOBILE
========================================================= */

.livescore-date-picker {

    position: absolute !important;

    width: 40px !important;

    height: 40px !important;

    top: 0 !important;

    right: 0 !important;

    margin: 0 !important;

    padding: 0 !important;

    opacity: 0 !important;

    display: block !important;

    visibility: visible !important;

    pointer-events: auto !important;

    cursor: pointer !important;

    border: 0 !important;

    background: transparent !important;

}


/* =========================================================
   SEARCH
   ========================================================= */

.livescore-match-search {
    flex: 0 0 280px;

    width: 280px;

    min-width: 220px;
}


/* =========================================================
   DARK MODE
   ========================================================= */

body.dark-mode .livescore-date-strip,
.dark .livescore-date-strip,
[data-theme="dark"] .livescore-date-strip {
    background:
        var(--surface, #111827);

    border-color:
        var(--line, #273244);
}


body.dark-mode .livescore-date-box,
.dark .livescore-date-box,
[data-theme="dark"] .livescore-date-box {
    background:
        var(--surface, #111827);

    border-color:
        var(--line, #273244);

    color:
        var(--text, #f8fafc);
}


body.dark-mode .livescore-date-box:hover,
.dark .livescore-date-box:hover,
[data-theme="dark"] .livescore-date-box:hover {
    background:
        var(--surface-soft, #172033);
}


body.dark-mode
.livescore-date-box-number,
.dark
.livescore-date-box-number,
[data-theme="dark"]
.livescore-date-box-number {
    color:
        var(--text, #f8fafc);
}


body.dark-mode
.livescore-calendar-button,
.dark
.livescore-calendar-button,
[data-theme="dark"]
.livescore-calendar-button {
    background:
        var(--surface, #111827);

    border-color:
        var(--line, #273244);

    color:
        var(--text, #f8fafc);
}


body.dark-mode
.livescore-calendar-button:hover,
.dark
.livescore-calendar-button:hover,
[data-theme="dark"]
.livescore-calendar-button:hover {
    background:
        var(--surface-soft, #172033);
}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 1100px) {

    .livescore-toolbar {
        flex-direction: column;

        align-items: stretch;
    }


    .livescore-date-navigation {
        width: 100%;
    }


    .livescore-match-search {
        width: 100%;

        min-width: 0;

        flex: 1;
    }

}


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

@media screen and (max-width: 700px) {

    .livescore-toolbar {
        padding: 8px;

        gap: 10px;
    }


    .livescore-date-navigation {
        gap: 6px;
    }


    .livescore-date-strip {
        grid-template-columns:
            repeat(7, minmax(54px, 1fr));

        overflow-x: auto;

        scrollbar-width: none;
    }


    .livescore-date-strip::-webkit-scrollbar {
        display: none;
    }


    .livescore-date-box {
        min-width: 54px;

        height: 68px;

        padding: 6px 3px;
    }


    .livescore-date-box-day {
        font-size: 10px;
    }


    .livescore-date-box-number {
        font-size: 18px;

        margin-top: 3px;
    }


    .livescore-date-box-month {
        font-size: 9px;

        margin-top: 3px;
    }


    .livescore-calendar-button {
        width: 46px;

        min-width: 46px;

        height: 68px;

        font-size: 18px;
    }

}




/* =========================================================
   COMPETITION CENTER — PROFESSIONAL UI V1
   ========================================================= */

.competition-center {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    box-sizing: border-box;
}


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

.competition-center-header {
    display: grid;

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

    align-items: center;

    gap: 18px;

    padding: 20px;

    background:
        #ffffff;

    border:
        1px solid var(--line, #e1e7ef);

    border-radius:
        14px;

    box-sizing:
        border-box;
}


.competition-center-back {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 38px;

    padding:
        0 13px;

    border:
        1px solid var(--line, #e1e7ef);

    border-radius:
        9px;

    background:
        #f8fafc;

    color:
        var(--text, #101828);

    font:
        inherit;

    font-size:
        13px;

    font-weight:
        700;

    cursor:
        pointer;

    white-space:
        nowrap;

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}


.competition-center-back:hover {
    background:
        #eef3f8;

    border-color:
        #cfd8e3;

    transform:
        translateY(-1px);
}


/* =========================================================
   COMPETITION BRAND
   ========================================================= */

.competition-center-brand {
    display: flex;

    align-items: center;

    min-width: 0;

    gap: 14px;
}


.competition-center-logo {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    min-width: 58px;

    overflow: hidden;

    background:
        #f8fafc;

    border:
        1px solid var(--line, #e1e7ef);

    border-radius:
        13px;
}


.competition-center-logo img {
    display: block;

    width: 46px;
    height: 46px;

    object-fit:
        contain;
}


.competition-center-logo span {
    font-size:
        27px;
}


.competition-center-title {
    min-width: 0;
}


.competition-center-title h1 {
    margin:
        0;

    color:
        var(--text, #101828);

    font-size:
        20px;

    font-weight:
        800;

    line-height:
        1.2;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.competition-center-title p {
    margin:
        5px 0 0;

    color:
        var(--muted, #667085);

    font-size:
        13px;

    line-height:
        1.4;
}


/* =========================================================
   SEASON SELECT
   ========================================================= */

.competition-center-season {
    display: flex;

    flex-direction:
        column;

    gap:
        5px;

    min-width:
        110px;
}


.competition-center-season span {
    color:
        var(--muted, #667085);

    font-size:
        10px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        .05em;
}


.competition-center-season select {
    width:
        100%;

    min-height:
        38px;

    padding:
        0 30px 0 10px;

    border:
        1px solid var(--line, #e1e7ef);

    border-radius:
        8px;

    outline:
        none;

    background:
        #ffffff;

    color:
        var(--text, #101828);

    font:
        inherit;

    font-size:
        13px;

    font-weight:
        700;

    cursor:
        pointer;
}


.competition-center-season select:focus {
    border-color:
        #98a2b3;

    box-shadow:
        0 0 0 3px
        rgba(16, 24, 40, .06);
}


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

.competition-center-tabs {
    display: flex;

    align-items: center;

    gap:
        6px;

    width:
        100%;

    margin:
        12px 0 0;

    padding:
        6px;

    overflow-x:
        auto;

    background:
        #ffffff;

    border:
        1px solid var(--line, #e1e7ef);

    border-radius:
        12px;

    box-sizing:
        border-box;

    scrollbar-width:
        thin;
}


.competition-center-tabs button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex:
        1 0 auto;

    min-height:
        38px;

    padding:
        0 16px;

    border:
        0;

    border-radius:
        8px;

    background:
        transparent;

    color:
        var(--muted, #667085);

    font:
        inherit;

    font-size:
        13px;

    font-weight:
        700;

    white-space:
        nowrap;

    cursor:
        pointer;

    transition:
        background .18s ease,
        color .18s ease;
}


.competition-center-tabs button:hover {
    background:
        #f5f7fa;

    color:
        var(--text, #101828);
}


/* Support berbagai kemungkinan class active */

.competition-center-tabs button.is-active,
.competition-center-tabs button.active,
.competition-center-tabs button[aria-selected="true"] {
    background:
        #101828;

    color:
        #ffffff;
}


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

.competition-center-content {
    width:
        100%;

    max-width:
        100%;

    min-width:
        0;

    margin-top:
        12px;

    box-sizing:
        border-box;
}


/* =========================================================
   MATCH LIST
   ========================================================= */

.competition-center-match-list {
    display: flex;

    flex-direction:
        column;

    gap:
        8px;

    width:
        100%;
}


.competition-center-match {
    display: grid;

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

    align-items:
        center;

    gap:
        16px;

    min-height:
        72px;

    padding:
        12px 16px;

    background:
        #ffffff;

    border:
        1px solid var(--line, #e1e7ef);

    border-radius:
        12px;

    box-sizing:
        border-box;

    transition:
        border-color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}


.competition-center-match:hover {
    border-color:
        #cfd8e3;

    transform:
        translateY(-1px);

    box-shadow:
        0 4px 14px
        rgba(16, 24, 40, .05);
}


.competition-center-match-meta {
    display: flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        4px;

    min-width:
        0;
}


.competition-center-match-meta span {
    color:
        var(--muted, #667085);

    font-size:
        12px;

    font-weight:
        700;
}


.competition-center-match-meta time {
    color:
        var(--text, #101828);

    font-size:
        11px;

    font-weight:
        800;
}


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

.competition-center-team {
    display: flex;

    align-items:
        center;

    min-width:
        0;

    gap:
        10px;
}


.competition-center-team img,
.competition-center-team-placeholder {
    display: flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        32px;

    height:
        32px;

    min-width:
        32px;

    object-fit:
        contain;

    background:
        #f8fafc;

    border:
        1px solid var(--line, #e1e7ef);

    border-radius:
        50%;
}


.competition-center-team span:last-child {
    overflow:
        hidden;

    color:
        var(--text, #101828);

    font-size:
        13px;

    font-weight:
        700;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


/* =========================================================
   SCORE
   ========================================================= */

.competition-center-score {
    display: flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    min-width:
        74px;
}


.competition-center-score strong {
    color:
        var(--text, #101828);

    font-size:
        17px;

    font-weight:
        800;
}


.competition-center-score span {
    color:
        var(--muted, #667085);

    font-size:
        13px;

    font-weight:
        700;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.competition-center-empty {
    display: flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    min-height:
        220px;

    padding:
        30px;

    background:
        #ffffff;

    border:
        1px solid var(--line, #e1e7ef);

    border-radius:
        14px;

    text-align:
        center;

    box-sizing:
        border-box;
}


.competition-center-empty span {
    font-size:
        36px;
}


.competition-center-empty strong {
    color:
        var(--muted, #667085);

    font-size:
        14px;
}


/* =========================================================
   STANDINGS TABLE
   ========================================================= */

.competition-center-table-wrap {
    width:
        100%;

    overflow-x:
        auto;

    background:
        #ffffff;

    border:
        1px solid var(--line, #e1e7ef);

    border-radius:
        14px;

    box-sizing:
        border-box;

    scrollbar-width:
        thin;
}


.competition-center-table {
    width:
        100%;

    min-width:
        680px;

    border-collapse:
        collapse;

    color:
        var(--text, #101828);

    font-size:
        13px;
}


.competition-center-table th {
    padding:
        13px 12px;

    background:
        #f8fafc;

    border-bottom:
        1px solid var(--line, #e1e7ef);

    color:
        var(--muted, #667085);

    font-size:
        10px;

    font-weight:
        800;

    text-align:
        center;

    text-transform:
        uppercase;

    letter-spacing:
        .04em;

    white-space:
        nowrap;
}


.competition-center-table td {
    padding:
        13px 12px;

    border-bottom:
        1px solid #edf1f5;

    text-align:
        center;

    font-weight:
        600;

    white-space:
        nowrap;
}


.competition-center-table tbody tr:last-child td {
    border-bottom:
        0;
}


.competition-center-table tbody tr:hover {
    background:
        #f8fafc;
}


.competition-center-table-team {
    display: flex;

    align-items:
        center;

    min-width:
        180px;

    gap:
        10px;

    text-align:
        left;
}


.competition-center-table-team img {
    width:
        28px;

    height:
        28px;

    min-width:
        28px;

    object-fit:
        contain;
}


.competition-center-table-team span {
    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    font-weight:
        700;
}


/* =========================================================
   PLAYERS
   ========================================================= */

.competition-center-player-list {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(260px, 1fr)
        );

    gap:
        10px;
}


.competition-center-player {
    display: grid;

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

    align-items:
        center;

    gap:
        11px;

    min-height:
        72px;

    padding:
        11px 14px;

    background:
        #ffffff;

    border:
        1px solid var(--line, #e1e7ef);

    border-radius:
        12px;

    box-sizing:
        border-box;

    transition:
        border-color .18s ease,
        transform .18s ease;
}


.competition-center-player:hover {
    border-color:
        #cfd8e3;

    transform:
        translateY(-1px);
}


.competition-center-player-rank {
    display: flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        30px;

    height:
        30px;

    border-radius:
        50%;

    background:
        #f1f5f9;

    color:
        var(--text, #101828);

    font-size:
        12px;

    font-weight:
        800;
}


.competition-center-player-photo {
    width:
        46px;

    height:
        46px;

    border-radius:
        50%;

    object-fit:
        cover;

    background:
        #f1f5f9;

    border:
        1px solid var(--line, #e1e7ef);
}


.competition-center-player-info {
    min-width:
        0;
}


.competition-center-player-info strong {
    display:
        block;

    overflow:
        hidden;

    color:
        var(--text, #101828);

    font-size:
        13px;

    font-weight:
        800;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.competition-center-player-info span {
    display:
        block;

    margin-top:
        3px;

    overflow:
        hidden;

    color:
        var(--muted, #667085);

    font-size:
        11px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.competition-center-player-stat {
    display: flex;

    flex-direction:
        column;

    align-items:
        flex-end;

    gap:
        2px;

    color:
        var(--muted, #667085);

    font-size:
        10px;

    font-weight:
        700;

    white-space:
        nowrap;
}


.competition-center-player-stat strong {
    color:
        var(--text, #101828);

    font-size:
        18px;

    font-weight:
        800;
}


/* =========================================================
   DARK MODE
   ========================================================= */

html[data-theme="dark"] .competition-center-header,
html[data-theme="dark"] .competition-center-tabs,
html[data-theme="dark"] .competition-center-match,
html[data-theme="dark"] .competition-center-empty,
html[data-theme="dark"] .competition-center-table-wrap,
html[data-theme="dark"] .competition-center-player {
    background:
        #101923;

    border-color:
        #263443;
}


html[data-theme="dark"] .competition-center-back,
html[data-theme="dark"] .competition-center-logo,
html[data-theme="dark"] .competition-center-team img,
html[data-theme="dark"] .competition-center-team-placeholder,
html[data-theme="dark"] .competition-center-player-rank,
html[data-theme="dark"] .competition-center-player-photo {
    background:
        #172331;

    border-color:
        #2a3948;
}


html[data-theme="dark"] .competition-center-title h1,
html[data-theme="dark"] .competition-center-back,
html[data-theme="dark"] .competition-center-season select,
html[data-theme="dark"] .competition-center-tabs button:hover,
html[data-theme="dark"] .competition-center-team span:last-child,
html[data-theme="dark"] .competition-center-score strong,
html[data-theme="dark"] .competition-center-table,
html[data-theme="dark"] .competition-center-player-info strong,
html[data-theme="dark"] .competition-center-player-stat strong {
    color:
        #f8fafc;
}


html[data-theme="dark"] .competition-center-title p,
html[data-theme="dark"] .competition-center-season span,
html[data-theme="dark"] .competition-center-tabs button,
html[data-theme="dark"] .competition-center-match-meta span,
html[data-theme="dark"] .competition-center-empty strong,
html[data-theme="dark"] .competition-center-player-info span,
html[data-theme="dark"] .competition-center-player-stat {
    color:
        #98a6b5;
}


html[data-theme="dark"] .competition-center-season select {
    background:
        #172331;

    border-color:
        #2a3948;
}


html[data-theme="dark"] .competition-center-tabs button:hover {
    background:
        #172331;
}


html[data-theme="dark"] .competition-center-tabs button.is-active,
html[data-theme="dark"] .competition-center-tabs button.active,
html[data-theme="dark"] .competition-center-tabs button[aria-selected="true"] {
    background:
        #f8fafc;

    color:
        #101923;
}


html[data-theme="dark"] .competition-center-match:hover,
html[data-theme="dark"] .competition-center-table tbody tr:hover {
    background:
        #172331;
}


html[data-theme="dark"] .competition-center-table th {
    background:
        #172331;

    border-color:
        #2a3948;

    color:
        #98a6b5;
}


html[data-theme="dark"] .competition-center-table td {
    border-color:
        #22303e;
}


html[data-theme="dark"] .competition-center-back:hover {
    background:
        #1c2a38;

    border-color:
        #3a4a5b;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .competition-center-header {
        grid-template-columns:
            auto
            minmax(0, 1fr);

        gap:
            14px;
    }


    .competition-center-season {
        grid-column:
            1 / -1;

        flex-direction:
            row;

        align-items:
            center;

        justify-content:
            flex-end;
    }


    .competition-center-season select {
        width:
            120px;
    }


    .competition-center-match {
        grid-template-columns:
            90px
            minmax(0, 1fr)
            auto;

        gap:
            12px;
    }


    .competition-center-match > .competition-center-team:last-child {
        grid-column:
            2;
    }


    .competition-center-score {
        grid-column:
            3;

        grid-row:
            1 / span 2;
    }

}


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

@media (max-width: 600px) {

    .competition-center-header {
        grid-template-columns:
            1fr;

        gap:
            12px;

        padding:
            14px;
    }


    .competition-center-back {
        width:
            max-content;
    }


    .competition-center-brand {
        gap:
            10px;
    }


    .competition-center-logo {
        width:
            48px;

        height:
            48px;

        min-width:
            48px;

        border-radius:
            11px;
    }


    .competition-center-logo img {
        width:
            38px;

        height:
            38px;
    }


    .competition-center-title h1 {
        font-size:
            17px;
    }


    .competition-center-title p {
        font-size:
            11px;
    }


    .competition-center-season {
        grid-column:
            auto;

        width:
            100%;

        justify-content:
            space-between;
    }


    .competition-center-season select {
        width:
            130px;
    }


    .competition-center-tabs {
        gap:
            4px;

        padding:
            5px;

        border-radius:
            10px;
    }


    .competition-center-tabs button {
        flex:
            0 0 auto;

        min-height:
            34px;

        padding:
            0 13px;

        font-size:
            11px;
    }


    .competition-center-match-list {
        gap:
            6px;
    }


    .competition-center-match {
        grid-template-columns:
            52px
            minmax(0, 1fr)
            auto;

        gap:
            8px;

        min-height:
            66px;

        padding:
            9px 10px;

        border-radius:
            10px;
    }


    .competition-center-match-meta span {
        font-size:
            9px;
    }


    .competition-center-match-meta time {
        font-size:
            9px;
    }


    .competition-center-team {
        gap:
            7px;
    }


    .competition-center-team img,
    .competition-center-team-placeholder {
        width:
            25px;

        height:
            25px;

        min-width:
            25px;
    }


    .competition-center-team span:last-child {
        font-size:
            11px;
    }


    .competition-center-score {
        min-width:
            48px;

        gap:
            4px;
    }


    .competition-center-score strong {
        font-size:
            14px;
    }


    .competition-center-score span {
        font-size:
            10px;
    }


    .competition-center-player-list {
        grid-template-columns:
            1fr;

        gap:
            7px;
    }


    .competition-center-player {
        grid-template-columns:
            29px
            40px
            minmax(0, 1fr)
            auto;

        gap:
            8px;

        min-height:
            64px;

        padding:
            9px 10px;

        border-radius:
            10px;
    }


    .competition-center-player-rank {
        width:
            26px;

        height:
            26px;

        font-size:
            10px;
    }


    .competition-center-player-photo {
        width:
            38px;

        height:
            38px;
    }


    .competition-center-player-info strong {
        font-size:
            11px;
    }


    .competition-center-player-info span {
        font-size:
            9px;
    }


    .competition-center-player-stat strong {
        font-size:
            15px;
    }


    .competition-center-empty {
        min-height:
            180px;

        padding:
            20px;
    }

}


/* =========================================================
   VERY SMALL PHONE
   ========================================================= */

@media (max-width: 380px) {

    .competition-center-header {
        padding:
            11px;
    }


    .competition-center-logo {
        width:
            42px;

        height:
            42px;

        min-width:
            42px;
    }


    .competition-center-title h1 {
        font-size:
            15px;
    }


    .competition-center-tabs button {
        padding:
            0 11px;

        font-size:
            10px;
    }


    .competition-center-match {
        grid-template-columns:
            45px
            minmax(0, 1fr)
            auto;

        gap:
            6px;

        padding:
            8px;
    }


    .competition-center-team img,
    .competition-center-team-placeholder {
        width:
            22px;

        height:
            22px;

        min-width:
            22px;
    }


    .competition-center-team span:last-child {
        font-size:
            10px;
    }


    .competition-center-score strong {
        font-size:
            12px;
    }


    .competition-center-player {
        grid-template-columns:
            25px
            34px
            minmax(0, 1fr)
            auto;

        gap:
            6px;

        padding:
            8px;
    }


    .competition-center-player-photo {
        width:
            33px;

        height:
            33px;
    }

}


/* =========================================================
   SAFETY — NO HORIZONTAL OVERFLOW
   ========================================================= */

.competition-center,
.competition-center-header,
.competition-center-brand,
.competition-center-content,
.competition-center-match-list,
.competition-center-match,
.competition-center-player-list,
.competition-center-player {
    max-width:
        100%;

    min-width:
        0;

    box-sizing:
        border-box;
}


/* =========================================================
   END COMPETITION CENTER — PROFESSIONAL UI V1
   ========================================================= */



/* =========================================================
   FIX — LIVESCORE LEAGUE VERTICAL GAP
   Disable content-visibility karena bentrok dengan
   chunked render dan menyebabkan ruang kosong besar.
   ========================================================= */

.livescore-league {
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
}




/* =====================================================
   FIX JARAK TANGGAL DENGAN LIST PERTANDINGAN
   ===================================================== */

.matches-area {
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.matches-area .livescore-league {
    margin-top: 8px !important;
    margin-bottom: 12px !important;
    min-height: 0 !important;
}

.matches-area .livescore-league:first-child {
    margin-top: 6px !important;
}



/* MATCH SPACING FIX FINAL START */

/* ==========================================
   FIX UTAMA:
   HILANGKAN RUANG KOSONG BESAR
   ANTARA BAGAN TANGGAL DAN PERTANDINGAN
========================================== */

/* Container pertandingan */

.matches-area {
    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    margin-top: 0 !important;
    padding-top: 0 !important;

    display: block !important;

    align-self: flex-start !important;

    flex: none !important;
}


/* Semua wrapper livescore utama */

.livescore-content,
.livescore-main,
.livescore-center,
.livescore-center-column,
.livescore-container,
.livescore-wrapper,
.matches-wrapper,
.matches-container,
.match-list,
.match-list-wrapper {

    height: auto !important;

    min-height: 0 !important;

    margin-top: 0 !important;

    padding-top: 0 !important;

    justify-content: flex-start !important;

    align-content: flex-start !important;

}


/* Jika container menggunakan flex */

.livescore-content,
.livescore-main,
.livescore-center,
.livescore-center-column,
.livescore-container,
.livescore-wrapper,
.matches-wrapper,
.matches-container {

    gap: 0 !important;

}


/* Bagan tanggal */

.date-navigation,
.date-nav,
.livescore-date-nav,
.fixture-date-navigation,
.fixture-date-nav,
.livescore-filter,
.livescore-filters {

    margin-bottom: 8px !important;

    padding-bottom: 0 !important;

}


/* List pertandingan langsung setelah tanggal */

.matches-area {

    margin-bottom: 16px !important;

}


/* Liga pertama */

.matches-area .livescore-league:first-child {

    margin-top: 0 !important;

}


/* Semua liga */

.matches-area .livescore-league {

    min-height: 0 !important;

    margin-top: 8px !important;

    margin-bottom: 12px !important;

}


/* Header tanggal */

.matches-area .livescore-date,
.matches-area .date-header,
.matches-area .match-date-header {

    margin-top: 0 !important;

    margin-bottom: 6px !important;

}


/* Anti ruang kosong dari flex */

.matches-area,
.matches-area > *,
.matches-area .livescore-league {

    flex-grow: 0 !important;

    flex-shrink: 0 !important;

}


/* FIX KHUSUS DESKTOP */

@media screen and (min-width: 769px) {

    .matches-area {

        position: relative !important;

        top: 0 !important;

        transform: none !important;

    }

}


/* MATCH SPACING FIX FINAL END */


/* FOOTBALLHUB FINAL MATCH OVERRIDE START */

/* =========================================================
   LIGHT MODE — MATCH RESULT BACKGROUND WHITE
   ========================================================= */

html:not([data-theme="dark"]) .matches-area .match-card,
html:not([data-theme="dark"]) .league-matches .match-card {

    background: #ffffff !important;
    color: #101828 !important;

    border-left: 1px solid #d8e2ec !important;
    border-right: 1px solid #d8e2ec !important;
    border-bottom: 1px solid #d8e2ec !important;

    box-shadow: none !important;
}

html:not([data-theme="dark"]) .matches-area .match-card:hover,
html:not([data-theme="dark"]) .league-matches .match-card:hover {

    background: #f8fbfe !important;
}


/* =========================================================
   LIGHT MODE — LIVE TIME
   ========================================================= */

html:not([data-theme="dark"]) .match-card.is-live .match-time,
html:not([data-theme="dark"]) .match-card.live .match-time,
html:not([data-theme="dark"]) .match-card[data-live="true"] .match-time {

    background: #e6f2fc !important;
    border: 1px solid #7db8dd !important;

    color: #1268a9 !important;

    border-radius: 999px !important;
    padding: 3px 7px !important;

    font-weight: 900 !important;
}


/* =========================================================
   DARK MODE — MATCH CARD
   ========================================================= */

html[data-theme="dark"] .matches-area .match-card,
html[data-theme="dark"] .league-matches .match-card {

    background: #0a1727 !important;
    color: #ffffff !important;

    border-left: 1px solid #253d57 !important;
    border-right: 1px solid #253d57 !important;
    border-bottom: 1px solid #253d57 !important;

    box-shadow: none !important;
}


/* =========================================================
   DARK MODE — LIVE TIME
   ========================================================= */

html[data-theme="dark"] .match-card.is-live .match-time,
html[data-theme="dark"] .match-card.live .match-time,
html[data-theme="dark"] .match-card[data-live="true"] .match-time {

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    min-height: 20px !important;

    padding: 3px 7px !important;

    background:
        linear-gradient(
            145deg,
            #183653 0%,
            #0d2137 100%
        ) !important;

    border: 1px solid #3a6487 !important;

    color: #ffffff !important;

    border-radius: 999px !important;

    font-size: 10px !important;
    font-weight: 900 !important;

    white-space: nowrap !important;
}


/* =========================================================
   DARK MODE — STATUS
   ========================================================= */

html[data-theme="dark"] .match-status {

    background:
        linear-gradient(
            145deg,
            #183653 0%,
            #0d2137 100%
        ) !important;

    border: 1px solid #3a6487 !important;

    color: #ffffff !important;

    border-radius: 999px !important;

    font-weight: 900 !important;
}


/* =========================================================
   LIVE CARD
   ========================================================= */

html[data-theme="dark"] .match-card.is-live,
html[data-theme="dark"] .match-card.live,
html[data-theme="dark"] .match-card[data-live="true"] {

    border-color: #3a6487 !important;
    box-shadow: none !important;
}

html:not([data-theme="dark"]) .match-card.is-live,
html:not([data-theme="dark"]) .match-card.live,
html:not([data-theme="dark"]) .match-card[data-live="true"] {

    border-color: #7db8dd !important;
    box-shadow: none !important;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 1201px) {

    .match-card {

        grid-template-columns:
            minmax(0, 1fr)
            72px
            minmax(0, 1fr) !important;

        min-height: 76px !important;

        padding: 12px 20px !important;
    }
}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (min-width: 901px) and (max-width: 1200px) {

    .match-card {

        grid-template-columns:
            minmax(0, 1fr)
            68px
            minmax(0, 1fr) !important;

        min-height: 72px !important;

        padding: 11px 14px !important;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 769px) and (max-width: 900px) {

    .match-card {

        grid-template-columns:
            minmax(0, 1fr)
            62px
            minmax(0, 1fr) !important;

        min-height: 68px !important;

        padding: 10px 12px !important;
    }
}


/* =========================================================
   LARGE PHONE
   ========================================================= */

@media (min-width: 601px) and (max-width: 768px) {

    .match-card {

        grid-template-columns:
            minmax(0, 1fr)
            58px
            minmax(0, 1fr) !important;

        min-height: 66px !important;

        padding: 9px 10px !important;
    }
}


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

@media (max-width: 600px) {

    .dashboard {

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
    }

    .match-card {

        grid-template-columns:
            minmax(0, 1fr)
            52px
            minmax(0, 1fr) !important;

        min-height: 62px !important;

        padding: 8px !important;

        gap: 6px !important;
    }

    .match-time,
    .match-status {

        font-size: 9px !important;

        padding: 3px 5px !important;
    }
}


/* =========================================================
   SMALL PHONE
   ========================================================= */

@media (max-width: 420px) {

    .match-card {

        grid-template-columns:
            minmax(0, 1fr)
            48px
            minmax(0, 1fr) !important;

        min-height: 59px !important;

        padding: 7px 6px !important;

        gap: 4px !important;
    }

    .match-time,
    .match-status {

        font-size: 8px !important;
    }
}


/* =========================================================
   EXTREMELY SMALL PHONE
   ========================================================= */

@media (max-width: 360px) {

    .match-card {

        grid-template-columns:
            minmax(0, 1fr)
            44px
            minmax(0, 1fr) !important;

        min-height: 56px !important;

        padding: 6px 5px !important;
    }
}


/* =========================================================
   FINAL OVERFLOW PROTECTION
   ========================================================= */

.dashboard,
.main-content,
.center-content,
.matches-area,
.league-header,
.league-matches,
.match-card {

    width: 100%;
    max-width: 100%;
    min-width: 0;

    box-sizing: border-box;
}

/* FOOTBALLHUB FINAL MATCH OVERRIDE END */


/* FOOTBALLHUB GOAL STYLE START */


/* =========================================================
   HIDE FAVORITES SECTION
   LANGSUNG KE LIST PERTANDINGAN
   ========================================================= */

.favorites,
.favourites,
.favorite-section,
.favourite-section,
.favorites-section,
.favourites-section,
.matches-favorites,
.match-favorites,
.favourite-matches,
.favorite-matches,
#favorites,
#favourites,
#favorites-section,
#favourites-section {

    display: none !important;
}


/* =========================================================
   REMOVE FAVORITE TITLE / EMPTY FAVORITES
   ========================================================= */

.favorites-title,
.favourites-title,
.favorite-title,
.favourite-title,
.favorites-empty,
.favourites-empty,
.favorite-empty,
.favourite-empty {

    display: none !important;
}


/* =========================================================
   MATCHES AREA
   CLEAN GOAL STYLE
   ========================================================= */

.matches-area {

    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    display: flex !important;

    flex-direction: column !important;

    gap: 22px !important;

    background: transparent !important;

    box-sizing: border-box !important;
}


/* =========================================================
   LEAGUE CONTAINER
   ========================================================= */

.league-section,
.competition-section,
.matches-league,
.league-group {

    width: 100% !important;

    min-width: 0 !important;

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

    overflow: visible !important;
}


/* =========================================================
   LEAGUE HEADER
   GOAL STYLE
   ========================================================= */

.league-header {

    width: 100% !important;

    min-width: 0 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: flex-start !important;

    gap: 11px !important;

    padding: 0 0 12px 0 !important;

    margin: 0 !important;

    background: transparent !important;

    border: none !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    box-sizing: border-box !important;
}


/* =========================================================
   LEAGUE LOGO
   ========================================================= */

.league-header img,
.league-logo,
.league-icon,
.competition-logo {

    width: 40px !important;

    height: 40px !important;

    min-width: 40px !important;

    flex: 0 0 40px !important;

    object-fit: contain !important;

    display: block !important;

    border-radius: 4px !important;
}


/* =========================================================
   LEAGUE INFO
   ========================================================= */

.league-info {

    min-width: 0 !important;

    flex: 1 1 auto !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;

    justify-content: center !important;

    gap: 2px !important;
}


/* =========================================================
   LEAGUE NAME
   ========================================================= */

.league-name {

    min-width: 0 !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;

    gap: 2px !important;
}


.league-name strong {

    display: block !important;

    width: 100% !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: nowrap !important;

    font-size: 20px !important;

    line-height: 1.15 !important;

    font-weight: 850 !important;
}


.league-name small {

    display: block !important;

    font-size: 12px !important;

    line-height: 1.3 !important;

    font-weight: 650 !important;
}


/* =========================================================
   HIDE LEAGUE ACTIONS
   CLEAN LOOK
   ========================================================= */

.league-actions {

    display: none !important;
}


/* =========================================================
   LEAGUE MATCHES
   ========================================================= */

.league-matches {

    width: 100% !important;

    min-width: 0 !important;

    overflow: hidden !important;

    border-radius: 9px !important;

    box-sizing: border-box !important;
}


/* =========================================================
   MATCH CARD
   GOAL.COM ROW STYLE
   ========================================================= */

.match-card {

    position: relative !important;

    width: 100% !important;

    min-width: 0 !important;

    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        78px
        minmax(0, 1fr) !important;

    align-items: center !important;

    gap: 10px !important;

    min-height: 61px !important;

    padding: 10px 16px !important;

    margin: 0 !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    box-sizing: border-box !important;

    overflow: hidden !important;

    transform: none !important;
}


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

.match-card:hover {

    transform: none !important;

    box-shadow: none !important;
}


/* =========================================================
   HOME TEAM
   ========================================================= */

.match-home {

    min-width: 0 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: flex-end !important;

    gap: 10px !important;

    text-align: right !important;

    overflow: hidden !important;
}


/* =========================================================
   AWAY TEAM
   ========================================================= */

.match-away {

    min-width: 0 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: flex-start !important;

    gap: 10px !important;

    text-align: left !important;

    overflow: hidden !important;
}


/* =========================================================
   TEAM LOGO
   ========================================================= */

.match-home img,
.match-away img {

    width: 31px !important;

    height: 31px !important;

    min-width: 31px !important;

    flex: 0 0 31px !important;

    object-fit: contain !important;

    display: block !important;
}


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

.match-home .team-name,
.match-away .team-name,
.match-home-name,
.match-away-name,
.home-team,
.away-team {

    min-width: 0 !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: nowrap !important;

    font-size: 14px !important;

    line-height: 1.3 !important;

    font-weight: 750 !important;
}


/* =========================================================
   SCORE CENTER
   ========================================================= */

.match-score {

    min-width: 0 !important;

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 6px !important;

    text-align: center !important;
}


/* =========================================================
   SCORE
   ========================================================= */

.match-score .score,
.match-score strong {

    font-size: 17px !important;

    line-height: 1 !important;

    font-weight: 850 !important;

    letter-spacing: 0 !important;
}


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

.match-time {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    min-width: 46px !important;

    min-height: 25px !important;

    padding: 4px 7px !important;

    border-radius: 5px !important;

    font-size: 13px !important;

    line-height: 1 !important;

    font-weight: 850 !important;

    white-space: nowrap !important;
}


/* =========================================================
   MATCH STATUS
   ========================================================= */

.match-status {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    min-width: 34px !important;

    min-height: 25px !important;

    padding: 4px 7px !important;

    border-radius: 4px !important;

    font-size: 11px !important;

    line-height: 1 !important;

    font-weight: 850 !important;

    white-space: nowrap !important;
}


/* =========================================================
   MATCH META
   ========================================================= */

.match-meta,
.match-info {

    font-size: 11px !important;

    font-weight: 650 !important;
}


/* =========================================================
   GAME WEEK / ROUND HEADER
   ========================================================= */

.match-round,
.round-header,
.game-week,
.matchweek,
.league-round {

    width: 100% !important;

    min-height: 45px !important;

    display: flex !important;

    align-items: center !important;

    padding: 10px 15px !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    font-size: 15px !important;

    font-weight: 700 !important;
}


/* =========================================================
   LIGHT MODE
   ========================================================= */

html:not([data-theme="dark"]) .league-name strong {

    color: #101828 !important;
}


html:not([data-theme="dark"]) .league-name small {

    color: #667085 !important;
}


html:not([data-theme="dark"]) .league-matches {

    background: #ffffff !important;

    border: 1px solid #e2e5e9 !important;
}


html:not([data-theme="dark"]) .match-card {

    background: #ffffff !important;

    color: #101828 !important;

    border: none !important;

    border-bottom: 1px solid #e2e5e9 !important;
}


html:not([data-theme="dark"]) .match-card:last-child {

    border-bottom: none !important;
}


html:not([data-theme="dark"]) .match-card:hover {

    background: #fafafa !important;
}


html:not([data-theme="dark"]) .match-time {

    background: transparent !important;

    border: none !important;

    color: #344054 !important;
}


html:not([data-theme="dark"]) .match-status {

    background: #f2f4f7 !important;

    border: none !important;

    color: #667085 !important;
}


/* =========================================================
   DARK MODE
   ========================================================= */

html[data-theme="dark"] .league-name strong {

    color: #ffffff !important;
}


html[data-theme="dark"] .league-name small {

    color: #aab8c7 !important;
}


html[data-theme="dark"] .league-matches {

    background: #202a35 !important;

    border: 1px solid #2d3946 !important;
}


html[data-theme="dark"] .match-card {

    background: #202a35 !important;

    color: #f5f7fa !important;

    border: none !important;

    border-bottom: 1px solid #3a4652 !important;

    box-shadow: none !important;
}


html[data-theme="dark"] .match-card:last-child {

    border-bottom: none !important;
}


html[data-theme="dark"] .match-card:hover {

    background: #25313d !important;
}


html[data-theme="dark"] .match-time {

    background: transparent !important;

    border: none !important;

    color: #f5f7fa !important;
}


html[data-theme="dark"] .match-status {

    background: #344150 !important;

    border: none !important;

    color: #dce5ee !important;
}


/* =========================================================
   LIVE MATCH
   SIMPLE STYLE
   ========================================================= */

.match-card.is-live .match-time,
.match-card.live .match-time,
.match-card[data-live="true"] .match-time {

    background: #ff5b4d !important;

    border: none !important;

    color: #ffffff !important;

    border-radius: 5px !important;

    font-weight: 900 !important;
}


/* =========================================================
   FINISHED MATCH
   ========================================================= */

.match-card.is-finished .match-status,
.match-card.finished .match-status {

    background: transparent !important;

    color: #98a2b3 !important;

    border: none !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .league-name strong {

        font-size: 18px !important;
    }

    .match-card {

        grid-template-columns:
            minmax(0, 1fr)
            68px
            minmax(0, 1fr) !important;

        padding: 10px 12px !important;
    }

}


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

@media (max-width: 600px) {

    .matches-area {

        gap: 18px !important;
    }

    .league-header {

        gap: 9px !important;

        padding-bottom: 10px !important;
    }

    .league-header img,
    .league-logo,
    .league-icon,
    .competition-logo {

        width: 34px !important;

        height: 34px !important;

        min-width: 34px !important;

        flex-basis: 34px !important;
    }

    .league-name strong {

        font-size: 16px !important;
    }

    .league-name small {

        font-size: 11px !important;
    }

    .match-card {

        grid-template-columns:
            minmax(0, 1fr)
            58px
            minmax(0, 1fr) !important;

        min-height: 56px !important;

        padding: 8px 9px !important;

        gap: 5px !important;
    }

    .match-home,
    .match-away {

        gap: 6px !important;
    }

    .match-home img,
    .match-away img {

        width: 25px !important;

        height: 25px !important;

        min-width: 25px !important;

        flex-basis: 25px !important;
    }

    .match-home .team-name,
    .match-away .team-name,
    .home-team,
    .away-team {

        font-size: 11px !important;
    }

    .match-time {

        min-width: 42px !important;

        font-size: 11px !important;

        padding: 4px 4px !important;
    }

    .match-status {

        min-width: 30px !important;

        font-size: 9px !important;

        padding: 4px !important;
    }

}


/* =========================================================
   VERY SMALL PHONE
   ========================================================= */

@media (max-width: 420px) {

    .match-card {

        grid-template-columns:
            minmax(0, 1fr)
            52px
            minmax(0, 1fr) !important;

        padding: 7px 6px !important;

        gap: 3px !important;
    }

    .match-home img,
    .match-away img {

        width: 22px !important;

        height: 22px !important;

        min-width: 22px !important;

        flex-basis: 22px !important;
    }

    .match-home .team-name,
    .match-away .team-name,
    .home-team,
    .away-team {

        font-size: 10px !important;
    }

}


/* =========================================================
   FOOTBALLHUB GOAL STYLE END
   ========================================================= */


/* FOOTBALLHUB COMPACT MATCH LIST START */

/* =========================================================
   COMPACT LAYOUT
   TANGGAL LANGSUNG DEKAT LIST PERTANDINGAN
   ========================================================= */

/* Hilangkan ruang kosong besar pada area pertandingan */

.matches-area {

    min-height: 0 !important;

    height: auto !important;

    padding-top: 8px !important;

    margin-top: 0 !important;

    align-content: start !important;

    justify-content: flex-start !important;
}


/* Content pertandingan langsung mulai dari atas */

.matches-area > * {

    min-height: 0 !important;

    height: auto !important;

    margin-top: 0 !important;
}


/* Jarak antar kalender dan pertandingan */

.matches-toolbar,
.match-controls,
.competition-filter {

    margin-bottom: 8px !important;
}


/* Jika kalender menggunakan container sendiri */

.date-navigation,
.date-selector,
.match-date-nav,
.calendar-navigation,
.matches-date-nav {

    margin-bottom: 8px !important;
}


/* League pertama langsung naik */

.matches-area .league-header:first-child,
.matches-area > :first-child {

    margin-top: 0 !important;
}


/* Wrapper kompetisi */

.league-section,
.competition-section,
.competition-group,
.match-group {

    margin-top: 0 !important;

    padding-top: 0 !important;

    min-height: 0 !important;
}


/* League header */

.league-header {

    margin-top: 0 !important;
}


/* Matches langsung mengikuti header league */

.league-matches {

    margin-top: 0 !important;

    padding-top: 0 !important;

    min-height: 0 !important;
}


/* Hilangkan spacer kosong */

.matches-spacer,
.match-spacer,
.fixtures-spacer,
.content-spacer,
.empty-spacer {

    display: none !important;
}


/* =========================================================
   MAIN CONTENT COMPACT
   ========================================================= */

.main-content,
.center-content {

    align-content: start !important;
}


.main-content > *,
.center-content > * {

    min-height: 0 !important;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 769px) {

    .matches-area {

        padding-top: 6px !important;
    }

    .matches-toolbar,
    .match-controls,
    .competition-filter {

        margin-bottom: 6px !important;
    }
}


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

@media (max-width: 768px) {

    .matches-area {

        padding-top: 6px !important;
    }

    .matches-toolbar,
    .match-controls,
    .competition-filter {

        margin-bottom: 6px !important;
    }
}


/* FOOTBALLHUB COMPACT MATCH LIST END */


/* FOOTBALLHUB DATE 7 DAYS FIX START */


/* =========================================================
   DATE AREA - COMPACT
   ========================================================= */

.date-navigation,
.date-nav,
.date-tabs,
.date-selector,
.match-date-nav,
.matches-date-nav,
.fixture-date-nav,
.date-filter {

    width: 100% !important;

    min-height: auto !important;

    height: auto !important;

    margin-bottom: 8px !important;

    padding-bottom: 0 !important;

    display: grid !important;

    grid-template-columns:
        repeat(7, minmax(0, 1fr)) !important;

    gap: 0 !important;

    align-items: stretch !important;

    overflow: hidden !important;
}


/* =========================================================
   DATE BUTTON
   ========================================================= */

.date-navigation button,
.date-nav button,
.date-tabs button,
.date-selector button,
.match-date-nav button,
.matches-date-nav button,
.fixture-date-nav button,
.date-filter button,
.date-item,
.date-tab,
.date-button {

    width: 100% !important;

    min-width: 0 !important;

    max-width: none !important;

    height: 80px !important;

    margin: 0 !important;

    border-radius: 0 !important;

    box-sizing: border-box !important;

    flex: none !important;
}


/* =========================================================
   FIRST / LAST DATE BORDER
   ========================================================= */

.date-navigation > :first-child,
.date-nav > :first-child,
.date-tabs > :first-child,
.date-selector > :first-child,
.match-date-nav > :first-child,
.matches-date-nav > :first-child,
.fixture-date-nav > :first-child {

    border-radius: 12px 0 0 12px !important;
}


.date-navigation > :last-child,
.date-nav > :last-child,
.date-tabs > :last-child,
.date-selector > :last-child,
.match-date-nav > :last-child,
.matches-date-nav > :last-child,
.fixture-date-nav > :last-child {

    border-radius: 0 12px 12px 0 !important;
}


/* =========================================================
   HIDE EXTRA CALENDAR BUTTON
   AGAR 7 HARI PENUH
   ========================================================= */

.date-calendar,
.calendar-button,
.open-calendar,
.date-picker-button,
.date-nav-calendar,
.match-calendar-button {

    display: none !important;
}


/* =========================================================
   REMOVE BIG EMPTY SPACE
   ========================================================= */

.matches-area {

    display: block !important;

    min-height: 0 !important;

    height: auto !important;

    margin-top: 0 !important;

    padding-top: 0 !important;
}


.main-content,
.center-content {

    min-height: 0 !important;

    height: auto !important;
}


/* =========================================================
   DATE TOOLBAR
   ========================================================= */

.matches-toolbar,
.match-controls,
.competition-filter,
.match-toolbar,
.matches-header {

    margin-bottom: 8px !important;

    padding-bottom: 0 !important;

    min-height: auto !important;
}


/* =========================================================
   MATCH LIST MUST START IMMEDIATELY
   ========================================================= */

.league-matches,
.match-list,
.matches-list,
.fixtures-list,
.competitions-list {

    margin-top: 0 !important;

    padding-top: 0 !important;

    min-height: 0 !important;
}


/* =========================================================
   FIRST LEAGUE AFTER DATE
   ========================================================= */

.matches-area > .league,
.matches-area > .competition,
.matches-area > .league-section,
.matches-area > .competition-section,
.matches-area > .league-container,
.matches-area > .match-list,
.matches-area > .fixtures-list {

    margin-top: 8px !important;
}


/* =========================================================
   REMOVE EMPTY FLEX SPACE
   ========================================================= */

.matches-area > * {

    flex-grow: 0 !important;

    min-height: 0 !important;
}


/* =========================================================
   DATE CONTAINER HEIGHT
   ========================================================= */

.date-navigation,
.date-nav,
.date-tabs,
.date-selector,
.match-date-nav,
.matches-date-nav,
.fixture-date-nav {

    min-height: 80px !important;

    margin-bottom: 8px !important;
}


/* =========================================================
   MOBILE DATE 7 DAYS
   ========================================================= */

@media (max-width: 768px) {

    .date-navigation,
    .date-nav,
    .date-tabs,
    .date-selector,
    .match-date-nav,
    .matches-date-nav,
    .fixture-date-nav,
    .date-filter {

        grid-template-columns:
            repeat(7, minmax(0, 1fr)) !important;

        width: 100% !important;
    }


    .date-navigation button,
    .date-nav button,
    .date-tabs button,
    .date-selector button,
    .match-date-nav button,
    .matches-date-nav button,
    .fixture-date-nav button,
    .date-filter button,
    .date-item,
    .date-tab,
    .date-button {

        height: 64px !important;

        font-size: 9px !important;

        padding: 4px 2px !important;
    }

}


/* =========================================================
   FINAL MATCH POSITION
   ========================================================= */

.matches-area {

    position: relative !important;
}


.date-navigation + *,
.date-nav + *,
.date-tabs + *,
.date-selector + *,
.match-date-nav + *,
.matches-date-nav + *,
.fixture-date-nav + * {

    margin-top: 8px !important;
}


/* FOOTBALLHUB DATE 7 DAYS FIX END */



/* =========================================================
   FOOTBALLHUB FINAL LIVESCORE REAL SPACING FIX
   TARGET: ACTUAL JAVASCRIPT RENDER STRUCTURE
   ========================================================= */

@media screen and (min-width: 901px) {

    /* Area utama pertandingan */

    .matches-area {
        display: block !important;

        margin-top: 0 !important;
        padding-top: 0 !important;

        min-height: 0 !important;
        height: auto !important;

        align-self: start !important;
    }


    /* League pertama */

    .matches-area > .livescore-league:first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }


    /* Semua league */

    .matches-area > .livescore-league {
        margin-top: 8px !important;
        padding-top: 0 !important;

        min-height: 0 !important;
        height: auto !important;

        position: static !important;
        transform: none !important;
    }


    /* League pertama harus benar-benar menempel ke atas */

    .matches-area > .livescore-league:first-child {
        margin-top: 0 !important;
    }


    /* Header liga */

    .matches-area .livescore-league-header {
        margin-top: 0 !important;
    }


    /* List pertandingan */

    .matches-area .livescore-match-list {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }


    /* Toolbar sebelum pertandingan */

    .livescore-toolbar {
        margin-bottom: 8px !important;
        padding-bottom: 0 !important;
    }

}


/* =========================================================
   END FOOTBALLHUB FINAL LIVESCORE REAL SPACING FIX
   ========================================================= */



/* =========================================================
   FOOTBALLHUB REAL LIVESCORE MATCH FINAL OVERRIDE START
   TARGET: ACTUAL livescore.js STRUCTURE
   ========================================================= */


/* =========================================================
   LIGHT MODE — MATCH CARD
   ========================================================= */

html:not([data-theme="dark"])
.matches-area
.livescore-match-card {

    background: #ffffff !important;

    border-left: 1px solid #d8e2ec !important;
    border-right: 1px solid #d8e2ec !important;
    border-bottom: 1px solid #d8e2ec !important;

    box-shadow: none !important;
}


/* LIGHT MODE — MATCH HOVER */

html:not([data-theme="dark"])
.matches-area
.livescore-match-card:hover {

    background: #f8fbfe !important;
}


/* =========================================================
   LIGHT MODE — TEXT
   ========================================================= */

html:not([data-theme="dark"])
.matches-area
.livescore-match-card
.match-team-name {

    color: #101828 !important;
}


html:not([data-theme="dark"])
.matches-area
.livescore-match-card
.match-score {

    color: #101828 !important;
}


/* =========================================================
   LIGHT MODE — MATCH STATUS
   DEFAULT / UPCOMING
   ========================================================= */

html:not([data-theme="dark"])
.matches-area
.match-status {

    background: #f3f6f9 !important;

    border: 1px solid #d8e2ec !important;

    color: #475467 !important;

    border-radius: 999px !important;

    padding: 3px 7px !important;

    font-weight: 800 !important;

    line-height: 1 !important;
}


/* =========================================================
   LIGHT MODE — LIVE
   ========================================================= */

html:not([data-theme="dark"])
.matches-area
.match-status.live {

    background: #e6f2fc !important;

    border: 1px solid #7db8dd !important;

    color: #1268a9 !important;
}


/* =========================================================
   LIGHT MODE — FINISHED / FT
   ========================================================= */

html:not([data-theme="dark"])
.matches-area
.match-status.finished {

    background: #f3f6f9 !important;

    border: 1px solid #d8e2ec !important;

    color: #475467 !important;
}


/* =========================================================
   DARK MODE — MATCH CARD
   ========================================================= */

html[data-theme="dark"]
.matches-area
.livescore-match-card {

    background: #0a1727 !important;

    border-left: 1px solid #253d57 !important;
    border-right: 1px solid #253d57 !important;
    border-bottom: 1px solid #253d57 !important;

    box-shadow: none !important;
}


/* DARK MODE — MATCH HOVER */

html[data-theme="dark"]
.matches-area
.livescore-match-card:hover {

    background: #0d1d30 !important;
}


/* =========================================================
   DARK MODE — TEXT
   ========================================================= */

html[data-theme="dark"]
.matches-area
.livescore-match-card
.match-team-name {

    color: #ffffff !important;
}


html[data-theme="dark"]
.matches-area
.livescore-match-card
.match-score {

    color: #ffffff !important;
}


/* =========================================================
   DARK MODE — MATCH STATUS
   DEFAULT / UPCOMING
   ========================================================= */

html[data-theme="dark"]
.matches-area
.match-status {

    background: #10243a !important;

    border: 1px solid #2a4661 !important;

    color: #c7d4e0 !important;

    border-radius: 999px !important;

    padding: 3px 7px !important;

    font-weight: 800 !important;

    line-height: 1 !important;
}


/* =========================================================
   DARK MODE — LIVE
   ========================================================= */

html[data-theme="dark"]
.matches-area
.match-status.live {

    background: #123454 !important;

    border: 1px solid #2f6f9f !important;

    color: #7fc8ff !important;
}


/* =========================================================
   DARK MODE — FINISHED / FT
   ========================================================= */

html[data-theme="dark"]
.matches-area
.match-status.finished {

    background: #10243a !important;

    border: 1px solid #2a4661 !important;

    color: #c7d4e0 !important;
}


/* =========================================================
   STATUS COLUMN ALIGNMENT
   ========================================================= */

.matches-area
.match-time-column {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;
}


/* =========================================================
   STATUS BADGE
   ========================================================= */

.matches-area
.match-status {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    min-height: 20px !important;

    box-sizing: border-box !important;

    white-space: nowrap !important;
}


/* =========================================================
   FOOTBALLHUB REAL LIVESCORE MATCH FINAL OVERRIDE END
   ========================================================= */




/* =========================================================
   FOOTBALLHUB — REMOVE SEARCH TO MATCHES EMPTY GAP
   REAL FINAL FIX
   ========================================================= */


/* AREA MATCHES HARUS TIDAK MEMILIKI RUANG KOSONG */

.matches-area {

    display: block !important;

    width: 100% !important;

    height: auto !important;

    min-height: 0 !important;

    max-height: none !important;

    margin: 8px 0 0 0 !important;

    padding: 0 !important;

    overflow: visible !important;

    align-self: start !important;

    justify-content: flex-start !important;

    align-content: start !important;

}


/* SEMUA CHILD LANGSUNG DI DALAM MATCHES AREA */

.matches-area > * {

    flex: none !important;

    flex-grow: 0 !important;

    flex-shrink: 0 !important;

    min-height: 0 !important;

    height: auto !important;

}


/* LEAGUE PERTAMA LANGSUNG MENEMPEL */

.matches-area > .livescore-league:first-child {

    margin-top: 0 !important;

    padding-top: 0 !important;

}


/* LEAGUE BERIKUTNYA */

.matches-area > .livescore-league {

    margin-top: 8px !important;

    margin-bottom: 0 !important;

    padding: 0 !important;

}


/* HEADER LEAGUE PERTAMA */

.matches-area
.livescore-league:first-child
.livescore-league-header {

    margin-top: 0 !important;

}


/* MATCH LIST */

.matches-area
.livescore-match-list {

    margin-top: 0 !important;

    padding-top: 0 !important;

}


/* =========================================================
   REMOVE FLEX / GRID EMPTY DISTRIBUTION
   ========================================================= */


/* CONTAINER UTAMA YANG MUNGKIN MEMBERIKAN RUANG */

.livescore-content,
.livescore-main,
.livescore-center,
.matches-column,
.livescore-page-content {

    align-content: start !important;

    justify-content: start !important;

}


/* JIKA MENGGUNAKAN FLEX COLUMN */

.livescore-content,
.livescore-main,
.livescore-center,
.matches-column {

    min-height: 0 !important;

}


/* =========================================================
   SEARCH TO MATCHES DIRECT SPACING
   ========================================================= */


/* SEARCH CONTAINER */

.match-search,
.matches-search,
.livescore-search,
.match-search-container,
.livescore-search-container {

    margin-bottom: 8px !important;

}


/* TIDAK BOLEH ADA MARGIN TAMBAHAN
   SETELAH SEARCH */

.match-search + .matches-area,
.matches-search + .matches-area,
.livescore-search + .matches-area,
.match-search-container + .matches-area,
.livescore-search-container + .matches-area {

    margin-top: 8px !important;

}


/* =========================================================
   LOADING / EMPTY STATE
   ========================================================= */

.matches-area
.detail-loading,
.matches-area
.page-loading {

    min-height: 120px !important;

    height: auto !important;

    margin-top: 0 !important;

}


/* =========================================================
   FOOTBALLHUB SEARCH TO MATCHES GAP FIX END
   ========================================================= */




/* =========================================================
   FOOTBALLHUB LIVESCORE
   SEARCH → MATCHES FINAL STRUCTURE FIX
   ========================================================= */


/* DESKTOP */

@media screen and (min-width: 901px) {


    /* =====================================================
       TOOLBAR
       ===================================================== */

    .livescore-toolbar {

        height: auto !important;

        min-height: 0 !important;

        max-height: none !important;

        margin-top: 0 !important;

        margin-bottom: 8px !important;

        padding: 0 !important;

        align-content: start !important;

    }


    /* =====================================================
       SEARCH
       ===================================================== */

    .livescore-toolbar
    .livescore-match-search {

        margin-top: 0 !important;

        margin-bottom: 0 !important;

        padding-top: 0 !important;

        padding-bottom: 0 !important;

        height: auto !important;

        min-height: 0 !important;

    }


    /* =====================================================
       MATCHES AREA
       LANGSUNG SETELAH TOOLBAR
       ===================================================== */

    .livescore-toolbar
    + .matches-area {

        display: block !important;

        width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        max-height: none !important;

        margin-top: 0 !important;

        margin-bottom: 0 !important;

        padding-top: 0 !important;

        padding-bottom: 0 !important;

        overflow: visible !important;

        align-self: start !important;

    }


    /* =====================================================
       LEAGUE PERTAMA
       ===================================================== */

    .livescore-toolbar
    + .matches-area
    > .livescore-league:first-child {

        margin-top: 0 !important;

        padding-top: 0 !important;

    }


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

    .livescore-toolbar
    + .matches-area
    > .livescore-league:first-child
    .livescore-league-header {

        margin-top: 0 !important;

    }


    /* =====================================================
       SEMUA CHILD LANGSUNG
       ===================================================== */

    .livescore-toolbar
    + .matches-area
    > * {

        height: auto !important;

        min-height: 0 !important;

        max-height: none !important;

    }


}


/* =========================================================
   FOOTBALLHUB SEARCH → MATCHES FINAL FIX END
   ========================================================= */



/* =========================================================
   FOOTBALLHUB LIVESCORE
   DASHBOARD GRID POSITION FINAL FIX
   ========================================================= */

@media screen and (min-width: 901px) {

    /* =============================================
       DASHBOARD UTAMA
       ============================================= */

    .dashboard {

        display: grid !important;

        grid-template-columns:
            245px
            minmax(0, 1fr)
            285px !important;

        grid-template-rows:
            auto
            auto !important;

        column-gap: 16px !important;

        row-gap: 8px !important;

        align-items: start !important;

        align-content: start !important;

    }


    /* =============================================
       SIDEBAR KIRI
       SPAN DUA BARIS
       ============================================= */

    .dashboard > .sidebar {

        grid-column: 1 !important;

        grid-row: 1 / span 2 !important;

        align-self: start !important;

    }


    /* =============================================
       TOOLBAR / SEARCH
       KOLOM TENGAH BARIS PERTAMA
       ============================================= */

    .dashboard > .livescore-toolbar {

        grid-column: 2 !important;

        grid-row: 1 !important;

        width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        margin: 0 !important;

        padding: 0 !important;

        align-self: start !important;

    }


    /* =============================================
       MATCHES
       KOLOM TENGAH BARIS KEDUA
       ============================================= */

    .dashboard > .matches-area {

        grid-column: 2 !important;

        grid-row: 2 !important;

        width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        margin: 0 !important;

        padding: 0 !important;

        align-self: start !important;

    }


    /* =============================================
       SIDEBAR KANAN
       SPAN DUA BARIS
       ============================================= */

    .dashboard > .right-sidebar {

        grid-column: 3 !important;

        grid-row: 1 / span 2 !important;

        align-self: start !important;

    }


    /* =============================================
       LEAGUE PERTAMA
       ============================================= */

    .dashboard
    > .matches-area
    > .livescore-league:first-child {

        margin-top: 0 !important;

    }

}


/* =========================================================
   FOOTBALLHUB DASHBOARD GRID POSITION FIX END
   ========================================================= */


/* =========================================
   FOOTBALLHUB DATE HOVER EFFECT
   BORDER BIRU SAAT MOUSE MENUNJUK TANGGAL
========================================= */

.livescore-date-strip > * {
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

/* TANGGAL SAAT DIHOVER */

.livescore-date-strip > *:hover {
    border-color: #2563eb !important;

    box-shadow:
        inset 0 0 0 1px #2563eb !important;

    position: relative;

    z-index: 5;

    cursor: pointer;
}

/* JANGAN UBAH TANGGAL YANG SEDANG AKTIF */

.livescore-date-strip > *.is-active:hover,
.livescore-date-strip > *.active:hover,
.livescore-date-strip > *.selected:hover {
    border-color: inherit;
}


/* =========================================================
   RADAR LIVESCORE CUSTOM CALENDAR TOGGLE
   ========================================================= */

.livescore-calendar-popup {
    position: absolute;

    top: calc(100% + 8px);
    right: 0;

    width: 320px;

    padding: 18px;

    background: #ffffff;

    border: 1px solid #d9e1ea;

    border-radius: 10px;

    box-shadow:
        0 12px 35px rgba(15, 23, 42, 0.18);

    z-index: 99999;

    display: none;
}


.livescore-calendar-popup.is-open {
    display: block;
}


.livescore-calendar-button.is-calendar-open {
    border-color: #2563eb !important;

    box-shadow:
        inset 0 0 0 1px #2563eb !important;
}


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

.livescore-calendar-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 18px;
}


.livescore-calendar-month-title {
    font-size: 15px;

    font-weight: 700;

    color: #1f2937;

    text-align: center;

    flex: 1;
}


.livescore-calendar-nav {
    width: 34px;
    height: 34px;

    border: none;

    background: transparent;

    color: #374151;

    font-size: 24px;

    cursor: pointer;

    border-radius: 6px;
}


.livescore-calendar-nav:hover {
    background: #f1f5f9;

    color: #2563eb;
}


/* =========================================
   WEEK DAYS
========================================= */

.livescore-calendar-weekdays {
    display: grid;

    grid-template-columns: repeat(7, 1fr);

    margin-bottom: 8px;
}


.livescore-calendar-weekdays span {
    text-align: center;

    font-size: 11px;

    font-weight: 600;

    color: #64748b;
}


/* =========================================
   CALENDAR DAYS
========================================= */

.livescore-calendar-days {
    display: grid;

    grid-template-columns: repeat(7, 1fr);

    gap: 4px;
}


.livescore-calendar-day {
    width: 36px;
    height: 36px;

    border: none;

    background: transparent;

    border-radius: 6px;

    color: #334155;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;
}


.livescore-calendar-day:hover {
    background: #eff6ff;

    color: #2563eb;

    box-shadow:
        inset 0 0 0 1px #2563eb;
}


.livescore-calendar-day.is-selected {
    background: #2563eb;

    color: #ffffff;

    box-shadow: none;
}


.livescore-calendar-day.is-today {
    font-weight: 800;
}


.livescore-calendar-day.is-outside {
    color: #cbd5e1;
}


.livescore-calendar-day.is-outside:hover {
    color: #2563eb;
}


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

@media screen and (max-width: 600px) {

    .livescore-calendar-popup {
        width: min(
            320px,
            calc(100vw - 32px)
        );

        right: 0;
    }

}


/* =========================================================
   RADAR LIVESCORE
   CUSTOM CALENDAR DARK MODE
   PREMIUM DARK CALENDAR
========================================================= */

/* =========================================
   DARK MODE CALENDAR CONTAINER
========================================= */

body.dark-mode .livescore-calendar-popup,
.dark-mode .livescore-calendar-popup,
body[data-theme="dark"] .livescore-calendar-popup,
[data-theme="dark"] .livescore-calendar-popup {

    background:
        linear-gradient(
            145deg,
            #1b1f24 0%,
            #15181c 100%
        ) !important;

    border: 1px solid
        #3a414a !important;

    box-shadow:
        0 12px 35px
        rgba(0, 0, 0, 0.55) !important;

}


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

body.dark-mode .livescore-calendar-header,
.dark-mode .livescore-calendar-header,
body[data-theme="dark"] .livescore-calendar-header,
[data-theme="dark"] .livescore-calendar-header {

    color:
        #ffffff !important;

}


/* =========================================
   MONTH TITLE
========================================= */

body.dark-mode .livescore-calendar-month-title,
.dark-mode .livescore-calendar-month-title,
body[data-theme="dark"] .livescore-calendar-month-title,
[data-theme="dark"] .livescore-calendar-month-title {

    color:
        #ffffff !important;

    font-weight:
        800 !important;

}


/* =========================================
   PREVIOUS / NEXT BUTTON
========================================= */

body.dark-mode .livescore-calendar-nav,
.dark-mode .livescore-calendar-nav,
body[data-theme="dark"] .livescore-calendar-nav,
[data-theme="dark"] .livescore-calendar-nav {

    color:
        #ffffff !important;

    font-weight:
        800 !important;

    background:
        transparent !important;

}


body.dark-mode .livescore-calendar-nav:hover,
.dark-mode .livescore-calendar-nav:hover,
body[data-theme="dark"] .livescore-calendar-nav:hover,
[data-theme="dark"] .livescore-calendar-nav:hover {

    color:
        #60a5fa !important;

}


/* =========================================
   WEEK DAYS
========================================= */

body.dark-mode .livescore-calendar-weekdays span,
.dark-mode .livescore-calendar-weekdays span,
body[data-theme="dark"] .livescore-calendar-weekdays span,
[data-theme="dark"] .livescore-calendar-weekdays span {

    color:
        #dbeafe !important;

    font-weight:
        800 !important;

}


/* =========================================
   DATE BUTTON
========================================= */

body.dark-mode .livescore-calendar-day,
.dark-mode .livescore-calendar-day,
body[data-theme="dark"] .livescore-calendar-day,
[data-theme="dark"] .livescore-calendar-day {

    background:
        transparent !important;

    color:
        #ffffff !important;

    font-weight:
        800 !important;

}


/* =========================================
   DATE HOVER
========================================= */

body.dark-mode .livescore-calendar-day:hover,
.dark-mode .livescore-calendar-day:hover,
body[data-theme="dark"] .livescore-calendar-day:hover,
[data-theme="dark"] .livescore-calendar-day:hover {

    background:
        #172a45 !important;

    color:
        #ffffff !important;

    box-shadow:
        inset 0 0 0 1px
        #3b82f6 !important;

}


/* =========================================
   SELECTED DATE
========================================= */

body.dark-mode .livescore-calendar-day.is-selected,
.dark-mode .livescore-calendar-day.is-selected,
body[data-theme="dark"] .livescore-calendar-day.is-selected,
[data-theme="dark"] .livescore-calendar-day.is-selected {

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        ) !important;

    color:
        #ffffff !important;

    font-weight:
        900 !important;

    box-shadow:
        0 4px 12px
        rgba(37, 99, 235, 0.35) !important;

}


/* =========================================
   TODAY DATE
========================================= */

body.dark-mode .livescore-calendar-day.is-today,
.dark-mode .livescore-calendar-day.is-today,
body[data-theme="dark"] .livescore-calendar-day.is-today,
[data-theme="dark"] .livescore-calendar-day.is-today {

    color:
        #ffffff !important;

    font-weight:
        900 !important;

}


/* =========================================
   OUTSIDE MONTH DATE
========================================= */

body.dark-mode .livescore-calendar-day.is-outside,
.dark-mode .livescore-calendar-day.is-outside,
body[data-theme="dark"] .livescore-calendar-day.is-outside,
[data-theme="dark"] .livescore-calendar-day.is-outside {

    color:
        #64748b !important;

    font-weight:
        700 !important;

}


body.dark-mode .livescore-calendar-day.is-outside:hover,
.dark-mode .livescore-calendar-day.is-outside:hover,
body[data-theme="dark"] .livescore-calendar-day.is-outside:hover,
[data-theme="dark"] .livescore-calendar-day.is-outside:hover {

    color:
        #ffffff !important;

}


/* =========================================
   CALENDAR GRID
========================================= */

body.dark-mode .livescore-calendar-days,
.dark-mode .livescore-calendar-days,
body[data-theme="dark"] .livescore-calendar-days,
[data-theme="dark"] .livescore-calendar-days {

    background:
        transparent !important;

}



/* =========================================================
   FIX CUSTOM CALENDAR POSITION
   ========================================================= */

.livescore-calendar-popup {
    position: fixed !important;
    right: auto !important;
    z-index: 999999 !important;
}

/* =========================================================
   RADAR LIVESCORE
   CALENDAR BUTTON + POPUP POSITION FIX
   DESKTOP
========================================================= */

@media screen and (min-width: 901px) {

    /* Container navigation tanggal */
    .livescore-date-navigation {
        position: relative !important;

        display: flex !important;
        align-items: stretch !important;

        width: 100% !important;
        overflow: visible !important;
    }


    /* 7 tanggal */
    .livescore-date-strip {
        flex: 1 1 auto !important;

        display: grid !important;
        grid-template-columns:
            repeat(7, minmax(0, 1fr)) !important;

        min-width: 0 !important;
    }


    /* Tombol kalender */
    .livescore-calendar-button {
        position: relative !important;

        flex: 0 0 58px !important;

        width: 58px !important;
        min-width: 58px !important;

        margin-left: 8px !important;

        z-index: 1001 !important;
    }


    /* =====================================================
       POPUP CALENDAR
       MUNCUL KE KIRI
    ===================================================== */

    .livescore-calendar-popup,
    .calendar-popup,
    .livescore-calendar-panel {

        position: absolute !important;

        top: calc(100% + 8px) !important;

        /* Popup membuka ke kiri */
        right: 0 !important;
        left: auto !important;

        width: 340px !important;
        max-width: calc(100vw - 30px) !important;

        z-index: 9999 !important;

        overflow: visible !important;
    }

}

/* =========================================================
   RADAR LIVESCORE
   CUSTOM CALENDAR FINAL
========================================================= */

/* POPUP DEFAULT - HIDDEN */

.livescore-calendar-popup {

    display: none !important;

    position: fixed !important;

    width: 340px !important;

    min-width: 340px !important;

    box-sizing: border-box !important;

    padding: 18px !important;

    background: #ffffff !important;

    border: 1px solid #d7e0ea !important;

    border-radius: 14px !important;

    box-shadow:
        0 15px 40px
        rgba(15, 23, 42, 0.20) !important;

    z-index: 999999 !important;

}


/* POPUP SAAT DIBUKA */

.livescore-calendar-popup.is-open {

    display: block !important;

}


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

.livescore-calendar-header {

    display: grid !important;

    grid-template-columns:
        40px
        1fr
        40px !important;

    align-items: center !important;

    margin-bottom: 18px !important;

}


.livescore-calendar-month-title {

    text-align: center !important;

    font-size: 15px !important;

    font-weight: 800 !important;

    color: #1e293b !important;

}


/* BUTTON PREVIOUS / NEXT */

.livescore-calendar-nav {

    width: 36px !important;

    height: 36px !important;

    border: none !important;

    background: transparent !important;

    border-radius: 8px !important;

    cursor: pointer !important;

    font-size: 24px !important;

    font-weight: 700 !important;

    color: #334155 !important;

}


.livescore-calendar-nav:hover {

    background: #f1f5f9 !important;

}


/* =========================================================
   WEEK DAYS
========================================================= */

.livescore-calendar-weekdays {

    display: grid !important;

    grid-template-columns:
        repeat(7, 1fr) !important;

    margin-bottom: 10px !important;

}


.livescore-calendar-weekdays span {

    text-align: center !important;

    font-size: 11px !important;

    font-weight: 700 !important;

    color: #64748b !important;

}


/* =========================================================
   DAYS GRID
========================================================= */

.livescore-calendar-days {

    display: grid !important;

    grid-template-columns:
        repeat(7, 1fr) !important;

    gap: 6px !important;

}


/* DAY BUTTON */

.livescore-calendar-day {

    width: 100% !important;

    aspect-ratio: 1 !important;

    border: none !important;

    background: transparent !important;

    border-radius: 8px !important;

    cursor: pointer !important;

    font-size: 13px !important;

    font-weight: 600 !important;

    color: #334155 !important;

}


/* HOVER */

.livescore-calendar-day:hover {

    background: #eaf2ff !important;

    color: #2563eb !important;

}


/* SELECTED DATE */

.livescore-calendar-day.is-selected {

    background: #2563eb !important;

    color: #ffffff !important;

    font-weight: 800 !important;

}


/* TODAY */

.livescore-calendar-day.is-today {

    border: 1px solid #2563eb !important;

}


/* OUTSIDE MONTH */

.livescore-calendar-day.is-outside {

    color: #cbd5e1 !important;

}


/* =========================================================
   DARK MODE
========================================================= */

body.dark-mode .livescore-calendar-popup,
.dark .livescore-calendar-popup {

    background: #111827 !important;

    border-color: #334155 !important;

}


body.dark-mode .livescore-calendar-month-title,
.dark .livescore-calendar-month-title {

    color: #ffffff !important;

}


body.dark-mode .livescore-calendar-weekdays span,
.dark .livescore-calendar-weekdays span {

    color: #94a3b8 !important;

}


body.dark-mode .livescore-calendar-day,
.dark .livescore-calendar-day {

    color: #e2e8f0 !important;

}


body.dark-mode .livescore-calendar-day:hover,
.dark .livescore-calendar-day:hover {

    background: #1e3a5f !important;

}


body.dark-mode .livescore-calendar-day.is-outside,
.dark .livescore-calendar-day.is-outside {

    color: #475569 !important;

}


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

@media screen and (max-width: 600px) {

    .livescore-calendar-popup {

        width: calc(100vw - 24px) !important;

        min-width: 0 !important;

        padding: 14px !important;

    }

}

/* =====================================================
   LIVESCORE MAIN LAYOUT
===================================================== */

.livescore-layout {

    width: 100%;

    max-width: none;

    margin: 0;

    display: grid;

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

    gap: 14px;

    padding: 14px;

    box-sizing: border-box;

}
/* =========================================================
   FOOTBALLHUB — MATCH CONTENT ALIGN LEFT FINAL FIX
   ========================================================= */

.matches-area .livescore-match-card {
    grid-template-columns:
        62px
        minmax(0, 1fr)
        86px !important;

    gap: 0 !important;
}

.matches-area .match-time-column {
    padding: 6px !important;
    justify-content: center !important;
    border-right: 0 !important;
}

.matches-area .match-teams {
    padding: 6px 8px !important;
    margin: 0 !important;
    min-width: 0 !important;
}

.matches-area .match-team {
    grid-template-columns:
        28px
        minmax(0, 1fr)
        30px !important;

    column-gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.matches-area .match-team-logo,
.matches-area .match-team-logo-fallback {
    margin: 0 !important;
}

.matches-area .match-team-name {
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

.matches-area .match-score {
    margin: 0 !important;
    padding: 0 !important;
    justify-content: flex-end !important;
}

.matches-area .match-preview-column {
    padding: 0 6px 0 0 !important;
    margin: 0 !important;
    justify-content: flex-end !important;
}

/* =========================================================
   END MATCH CONTENT ALIGN LEFT FINAL FIX
   ========================================================= */


/* =========================================================
   FOOTBALLHUB — FORCE MATCH TEAMS TO LEFT
   FINAL POSITION FIX V2
   ========================================================= */

.matches-area .livescore-match-card {
    display: grid !important;

    grid-template-columns:
        58px
        minmax(0, 1fr)
        82px !important;

    column-gap: 0 !important;

    align-items: center !important;
}


/* LEFT STATUS */

.matches-area .match-time-column {
    width: 58px !important;

    padding: 6px 4px !important;
    margin: 0 !important;

    justify-content: center !important;

    border-right: 0 !important;
}


/* CENTER TEAMS */

.matches-area .match-teams {
    width: 100% !important;

    padding: 6px 4px !important;
    margin: 0 !important;

    justify-self: start !important;
    align-self: center !important;
}


/* TEAM ROW */

.matches-area .match-team {
    width: 100% !important;

    display: grid !important;

    grid-template-columns:
        28px
        minmax(0, 1fr)
        28px !important;

    column-gap: 6px !important;

    margin: 0 !important;
    padding: 0 !important;

    justify-content: start !important;
}


/* LOGO */

.matches-area .match-team-logo,
.matches-area .match-team-logo-fallback {

    width: 28px !important;
    height: 28px !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    justify-self: start !important;
}


/* TEAM NAME */

.matches-area .match-team-name {

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    justify-self: start !important;

    text-align: left !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: nowrap !important;
}


/* SCORE */

.matches-area .match-score {

    width: 28px !important;

    margin: 0 !important;
    padding: 0 !important;

    justify-self: end !important;

    justify-content: flex-end !important;

    text-align: right !important;
}


/* RIGHT PREVIEW */

.matches-area .match-preview-column {

    width: 82px !important;

    margin: 0 !important;

    padding: 0 4px !important;

    justify-content: flex-end !important;

}


/* =========================================================
   END FORCE MATCH TEAMS TO LEFT
   ========================================================= */


/* =========================================================
   FOOTBALLHUB — HARD RESET MATCH POSITION
   FORCE TEAM BLOCK START FROM LEFT
   ========================================================= */

.matches-area .livescore-match-card {
    display: grid !important;

    grid-template-columns: 58px minmax(0, 1fr) 82px !important;

    justify-content: stretch !important;

    align-content: center !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* HARD RESET CENTER COLUMN */

.matches-area .livescore-match-card > .match-teams {

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    align-items: stretch !important;

    justify-self: stretch !important;

    width: auto !important;

    min-width: 0 !important;

    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 4px !important;
    padding-right: 4px !important;

    transform: none !important;

    position: static !important;

    left: auto !important;

    right: auto !important;
}


/* HARD RESET TEAM ROW */

.matches-area .livescore-match-card .match-team {

    display: grid !important;

    grid-template-columns: 28px minmax(0, 1fr) 28px !important;

    width: 100% !important;

    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    transform: none !important;

    position: static !important;

    left: auto !important;

    right: auto !important;

    justify-self: stretch !important;
}


/* FORCE LOGO TO FIRST LEFT POSITION */

.matches-area .livescore-match-card .match-team-logo,
.matches-area .livescore-match-card .match-team-logo-fallback {

    grid-column: 1 !important;

    justify-self: start !important;

    margin-left: 0 !important;

    transform: none !important;
}


/* FORCE NAME AFTER LOGO */

.matches-area .livescore-match-card .match-team-name {

    grid-column: 2 !important;

    justify-self: start !important;

    align-self: center !important;

    width: auto !important;

    margin-left: 0 !important;

    padding-left: 0 !important;

    text-align: left !important;

    transform: none !important;
}


/* FORCE SCORE RIGHT */

.matches-area .livescore-match-card .match-score {

    grid-column: 3 !important;

    justify-self: end !important;

    margin: 0 !important;

    transform: none !important;
}


/* =========================================================
   END HARD RESET MATCH POSITION
   ========================================================= */


/* =========================================================
   RADAR LIVESCORE
   MATCH CARD FINAL LAYOUT V3
   DESKTOP / LAPTOP / TABLET / MOBILE

   FINAL OVERRIDE
   TEMPATKAN PALING BAWAH FILE CSS
========================================================= */


/* =========================================================
   1. MATCH CARD UTAMA
========================================================= */

.matches-area .livescore-match-card {
    display: grid !important;

    grid-template-columns:
        58px
        minmax(0, 1fr)
        96px !important;

    align-items: center !important;

    column-gap: 14px !important;

    width: 100% !important;
}


/* =========================================================
   2. KOLOM WAKTU
========================================================= */

.matches-area .match-time-column {
    width: 58px !important;

    min-width: 58px !important;

    justify-self: start !important;

    align-self: center !important;
}


/* =========================================================
   3. AREA TEAM
========================================================= */

.matches-area .match-teams {
    width: 100% !important;

    min-width: 0 !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    gap: 8px !important;

    padding-right: 10px !important;
}


/* =========================================================
   4. BARIS MASING-MASING TEAM
========================================================= */

.matches-area .match-team {
    display: grid !important;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        38px !important;

    align-items: center !important;

    width: 100% !important;

    min-width: 0 !important;

    column-gap: 8px !important;
}


/* =========================================================
   5. NAMA TEAM
========================================================= */

.matches-area .match-team-name,
.matches-area .team-name {
    min-width: 0 !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: nowrap !important;
}


/* =========================================================
   6. SCORE

   SCORE MEMPUNYAI AREA SENDIRI
========================================================= */

.matches-area .match-score {
    width: 38px !important;

    min-width: 38px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    text-align: center !important;

    justify-self: end !important;

    margin: 0 !important;

    padding: 0 !important;
}


/* =========================================================
   7. KOLOM PREVIEW

   DIPISAH DARI SCORE
========================================================= */

.matches-area .match-preview-column {
    width: 96px !important;

    min-width: 96px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: flex-end !important;

    justify-self: end !important;

    padding-left: 14px !important;

    margin: 0 !important;
}


/* =========================================================
   8. TOMBOL PREVIEW
========================================================= */

.matches-area .match-preview-btn {
    width: 82px !important;

    min-width: 82px !important;

    height: 34px !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 6px !important;

    margin: 0 !important;

    white-space: nowrap !important;
}


/* =========================================================
   9. PASTIKAN LOGO TEAM TIDAK MENYEMPIT
========================================================= */

.matches-area .match-team img,
.matches-area .match-team-logo,
.matches-area .team-logo {
    flex-shrink: 0 !important;
}


/* =========================================================
   TABLET
   MAX WIDTH 900PX
========================================================= */

@media (max-width: 900px) {

    .matches-area .livescore-match-card {

        grid-template-columns:
            54px
            minmax(0, 1fr)
            88px !important;

        column-gap: 10px !important;
    }


    .matches-area .match-time-column {

        width: 54px !important;

        min-width: 54px !important;
    }


    .matches-area .match-teams {

        padding-right: 6px !important;
    }


    .matches-area .match-team {

        grid-template-columns:
            auto
            minmax(0, 1fr)
            34px !important;
    }


    .matches-area .match-score {

        width: 34px !important;

        min-width: 34px !important;
    }


    .matches-area .match-preview-column {

        width: 88px !important;

        min-width: 88px !important;

        padding-left: 10px !important;
    }


    .matches-area .match-preview-btn {

        width: 76px !important;

        min-width: 76px !important;
    }

}


/* =========================================================
   MOBILE
   MAX WIDTH 600PX
========================================================= */

@media (max-width: 600px) {

    .matches-area .livescore-match-card {

        grid-template-columns:
            48px
            minmax(0, 1fr)
            48px !important;

        column-gap: 6px !important;
    }


    /* WAKTU */

    .matches-area .match-time-column {

        width: 48px !important;

        min-width: 48px !important;
    }


    /* TEAM */

    .matches-area .match-teams {

        gap: 6px !important;

        padding-right: 2px !important;
    }


    .matches-area .match-team {

        grid-template-columns:
            auto
            minmax(0, 1fr)
            28px !important;

        column-gap: 6px !important;
    }


    /* SCORE */

    .matches-area .match-score {

        width: 28px !important;

        min-width: 28px !important;

        font-size: 13px !important;
    }


    /* PREVIEW */

    .matches-area .match-preview-column {

        width: 48px !important;

        min-width: 48px !important;

        justify-content: center !important;

        padding-left: 0 !important;
    }


    .matches-area .match-preview-btn {

        width: 42px !important;

        min-width: 42px !important;

        height: 32px !important;

        padding-left: 5px !important;

        padding-right: 5px !important;

        font-size: 0 !important;
    }


    /*
       JIKA ADA ICON DI DALAM TOMBOL
    */

    .matches-area .match-preview-btn i,
    .matches-area .match-preview-btn svg {

        font-size: 13px !important;

        width: 14px !important;

        height: 14px !important;

        display: block !important;
    }

}


/* =========================================================
   SMALL MOBILE
   MAX WIDTH 420PX
========================================================= */

@media (max-width: 420px) {

    .matches-area .livescore-match-card {

        grid-template-columns:
            42px
            minmax(0, 1fr)
            42px !important;

        column-gap: 4px !important;
    }


    .matches-area .match-time-column {

        width: 42px !important;

        min-width: 42px !important;
    }


    .matches-area .match-team {

        grid-template-columns:
            auto
            minmax(0, 1fr)
            24px !important;

        column-gap: 5px !important;
    }


    .matches-area .match-score {

        width: 24px !important;

        min-width: 24px !important;
    }


    .matches-area .match-preview-column {

        width: 42px !important;

        min-width: 42px !important;
    }


    .matches-area .match-preview-btn {

        width: 38px !important;

        min-width: 38px !important;

        height: 30px !important;
    }

}

/* =========================================================
   RADAR LIVESCORE
   MOBILE PREVIEW SPACING FIX
   FINAL SAFE VERSION
========================================================= */

@media (max-width: 600px) {

    /* ---------------------------------------------
       MATCH CARD
       Tambah ruang untuk Preview
    --------------------------------------------- */

    .matches-area .livescore-match-card {

        grid-template-columns:
            48px
            minmax(0, 1fr)
            78px !important;

        column-gap: 0 !important;
    }


    /* ---------------------------------------------
       TEAM AREA
    --------------------------------------------- */

    .matches-area .match-teams {

        padding-right: 6px !important;

        min-width: 0 !important;
    }


    /* ---------------------------------------------
       TEAM ROW
    --------------------------------------------- */

    .matches-area .match-team {

        grid-template-columns:
            20px
            minmax(0, 1fr)
            26px !important;

        column-gap: 5px !important;
    }


    /* ---------------------------------------------
       SCORE
       Buat kolom angka sendiri
    --------------------------------------------- */

.matches-area .match-score {

    width: 26px !important;

    min-width: 26px !important;

    margin: 0 !important;

    padding: 0 0 0 0 !important;

    justify-content: flex-start !important;

    text-align: left !important;

    transform: translateX(-8px) !important;
}


    /* ---------------------------------------------
       PREVIEW COLUMN
       Beri jarak dari Score
    --------------------------------------------- */

    .matches-area .match-preview-column {

        width: 78px !important;

        min-width: 78px !important;

        margin: 0 !important;

        padding-left: 8px !important;

        padding-right: 4px !important;

        justify-content: flex-end !important;
    }


    /* ---------------------------------------------
       PREVIEW BUTTON
    --------------------------------------------- */

    .matches-area .match-preview-btn {

        width: 70px !important;

        min-width: 70px !important;

        height: 30px !important;

        padding: 0 4px !important;

        font-size: 8px !important;

        white-space: nowrap !important;
    }


    /* ---------------------------------------------
       PREVIEW TEXT
       Pastikan tulisan muncul
    --------------------------------------------- */

    .matches-area .match-preview-text {

        display: inline !important;

        visibility: visible !important;

        opacity: 1 !important;

        font-size: 8px !important;

        white-space: nowrap !important;
    }


    /* ---------------------------------------------
       ICON
       Sembunyikan agar ruang Preview cukup
    --------------------------------------------- */

    .matches-area .match-preview-icon {

        display: none !important;
    }

}

/* =========================================================
   RADAR LIVESCORE
   FINAL CALENDAR DESKTOP + MOBILE FIX
   JANGAN HAPUS
========================================================= */


/* =========================================================
   CALENDAR BUTTON
========================================================= */

#livescore-calendar-button,
.livescore-calendar-button {

    position: relative !important;

    z-index: 2147483646 !important;

    pointer-events: auto !important;

    cursor: pointer !important;

}


/* =========================================================
   CUSTOM CALENDAR POPUP
========================================================= */

.livescore-calendar-popup {

    position: fixed !important;

    display: none !important;

    right: auto !important;

    bottom: auto !important;

    transform: none !important;

    margin: 0 !important;

    z-index: 2147483647 !important;

    pointer-events: auto !important;

    box-sizing: border-box !important;

}


/* =========================================================
   DESKTOP + LAPTOP
========================================================= */

@media screen and (min-width: 901px) {

    .livescore-calendar-popup {

        position: fixed !important;

        right: auto !important;

        bottom: auto !important;

        transform: none !important;

        margin: 0 !important;

        z-index: 2147483647 !important;

    }


    #livescore-calendar-button,
    .livescore-calendar-button {

        position: relative !important;

        z-index: 2147483646 !important;

        pointer-events: auto !important;

        cursor: pointer !important;

    }

}


/* =========================================================
   TABLET + MOBILE
========================================================= */

@media screen and (max-width: 900px) {

    .livescore-calendar-popup {

        position: fixed !important;

        right: auto !important;

        bottom: auto !important;

        transform: none !important;

        margin: 0 !important;

        z-index: 2147483647 !important;

        pointer-events: auto !important;

    }


    #livescore-calendar-button,
    .livescore-calendar-button {

        position: relative !important;

        z-index: 2147483646 !important;

        pointer-events: auto !important;

    }

}

/* =========================================================
   RADAR LIVESCORE
   CALENDAR CONTROL FINAL
   DESKTOP + MOBILE
========================================================= */

.livescore-calendar-control {

    position: relative;

    width: 40px;

    height: 40px;

    flex: 0 0 40px;

}


/* =============================================
   CALENDAR BUTTON
============================================= */

.livescore-calendar-control
.livescore-calendar-button {

    position: absolute;

    inset: 0;

    width: 40px;

    height: 40px;

    z-index: 1;

}


/* =============================================
   NATIVE DATE PICKER
============================================= */

.livescore-calendar-control
.livescore-date-picker {

    position: absolute !important;

    inset: 0 !important;

    width: 40px !important;

    height: 40px !important;

    z-index: 2 !important;

    opacity: 0 !important;

    display: block !important;

    visibility: visible !important;

    pointer-events: auto !important;

    cursor: pointer !important;

}


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

@media screen and (max-width: 600px) {

    .livescore-calendar-control {

        width: 38px;

        height: 38px;

        flex-basis: 38px;

    }


    .livescore-calendar-control
    .livescore-calendar-button {

        width: 38px;

        height: 38px;

    }


    .livescore-calendar-control
    .livescore-date-picker {

        width: 38px !important;

        height: 38px !important;

    }

}

/* =========================================================
   RADAR LIVESCORE
   PREMIUM TOOLBAR LAYOUT FINAL
   DATE TOP
   SEARCH + LIVE BOTTOM
========================================================= */


/* =========================================================
   DESKTOP
========================================================= */

@media screen and (min-width: 901px) {


    /* =============================================
       TOOLBAR UTAMA
    ============================================= */

    .livescore-toolbar {

        display: grid !important;

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

        grid-template-rows:
            auto
            auto !important;

        gap: 10px !important;

        width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        margin: 0 !important;

        padding: 0 !important;

        align-items: stretch !important;

    }


    /* =============================================
       DATE NAVIGATION
       BARIS PERTAMA
    ============================================= */

    .livescore-date-navigation {

        grid-column: 1 !important;

        grid-row: 1 !important;

        display: flex !important;

        align-items: stretch !important;

        width: 100% !important;

        min-width: 0 !important;

    }


    /* =============================================
       DATE STRIP
    ============================================= */

    .livescore-date-strip {

        flex: 1 1 auto !important;

        min-width: 0 !important;

    }


    /* =============================================
       SEARCH + LIVE
       BARIS KEDUA
    ============================================= */

    .livescore-match-search {

        grid-column: 1 !important;

        grid-row: 2 !important;

        width: 100% !important;

        min-width: 0 !important;

        margin: 0 !important;

    }


    /* =============================================
       WRAPPER SEARCH
       AGAR LIVE DI SAMPING SEARCH
    ============================================= */

    .livescore-search-row {

        display: flex !important;

        align-items: center !important;

        gap: 10px !important;

        width: 100% !important;

    }


    .livescore-search-row
    .livescore-match-search {

        flex: 1 1 auto !important;

        width: auto !important;

    }


    /* =============================================
       LIVE TOGGLE
    ============================================= */

    .livescore-live-toggle {

        flex: 0 0 auto !important;

        width: auto !important;

        min-height: 44px !important;

        margin: 0 !important;

    }


}


/* =========================================================
   PREMIUM SEARCH ROW
========================================================= */

.livescore-search-row {

    display: flex;

    align-items: center;

    gap: 10px;

    width: 100%;

}


/* =========================================================
   SEARCH PREMIUM
========================================================= */

.livescore-match-search {

    min-width: 0;

    border-radius: 12px;

}


/* =========================================================
   LIVE TOGGLE PREMIUM
========================================================= */

.livescore-live-toggle {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 44px;

    padding: 0 14px;

    border-radius: 12px;

    border:
        1px solid
        var(--line, #d9e1ea);

    background:
        var(--surface, #ffffff);

}


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

@media screen and (max-width: 900px) {


    .livescore-toolbar {

        display: flex !important;

        flex-direction: column !important;

        gap: 10px !important;

        width: 100% !important;

    }


    /* DATE */

    .livescore-date-navigation {

        width: 100% !important;

        min-width: 0 !important;

    }


    /* SEARCH ROW */

    .livescore-search-row {

        display: flex !important;

        align-items: center !important;

        gap: 8px !important;

        width: 100% !important;

    }


    .livescore-search-row
    .livescore-match-search {

        flex: 1 1 auto !important;

        min-width: 0 !important;

        width: auto !important;

    }


    /* LIVE */

    .livescore-live-toggle {

        flex: 0 0 auto !important;

        padding: 0 10px !important;

        min-height: 42px !important;

    }

}


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

@media screen and (max-width: 600px) {


    .livescore-search-row {

        gap: 7px !important;

    }


    .livescore-live-toggle {

        padding: 0 8px !important;

    }

}

/* =========================================================
   RADAR LIVESCORE
   PREMIUM CALENDAR FINAL OVERRIDE
   DESKTOP + LAPTOP + TABLET + MOBILE
   ========================================================= */


/* =========================================================
   CALENDAR CONTROL
========================================================= */

.livescore-calendar-control {

    position: relative !important;

    width: 58px !important;

    min-width: 58px !important;

    height: auto !important;

    flex: 0 0 58px !important;

}


/* =========================================================
   CALENDAR BUTTON
========================================================= */

#livescore-calendar-button,
.livescore-calendar-button {

    position: relative !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 100% !important;

    min-width: 0 !important;

    height: 100% !important;

    min-height: 68px !important;

    z-index: 10 !important;

    pointer-events: auto !important;

    cursor: pointer !important;

}


/* =========================================================
   DISABLE NATIVE INPUT OVERLAY
   BUTTON CUSTOM HARUS BISA DIKLIK
========================================================= */

.livescore-calendar-control
.livescore-date-picker {

    position: absolute !important;

    width: 1px !important;

    height: 1px !important;

    opacity: 0 !important;

    pointer-events: none !important;

    visibility: hidden !important;

}


/* =========================================================
   PREMIUM CALENDAR POPUP
========================================================= */

.livescore-calendar-popup {

    position: fixed !important;

    display: none !important;

    width: min(
        340px,
        calc(100vw - 24px)
    ) !important;

    min-width: 0 !important;

    max-width:
        calc(100vw - 24px) !important;

    box-sizing: border-box !important;

    padding: 18px !important;

    margin: 0 !important;

    background:
        #ffffff !important;

    border:
        1px solid
        #dbe4ee !important;

    border-radius:
        16px !important;

    box-shadow:
        0 20px 55px
        rgba(
            15,
            23,
            42,
            0.24
        ) !important;

    z-index:
        2147483647 !important;

    pointer-events:
        auto !important;

}


/* =========================================================
   OPEN
========================================================= */

.livescore-calendar-popup.is-open {

    display:
        block !important;

}


/* =========================================================
   ACTIVE BUTTON
========================================================= */

#livescore-calendar-button.is-calendar-open,
.livescore-calendar-button.is-calendar-open {

    border-color:
        #2563eb !important;

    box-shadow:
        inset 0 0 0 1px
        #2563eb !important;

}


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

.livescore-calendar-header {

    display:
        grid !important;

    grid-template-columns:
        40px
        minmax(0, 1fr)
        40px !important;

    align-items:
        center !important;

    gap:
        8px !important;

    margin-bottom:
        16px !important;

}


/* =========================================================
   MONTH TITLE
========================================================= */

.livescore-calendar-month-title {

    text-align:
        center !important;

    font-size:
        15px !important;

    font-weight:
        800 !important;

    color:
        #172033 !important;

}


/* =========================================================
   NAVIGATION BUTTON
========================================================= */

.livescore-calendar-nav {

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        38px !important;

    height:
        38px !important;

    padding:
        0 !important;

    border:
        1px solid
        transparent !important;

    border-radius:
        10px !important;

    background:
        transparent !important;

    color:
        #334155 !important;

    font-size:
        26px !important;

    line-height:
        1 !important;

    cursor:
        pointer !important;

    transition:
        0.18s ease !important;

}


.livescore-calendar-nav:hover {

    background:
        #eff6ff !important;

    color:
        #2563eb !important;

    border-color:
        #bfdbfe !important;

}


/* =========================================================
   WEEKDAYS
========================================================= */

.livescore-calendar-weekdays {

    display:
        grid !important;

    grid-template-columns:
        repeat(7, minmax(0, 1fr)) !important;

    gap:
        4px !important;

    margin-bottom:
        8px !important;

}


.livescore-calendar-weekdays span {

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    min-height:
        30px !important;

    color:
        #64748b !important;

    font-size:
        11px !important;

    font-weight:
        800 !important;

}


/* =========================================================
   DAYS GRID
========================================================= */

.livescore-calendar-days {

    display:
        grid !important;

    grid-template-columns:
        repeat(7, minmax(0, 1fr)) !important;

    gap:
        5px !important;

}


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

.livescore-calendar-day {

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        100% !important;

    aspect-ratio:
        1 / 1 !important;

    min-height:
        38px !important;

    padding:
        0 !important;

    border:
        1px solid
        transparent !important;

    border-radius:
        10px !important;

    background:
        transparent !important;

    color:
        #334155 !important;

    font-size:
        13px !important;

    font-weight:
        700 !important;

    cursor:
        pointer !important;

    transition:
        0.18s ease !important;

}


/* =========================================================
   HOVER
========================================================= */

.livescore-calendar-day:hover {

    background:
        #eff6ff !important;

    color:
        #2563eb !important;

    border-color:
        #bfdbfe !important;

}


/* =========================================================
   SELECTED DATE
========================================================= */

.livescore-calendar-day.is-selected {

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        ) !important;

    color:
        #ffffff !important;

    border-color:
        #2563eb !important;

    font-weight:
        900 !important;

    box-shadow:
        0 5px 14px
        rgba(
            37,
            99,
            235,
            0.30
        ) !important;

}


/* =========================================================
   TODAY
========================================================= */

.livescore-calendar-day.is-today {

    border-color:
        #2563eb !important;

}


/* =========================================================
   OUTSIDE MONTH
========================================================= */

.livescore-calendar-day.is-outside {

    color:
        #94a3b8 !important;

    opacity:
        0.65 !important;

}


/* =========================================================
   PREMIUM DARK MODE
========================================================= */

body.dark-mode
.livescore-calendar-popup,

.dark-mode
.livescore-calendar-popup,

.dark
.livescore-calendar-popup,

body[data-theme="dark"]
.livescore-calendar-popup,

[data-theme="dark"]
.livescore-calendar-popup {

    background:
        linear-gradient(
            145deg,
            #0b1220,
            #111c2e
        ) !important;

    border-color:
        #263754 !important;

    box-shadow:
        0 24px 65px
        rgba(
            0,
            0,
            0,
            0.65
        ) !important;

}


/* =========================================================
   DARK MONTH
========================================================= */

body.dark-mode
.livescore-calendar-month-title,

.dark-mode
.livescore-calendar-month-title,

.dark
.livescore-calendar-month-title,

body[data-theme="dark"]
.livescore-calendar-month-title,

[data-theme="dark"]
.livescore-calendar-month-title {

    color:
        #f8fafc !important;

}


/* =========================================================
   DARK NAV
========================================================= */

body.dark-mode
.livescore-calendar-nav,

.dark-mode
.livescore-calendar-nav,

.dark
.livescore-calendar-nav,

body[data-theme="dark"]
.livescore-calendar-nav,

[data-theme="dark"]
.livescore-calendar-nav {

    color:
        #e2e8f0 !important;

}


body.dark-mode
.livescore-calendar-nav:hover,

.dark-mode
.livescore-calendar-nav:hover,

.dark
.livescore-calendar-nav:hover,

body[data-theme="dark"]
.livescore-calendar-nav:hover,

[data-theme="dark"]
.livescore-calendar-nav:hover {

    background:
        #17243a !important;

    color:
        #60a5fa !important;

    border-color:
        #2d4d76 !important;

}


/* =========================================================
   DARK WEEKDAYS
========================================================= */

body.dark-mode
.livescore-calendar-weekdays span,

.dark-mode
.livescore-calendar-weekdays span,

.dark
.livescore-calendar-weekdays span,

body[data-theme="dark"]
.livescore-calendar-weekdays span,

[data-theme="dark"]
.livescore-calendar-weekdays span {

    color:
        #94a3b8 !important;

}


/* =========================================================
   DARK DAY
========================================================= */

body.dark-mode
.livescore-calendar-day,

.dark-mode
.livescore-calendar-day,

.dark
.livescore-calendar-day,

body[data-theme="dark"]
.livescore-calendar-day,

[data-theme="dark"]
.livescore-calendar-day {

    background:
        transparent !important;

    color:
        #e5edf8 !important;

}


/* =========================================================
   DARK DAY HOVER
========================================================= */

body.dark-mode
.livescore-calendar-day:hover,

.dark-mode
.livescore-calendar-day:hover,

.dark
.livescore-calendar-day:hover,

body[data-theme="dark"]
.livescore-calendar-day:hover,

[data-theme="dark"]
.livescore-calendar-day:hover {

    background:
        #172a45 !important;

    color:
        #ffffff !important;

    border-color:
        #2563eb !important;

}


/* =========================================================
   DARK SELECTED
========================================================= */

body.dark-mode
.livescore-calendar-day.is-selected,

.dark-mode
.livescore-calendar-day.is-selected,

.dark
.livescore-calendar-day.is-selected,

body[data-theme="dark"]
.livescore-calendar-day.is-selected,

[data-theme="dark"]
.livescore-calendar-day.is-selected {

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        ) !important;

    color:
        #ffffff !important;

    border-color:
        #3b82f6 !important;

}


/* =========================================================
   DARK OUTSIDE MONTH
========================================================= */

body.dark-mode
.livescore-calendar-day.is-outside,

.dark-mode
.livescore-calendar-day.is-outside,

.dark
.livescore-calendar-day.is-outside,

body[data-theme="dark"]
.livescore-calendar-day.is-outside,

[data-theme="dark"]
.livescore-calendar-day.is-outside {

    color:
        #64748b !important;

}


/* =========================================================
   TABLET
========================================================= */

@media screen and (
    max-width: 900px
) {

    .livescore-calendar-control {

        width:
            48px !important;

        min-width:
            48px !important;

        flex-basis:
            48px !important;

    }


    #livescore-calendar-button,
    .livescore-calendar-button {

        min-height:
            56px !important;

    }


    .livescore-calendar-popup {

        width:
            min(
                330px,
                calc(100vw - 20px)
            ) !important;

        padding:
            16px !important;

    }

}


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

@media screen and (
    max-width: 600px
) {

    .livescore-calendar-control {

        width:
            42px !important;

        min-width:
            42px !important;

        flex-basis:
            42px !important;

    }


    #livescore-calendar-button,
    .livescore-calendar-button {

        min-height:
            46px !important;

        font-size:
            18px !important;

    }


    .livescore-calendar-popup {

        width:
            calc(
                100vw - 16px
            ) !important;

        max-width:
            calc(
                100vw - 16px
            ) !important;

        padding:
            14px !important;

        border-radius:
            14px !important;

    }


    .livescore-calendar-days {

        gap:
            4px !important;

    }


    .livescore-calendar-day {

        min-height:
            36px !important;

        font-size:
            12px !important;

        border-radius:
            8px !important;

    }

}


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

@media screen and (
    max-width: 380px
) {

    .livescore-calendar-popup {

        padding:
            10px !important;

    }


    .livescore-calendar-header {

        grid-template-columns:
            36px
            minmax(0, 1fr)
            36px !important;

    }


    .livescore-calendar-nav {

        width:
            34px !important;

        height:
            34px !important;

        font-size:
            22px !important;

    }


    .livescore-calendar-weekdays span {

        font-size:
            10px !important;

    }


    .livescore-calendar-day {

        min-height:
            32px !important;

        font-size:
            11px !important;

    }

}


/* =========================================================
   END PREMIUM CALENDAR FINAL
========================================================= */

/* =========================================================
   MATCH DETAIL
   PREMIUM LINEUP
   FULL RESPONSIVE
   PC / LAPTOP / TABLET / HP / HP KECIL
   ========================================================= */


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

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


.match-lineups-premium-info {
    width: 100%;

    margin:
        0 0 14px;

    padding:
        10px 14px;

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

    border-radius:
        10px;

    background:
        var(--surface-soft);

    color:
        var(--muted);

    font-size:
        12px;

    line-height:
        1.5;

    text-align:
        center;
}


/* =========================================================
   TEAM GRID
   DESKTOP / LAPTOP
   ========================================================= */

.match-lineup-teams-grid {

    display:
        grid;

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

    gap:
        12px;

    width:
        100%;

    min-width:
        0;
}


/* =========================================================
   TEAM CARD
   ========================================================= */

.match-lineup-team-card {

    width:
        100%;

    min-width:
        0;

    overflow:
        hidden;

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

    border-radius:
        14px;

    background:
        var(--surface);

    color:
        var(--text);

    box-shadow:
        var(--shadow);

}


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

.match-lineup-card-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    min-width:
        0;

    min-height:
        60px;

    padding:
        10px 14px;

    border-bottom:
        1px solid var(--line);

    background:
        var(--surface-soft);

}


.match-lineup-card-team {

    display:
        flex;

    align-items:
        center;

    min-width:
        0;

    gap:
        9px;

}


.match-lineup-card-team img,
.match-lineup-card-logo-placeholder {

    width:
        36px;

    height:
        36px;

    flex:
        0 0 36px;

    object-fit:
        contain;

    border-radius:
        50%;

}


.match-lineup-card-logo-placeholder {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--surface);

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

    font-size:
        17px;

}


.match-lineup-card-team strong {

    min-width:
        0;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    color:
        var(--text);

    font-size:
        13px;

    font-weight:
        800;

}


.match-lineup-formation {

    flex:
        0 0 auto;

    padding:
        5px 8px;

    border-radius:
        7px;

    background:
        rgba(8, 168, 117, 0.10);

    color:
        var(--green-dark);

    font-size:
        12px;

    font-weight:
        900;

    white-space:
        nowrap;

}


/* =========================================================
   DARK MODE
   HANYA LINEUP BARU
   LIGHT MODE TIDAK DISENTUH
   ========================================================= */

html[data-theme="dark"] .match-lineup-formation {

    background:
        rgba(37, 214, 159, 0.12);

    color:
        var(--green);

}


/* =========================================================
   PITCH
   ========================================================= */

.match-lineup-pitch {

    position:
        relative;

    width:
        calc(100% - 16px);

    margin:
        9px auto;

    aspect-ratio:
        0.76;

    overflow:
        hidden;

    border-radius:
        8px;

    border:
        1px solid
        rgba(255,255,255,0.22);

    background:
        linear-gradient(
            180deg,
            #0a8068 0%,
            #08745e 50%,
            #066752 100%
        );

}


/* =========================================================
   PITCH GRASS STRIPES
   ========================================================= */

.match-lineup-pitch::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    opacity:
        0.10;

    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 12%,
            rgba(255,255,255,0.28) 12%,
            rgba(255,255,255,0.28) 24%
        );

}


/* =========================================================
   PITCH LINES
   ========================================================= */

.match-lineup-pitch-lines {

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    pointer-events:
        none;

    opacity:
        0.62;

    background:

        /* center line */

        linear-gradient(
            to bottom,
            transparent 49.5%,
            rgba(255,255,255,0.72) 49.5%,
            rgba(255,255,255,0.72) 50.5%,
            transparent 50.5%
        ),

        /* center circle */

        radial-gradient(
            circle at 50% 50%,
            transparent 0 12%,
            rgba(255,255,255,0.68) 12.2%,
            rgba(255,255,255,0.68) 12.8%,
            transparent 13%
        );

}


/* =========================================================
   PENALTY BOX
   ========================================================= */

.match-lineup-pitch::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        20%;

    width:
        60%;

    height:
        16%;

    border:
        1px solid
        rgba(255,255,255,0.68);

    border-top:
        0;

    z-index:
        2;

    pointer-events:
        none;

}


/* =========================================================
   PLAYER AREA
   ========================================================= */

.match-lineup-players {

    position:
        absolute;

    inset:
        0;

    z-index:
        5;

}


/* =========================================================
   PLAYER
   ========================================================= */

.match-lineup-player {

    position:
        absolute;

    left:
        var(--player-x);

    top:
        var(--player-y);

    width:
        56px;

    transform:
        translate(
            -50%,
            -50%
        );

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    z-index:
        10;

}


/* =========================================================
   PLAYER SHIRT
   ========================================================= */

.match-lineup-player-shirt {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        29px;

    height:
        29px;

    border-radius:
        9px 9px 7px 7px;

    border:
        2px solid
        rgba(255,255,255,0.92);

    box-shadow:
        0 3px 8px
        rgba(0,0,0,0.30);

}


.match-lineup-player.home
.match-lineup-player-shirt {

    background:
        #0878c9;

    color:
        #ffffff;

}


.match-lineup-player.away
.match-lineup-player-shirt {

    background:
        #f3c51b;

    color:
        #17202a;

}


.match-lineup-player-number {

    font-size:
        9px;

    font-weight:
        900;

    line-height:
        1;

}


/* =========================================================
   PLAYER NAME
   ========================================================= */

.match-lineup-player-name {

    max-width:
        72px;

    margin-top:
        3px;

    padding:
        2px 4px;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    border-radius:
        4px;

    background:
        rgba(2,15,24,0.76);

    color:
        #ffffff;

    font-size:
        8px;

    font-weight:
        800;

    line-height:
        1.15;

    text-align:
        center;

}


/* =========================================================
   SUBSTITUTES
   ========================================================= */

.match-lineup-substitutes {

    width:
        100%;

    padding:
        10px 12px 13px;

    border-top:
        1px solid var(--line);

    background:
        var(--surface);

}


.match-lineup-sub-title {

    margin-bottom:
        8px;

    color:
        var(--text);

    font-size:
        11px;

    font-weight:
        900;

}


.match-lineup-sub-grid {

    display:
        grid;

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

    gap:
        6px 10px;

}


.match-lineup-substitute {

    display:
        flex;

    align-items:
        center;

    min-width:
        0;

    gap:
        6px;

}


.match-lineup-sub-number {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        21px;

    height:
        21px;

    flex:
        0 0 21px;

    border-radius:
        50%;

    font-size:
        8px;

    font-weight:
        900;

}


.match-lineup-sub-number.home {

    background:
        #0878c9;

    color:
        #ffffff;

}


.match-lineup-sub-number.away {

    background:
        #d8ad00;

    color:
        #17202a;

}


.match-lineup-sub-name {

    min-width:
        0;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    color:
        var(--text);

    font-size:
        9px;

    font-weight:
        700;

}


.match-lineup-no-subs {

    color:
        var(--muted);

    font-size:
        9px;

}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1200px) {

    .match-lineup-teams-grid {

        gap:
            14px;

    }


    .match-lineup-card-header {

        min-height:
            64px;

        padding:
            11px 16px;

    }


    .match-lineup-card-team strong {

        font-size:
            14px;

    }


    .match-lineup-formation {

        font-size:
            13px;

    }


    .match-lineup-player {

        width:
            62px;

    }


    .match-lineup-player-shirt {

        width:
            32px;

        height:
            32px;

    }


    .match-lineup-player-name {

        max-width:
            78px;

        font-size:
            9px;

    }

}


/* =========================================================
   LAPTOP / SMALL DESKTOP
   ========================================================= */

@media (max-width: 1100px) {

    .match-lineup-teams-grid {

        gap:
            10px;

    }


    .match-lineup-player {

        width:
            52px;

    }


    .match-lineup-player-shirt {

        width:
            28px;

        height:
            28px;

    }


    .match-lineup-player-name {

        max-width:
            66px;

        font-size:
            8px;

    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 820px) {

    .match-lineup-teams-grid {

        grid-template-columns:
            1fr;

        gap:
            12px;

    }


    .match-lineup-team-card {

        border-radius:
            13px;

    }


    .match-lineup-pitch {

        aspect-ratio:
            0.82;

    }


    .match-lineup-player {

        width:
            56px;

    }


    .match-lineup-player-shirt {

        width:
            30px;

        height:
            30px;

    }


    .match-lineup-player-name {

        max-width:
            74px;

        font-size:
            8px;

    }

}


/* =========================================================
   HP
   ========================================================= */

@media (max-width: 620px) {

    .match-lineups-premium-info {

        margin-bottom:
            10px;

        padding:
            9px 10px;

        font-size:
            10px;

    }


    .match-lineup-card-header {

        min-height:
            55px;

        padding:
            9px 11px;

    }


    .match-lineup-card-team {

        gap:
            8px;

    }


    .match-lineup-card-team img,
    .match-lineup-card-logo-placeholder {

        width:
            32px;

        height:
            32px;

        flex-basis:
            32px;

    }


    .match-lineup-card-team strong {

        font-size:
            12px;

    }


    .match-lineup-formation {

        padding:
            4px 7px;

        font-size:
            11px;

    }


    .match-lineup-pitch {

        width:
            calc(100% - 12px);

        margin:
            7px auto;

        aspect-ratio:
            0.84;

    }


    .match-lineup-player {

        width:
            50px;

    }


    .match-lineup-player-shirt {

        width:
            27px;

        height:
            27px;

        border-radius:
            8px 8px 6px 6px;

    }


    .match-lineup-player-name {

        max-width:
            65px;

        font-size:
            7px;

    }


    .match-lineup-substitutes {

        padding:
            9px 10px 12px;

    }


    .match-lineup-sub-grid {

        gap:
            5px 8px;

    }


    .match-lineup-sub-name {

        font-size:
            8px;

    }

}


/* =========================================================
   HP KECIL
   360px - 480px
   ========================================================= */

@media (max-width: 480px) {

    .match-lineup-card-header {

        min-height:
            52px;

        padding:
            8px 9px;

    }


    .match-lineup-card-team img,
    .match-lineup-card-logo-placeholder {

        width:
            29px;

        height:
            29px;

        flex-basis:
            29px;

    }


    .match-lineup-card-team strong {

        font-size:
            11px;

    }


    .match-lineup-formation {

        padding:
            3px 6px;

        font-size:
            10px;

    }


    .match-lineup-pitch {

        aspect-ratio:
            0.86;

    }


    .match-lineup-player {

        width:
            45px;

    }


    .match-lineup-player-shirt {

        width:
            25px;

        height:
            25px;

        border-width:
            1.5px;

    }


    .match-lineup-player-number {

        font-size:
            8px;

    }


    .match-lineup-player-name {

        max-width:
            57px;

        margin-top:
            2px;

        padding:
            2px 3px;

        font-size:
            6.5px;

    }


    .match-lineup-sub-grid {

        grid-template-columns:
            1fr;

    }


    .match-lineup-sub-name {

        font-size:
            8px;

    }

}


/* =========================================================
   HP SANGAT KECIL
   280px - 359px
   ========================================================= */

@media (max-width: 359px) {

    .match-lineups-premium-info {

        padding:
            8px;

        font-size:
            9px;

    }


    .match-lineup-card-header {

        min-height:
            48px;

        padding:
            7px 8px;

    }


    .match-lineup-card-team img,
    .match-lineup-card-logo-placeholder {

        width:
            26px;

        height:
            26px;

        flex-basis:
            26px;

    }


    .match-lineup-card-team strong {

        font-size:
            10px;

    }


    .match-lineup-formation {

        padding:
            3px 5px;

        font-size:
            9px;

    }


    .match-lineup-pitch {

        width:
            calc(100% - 8px);

        aspect-ratio:
            0.88;

    }


    .match-lineup-player {

        width:
            40px;

    }


    .match-lineup-player-shirt {

        width:
            23px;

        height:
            23px;

    }


    .match-lineup-player-number {

        font-size:
            7px;

    }


    .match-lineup-player-name {

        max-width:
            51px;

        font-size:
            6px;

    }


    .match-lineup-substitutes {

        padding:
            8px;

    }


    .match-lineup-sub-title {

        font-size:
            10px;

    }


    .match-lineup-sub-number {

        width:
            19px;

        height:
            19px;

        flex-basis:
            19px;

    }

}

/* =========================================================
   MATCH DETAIL
   PREMIUM LINE UP
   FULL RESPONSIVE
   PC / LAPTOP / TABLET / HP / HP KECIL
   ========================================================= */


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

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


.match-lineups-premium-info {
    width: 100%;
    margin: 0 0 14px;
    padding: 10px 14px;

    box-sizing: border-box;

    border: 1px solid var(--line);
    border-radius: 10px;

    background: var(--surface-soft);
    color: var(--muted);

    font-size: 12px;
    line-height: 1.5;

    text-align: center;
}


/* =========================================================
   TEAM GRID
   DESKTOP / LAPTOP
   ========================================================= */

.match-lineup-teams-grid {
    display: grid;

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

    gap: 12px;

    width: 100%;
    min-width: 0;
}


/* =========================================================
   TEAM CARD
   ========================================================= */

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

    overflow: hidden;

    box-sizing: border-box;

    border: 1px solid var(--line);
    border-radius: 14px;

    background: var(--surface);
    color: var(--text);

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


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

.match-lineup-card-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    min-width: 0;
    min-height: 60px;

    padding: 10px 14px;

    box-sizing: border-box;

    border-bottom: 1px solid var(--line);

    background: var(--surface-soft);
}


.match-lineup-card-team {
    display: flex;

    align-items: center;

    min-width: 0;

    gap: 9px;
}


.match-lineup-card-team img,
.match-lineup-card-logo-placeholder {
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    object-fit: contain;

    border-radius: 50%;
}


.match-lineup-card-logo-placeholder {
    display: flex;

    align-items: center;
    justify-content: center;

    background: var(--surface);

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

    font-size: 17px;
}


.match-lineup-card-team strong {
    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    color: var(--text);

    font-size: 13px;
    font-weight: 800;
}


.match-lineup-formation {
    flex: 0 0 auto;

    padding: 5px 8px;

    border-radius: 7px;

    background: rgba(8, 168, 117, 0.10);

    color: var(--green-dark);

    font-size: 12px;
    font-weight: 900;

    white-space: nowrap;
}


/* =========================================================
   DARK MODE
   ========================================================= */

html[data-theme="dark"] .match-lineup-formation {
    background: rgba(37, 214, 159, 0.12);

    color: var(--green);
}


/* =========================================================
   PITCH
   ========================================================= */

.match-lineup-pitch {
    position: relative;

    width: calc(100% - 16px);

    margin: 9px auto;

    aspect-ratio: 0.76;

    overflow: hidden;

    box-sizing: border-box;

    border-radius: 8px;

    border: 1px solid rgba(255, 255, 255, 0.22);

    background:
        linear-gradient(
            180deg,
            #0a8068 0%,
            #08745e 50%,
            #066752 100%
        );
}


/* =========================================================
   PITCH GRASS STRIPES
   ========================================================= */

.match-lineup-pitch::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.10;

    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 12%,
            rgba(255, 255, 255, 0.28) 12%,
            rgba(255, 255, 255, 0.28) 24%
        );
}


/* =========================================================
   PITCH LINES
   ========================================================= */

.match-lineup-pitch-lines {
    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    opacity: 0.62;

    background:

        linear-gradient(
            to bottom,
            transparent 49.5%,
            rgba(255, 255, 255, 0.72) 49.5%,
            rgba(255, 255, 255, 0.72) 50.5%,
            transparent 50.5%
        ),

        radial-gradient(
            circle at 50% 50%,
            transparent 0 12%,
            rgba(255, 255, 255, 0.68) 12.2%,
            rgba(255, 255, 255, 0.68) 12.8%,
            transparent 13%
        );
}


/* =========================================================
   PENALTY BOX
   ========================================================= */

.match-lineup-pitch::before {
    content: "";

    position: absolute;

    top: 0;
    left: 20%;

    width: 60%;
    height: 16%;

    box-sizing: border-box;

    border: 1px solid rgba(255, 255, 255, 0.68);

    border-top: 0;

    z-index: 2;

    pointer-events: none;
}


/* =========================================================
   PLAYER AREA
   ========================================================= */

.match-lineup-players {
    position: absolute;

    inset: 0;

    z-index: 5;
}


/* =========================================================
   PLAYER
   ========================================================= */

.match-lineup-player {
    position: absolute;

    left: var(--player-x);
    top: var(--player-y);

    width: 56px;

    transform:
        translate(
            -50%,
            -50%
        );

    display: flex;

    flex-direction: column;

    align-items: center;

    z-index: 10;
}


/* =========================================================
   PLAYER SHIRT
   ========================================================= */

.match-lineup-player-shirt {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 29px;
    height: 29px;

    box-sizing: border-box;

    border-radius:
        9px 9px 7px 7px;

    border:
        2px solid
        rgba(255, 255, 255, 0.92);

    box-shadow:
        0 3px 8px
        rgba(0, 0, 0, 0.30);
}


.match-lineup-player.home .match-lineup-player-shirt {
    background: #0878c9;

    color: #ffffff;
}


.match-lineup-player.away .match-lineup-player-shirt {
    background: #f3c51b;

    color: #17202a;
}


.match-lineup-player-number {
    font-size: 9px;

    font-weight: 900;

    line-height: 1;
}


/* =========================================================
   PLAYER NAME
   ========================================================= */

.match-lineup-player-name {
    max-width: 72px;

    margin-top: 3px;
    padding: 2px 4px;

    overflow: hidden;

    box-sizing: border-box;

    text-overflow: ellipsis;

    white-space: nowrap;

    border-radius: 4px;

    background:
        rgba(2, 15, 24, 0.76);

    color: #ffffff;

    font-size: 8px;
    font-weight: 800;

    line-height: 1.15;

    text-align: center;
}


/* =========================================================
   NO DATA
   ========================================================= */

.match-lineup-no-data {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 20px;

    color: rgba(255, 255, 255, 0.90);

    font-size: 11px;

    font-weight: 700;

    text-align: center;
}


/* =========================================================
   SUBSTITUTES
   ========================================================= */

.match-lineup-substitutes {
    width: 100%;

    padding: 10px 12px 13px;

    box-sizing: border-box;

    border-top: 1px solid var(--line);

    background: var(--surface);
}


.match-lineup-sub-title {
    margin-bottom: 8px;

    color: var(--text);

    font-size: 11px;
    font-weight: 900;
}


.match-lineup-sub-grid {
    display: grid;

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

    gap: 6px 10px;
}


.match-lineup-substitute {
    display: flex;

    align-items: center;

    min-width: 0;

    gap: 6px;
}


.match-lineup-sub-number {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 21px;
    height: 21px;

    flex: 0 0 21px;

    border-radius: 50%;

    font-size: 8px;
    font-weight: 900;
}


.match-lineup-sub-number.home {
    background: #0878c9;

    color: #ffffff;
}


.match-lineup-sub-number.away {
    background: #d8ad00;

    color: #17202a;
}


.match-lineup-sub-name {
    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    color: var(--text);

    font-size: 9px;
    font-weight: 700;
}


.match-lineup-no-subs {
    color: var(--muted);

    font-size: 9px;
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1200px) {

    .match-lineup-teams-grid {
        gap: 14px;
    }


    .match-lineup-card-header {
        min-height: 64px;

        padding:
            11px 16px;
    }


    .match-lineup-card-team strong {
        font-size: 14px;
    }


    .match-lineup-formation {
        font-size: 13px;
    }


    .match-lineup-player {
        width: 62px;
    }


    .match-lineup-player-shirt {
        width: 32px;
        height: 32px;
    }


    .match-lineup-player-name {
        max-width: 78px;

        font-size: 9px;
    }

}


/* =========================================================
   LAPTOP / SMALL DESKTOP
   ========================================================= */

@media (max-width: 1100px) {

    .match-lineup-teams-grid {
        gap: 10px;
    }


    .match-lineup-player {
        width: 52px;
    }


    .match-lineup-player-shirt {
        width: 28px;
        height: 28px;
    }


    .match-lineup-player-name {
        max-width: 66px;

        font-size: 8px;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 820px) {

    .match-lineup-teams-grid {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .match-lineup-team-card {
        border-radius: 13px;
    }


    .match-lineup-pitch {
        aspect-ratio: 0.82;
    }


    .match-lineup-player {
        width: 56px;
    }


    .match-lineup-player-shirt {
        width: 30px;
        height: 30px;
    }


    .match-lineup-player-name {
        max-width: 74px;

        font-size: 8px;
    }

}


/* =========================================================
   HP
   ========================================================= */

@media (max-width: 620px) {

    .match-lineups-premium-info {
        margin-bottom: 10px;

        padding:
            9px 10px;

        font-size: 10px;
    }


    .match-lineup-card-header {
        min-height: 55px;

        padding:
            9px 11px;
    }


    .match-lineup-card-team {
        gap: 8px;
    }


    .match-lineup-card-team img,
    .match-lineup-card-logo-placeholder {
        width: 32px;
        height: 32px;

        flex-basis: 32px;
    }


    .match-lineup-card-team strong {
        font-size: 12px;
    }


    .match-lineup-formation {
        padding:
            4px 7px;

        font-size: 11px;
    }


    .match-lineup-pitch {
        width:
            calc(100% - 12px);

        margin:
            7px auto;

        aspect-ratio:
            0.84;
    }


    .match-lineup-player {
        width: 50px;
    }


    .match-lineup-player-shirt {
        width: 27px;
        height: 27px;

        border-radius:
            8px 8px 6px 6px;
    }


    .match-lineup-player-name {
        max-width: 65px;

        font-size: 7px;
    }


    .match-lineup-substitutes {
        padding:
            9px 10px 12px;
    }


    .match-lineup-sub-grid {
        gap:
            5px 8px;
    }


    .match-lineup-sub-name {
        font-size: 8px;
    }

}


/* =========================================================
   HP KECIL
   360px - 480px
   ========================================================= */

@media (max-width: 480px) {

    .match-lineup-card-header {
        min-height: 52px;

        padding:
            8px 9px;
    }


    .match-lineup-card-team img,
    .match-lineup-card-logo-placeholder {
        width: 29px;
        height: 29px;

        flex-basis: 29px;
    }


    .match-lineup-card-team strong {
        font-size: 11px;
    }


    .match-lineup-formation {
        padding:
            3px 6px;

        font-size: 10px;
    }


    .match-lineup-pitch {
        aspect-ratio: 0.86;
    }


    .match-lineup-player {
        width: 45px;
    }


    .match-lineup-player-shirt {
        width: 25px;
        height: 25px;

        border-width: 1.5px;
    }


    .match-lineup-player-number {
        font-size: 8px;
    }


    .match-lineup-player-name {
        max-width: 57px;

        margin-top: 2px;

        padding:
            2px 3px;

        font-size: 6.5px;
    }


    .match-lineup-sub-grid {
        grid-template-columns: 1fr;
    }


    .match-lineup-sub-name {
        font-size: 8px;
    }

}


/* =========================================================
   HP SANGAT KECIL
   280px - 359px
   ========================================================= */

@media (max-width: 359px) {

    .match-lineups-premium-info {
        padding: 8px;

        font-size: 9px;
    }


    .match-lineup-card-header {
        min-height: 48px;

        padding:
            7px 8px;
    }


    .match-lineup-card-team img,
    .match-lineup-card-logo-placeholder {
        width: 26px;
        height: 26px;

        flex-basis: 26px;
    }


    .match-lineup-card-team strong {
        font-size: 10px;
    }


    .match-lineup-formation {
        padding:
            3px 5px;

        font-size: 9px;
    }


    .match-lineup-pitch {
        width:
            calc(100% - 8px);

        aspect-ratio:
            0.88;
    }


    .match-lineup-player {
        width: 40px;
    }


    .match-lineup-player-shirt {
        width: 23px;
        height: 23px;
    }


    .match-lineup-player-number {
        font-size: 7px;
    }


    .match-lineup-player-name {
        max-width: 51px;

        font-size: 6px;
    }


    .match-lineup-substitutes {
        padding: 8px;
    }


    .match-lineup-sub-title {
        font-size: 10px;
    }


    .match-lineup-sub-number {
        width: 19px;
        height: 19px;

        flex-basis: 19px;
    }

}

/* =====================================================
   MATCH LINEUP PLAYER PHOTO
   PREMIUM PLAYER FACE
===================================================== */

.match-lineup-player-photo {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--card-bg, #0b1a2a);
    border: 2px solid rgba(255,255,255,0.9);

    box-shadow:
        0 3px 8px rgba(0,0,0,0.28);

    flex-shrink: 0;
}


.match-lineup-player-photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center top;
}


.match-lineup-player-photo-fallback {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 12px;
    font-weight: 800;

    color: #ffffff;
}


.match-lineup-player-name {
    white-space: nowrap;
}


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

@media (max-width: 620px) {

    .match-lineup-player-photo {
        width: 38px;
        height: 38px;
    }

}


@media (max-width: 480px) {

    .match-lineup-player-photo {
        width: 34px;
        height: 34px;

        border-width: 1.5px;
    }

}


@media (max-width: 359px) {

    .match-lineup-player-photo {
        width: 31px;
        height: 31px;
    }

}

/* =========================================================
   MATCH LINEUP PLAYER RATING
   LIVE / FT
========================================================= */

.match-lineup-player-rating {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 24px;
    height: 17px;

    margin-top: 2px;
    padding: 0 5px;

    border-radius: 5px;

    background: #0b1a2a;
    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.18);

    font-size: 10px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: 0.1px;

    box-sizing: border-box;

    pointer-events: none;
}


/* =========================================================
   DARK MODE
========================================================= */

body.dark-mode .match-lineup-player-rating {
    background: #0b1a2a;
    color: #ffffff;

    border-color:
        rgba(255, 255, 255, 0.22);
}


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

@media (
    max-width: 480px
) {

    .match-lineup-player-rating {

        min-width: 22px;
        height: 16px;

        padding: 0 4px;

        font-size: 9px;

        border-radius: 4px;
    }
}


/* =========================================================
   VERY SMALL PHONE
========================================================= */

@media (
    max-width: 359px
) {

    .match-lineup-player-rating {

        min-width: 20px;
        height: 15px;

        padding: 0 3px;

        font-size: 8px;
    }
}

/* =========================================================
   PREMIUM PLAYER EVENT SYSTEM
   Goal / Assist / Card / Substitution
========================================================= */

.match-lineup-player-meta {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 4px;

    min-height: 18px;

    margin-top: 3px;

    white-space: nowrap;
}


/* =========================================================
   EVENT CONTAINER
========================================================= */

.match-lineup-player-events {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 3px;

    min-height: 17px;
}


/* =========================================================
   BASE EVENT BADGE
========================================================= */

.match-lineup-event-badge {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 3px;

    min-width: 18px;
    height: 18px;

    padding: 0 5px;

    box-sizing: border-box;

    border-radius: 6px;

    background:
        linear-gradient(
            135deg,
            rgba(8, 22, 36, .98),
            rgba(4, 13, 23, .98)
        );

    border:
        1px solid
        rgba(255,255,255,.14);

    color: #ffffff;

    font-size: 9px;
    font-weight: 900;

    line-height: 1;

    letter-spacing: .05px;

    box-shadow:
        0 2px 5px
        rgba(0,0,0,.28),

        inset 0 1px 0
        rgba(255,255,255,.08);

    text-shadow:
        0 1px 2px
        rgba(0,0,0,.55);

    white-space: nowrap;

    transition:
        transform .16s ease,
        filter .16s ease,
        box-shadow .16s ease;
}


/* =========================================================
   SUBSTITUTION OUT
========================================================= */

.match-lineup-event-badge.is-sub-out {

    color: #ff7f87;

    background:
        linear-gradient(
            135deg,
            rgba(104, 22, 31, .92),
            rgba(48, 12, 19, .96)
        );

    border-color:
        rgba(255, 88, 101, .32);

    box-shadow:
        0 2px 5px
        rgba(255, 51, 71, .18),

        inset 0 1px 0
        rgba(255,255,255,.08);
}


/* =========================================================
   SUBSTITUTION IN
========================================================= */

.match-lineup-event-badge.is-sub-in {

    color: #55e69a;

    background:
        linear-gradient(
            135deg,
            rgba(11, 91, 62, .92),
            rgba(5, 48, 34, .96)
        );

    border-color:
        rgba(52, 211, 153, .32);

    box-shadow:
        0 2px 5px
        rgba(16, 185, 129, .18),

        inset 0 1px 0
        rgba(255,255,255,.08);
}


/* =========================================================
   GOAL
========================================================= */

.match-lineup-event-badge.is-goal {

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            rgba(21, 87, 143, .96),
            rgba(10, 47, 82, .98)
        );

    border-color:
        rgba(65, 169, 255, .38);

    box-shadow:
        0 2px 6px
        rgba(36, 168, 255, .22),

        inset 0 1px 0
        rgba(255,255,255,.10);
}


/* =========================================================
   ASSIST
========================================================= */

.match-lineup-event-badge.is-assist {

    color: #9cdbff;

    background:
        linear-gradient(
            135deg,
            rgba(19, 67, 104, .94),
            rgba(8, 35, 58, .98)
        );

    border-color:
        rgba(80, 181, 255, .30);
}


/* =========================================================
   YELLOW CARD
========================================================= */

.match-lineup-event-badge.is-yellow {

    min-width: 18px;

    padding:
        0 4px;

    background:
        linear-gradient(
            135deg,
            #dca900,
            #a66f00
        );

    border-color:
        rgba(255, 218, 79, .48);

    color: #fff7cf;

    box-shadow:
        0 2px 5px
        rgba(255, 193, 7, .22),

        inset 0 1px 0
        rgba(255,255,255,.20);
}


/* =========================================================
   RED CARD
========================================================= */

.match-lineup-event-badge.is-red {

    min-width: 18px;

    padding:
        0 4px;

    background:
        linear-gradient(
            135deg,
            #ef3340,
            #b51224
        );

    border-color:
        rgba(255, 103, 114, .50);

    color: #ffffff;

    box-shadow:
        0 2px 6px
        rgba(239, 51, 64, .25),

        inset 0 1px 0
        rgba(255,255,255,.16);
}


/* =========================================================
   HOVER
========================================================= */

.match-lineup-event-badge:hover {

    transform:
        translateY(-1px);

    filter:
        brightness(1.08);

    box-shadow:
        0 4px 8px
        rgba(0,0,0,.32),

        inset 0 1px 0
        rgba(255,255,255,.12);
}


/* =========================================================
   SUBSTITUTE META
========================================================= */

.match-lineup-sub-player-info {

    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    gap: 2px;
}


.match-lineup-sub-meta {

    display: flex;

    align-items: center;

    gap: 4px;

    min-height: 17px;
}


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

@media (max-width: 480px) {

    .match-lineup-player-meta {

        gap: 3px;

        min-height: 17px;

        margin-top: 2px;
    }


    .match-lineup-player-events {

        gap: 2px;
    }


    .match-lineup-event-badge {

        min-width: 16px;

        height: 16px;

        padding:
            0 4px;

        border-radius: 5px;

        font-size: 8px;
    }


    .match-lineup-event-badge.is-yellow,
    .match-lineup-event-badge.is-red {

        min-width: 16px;

        padding:
            0 3px;
    }


    .match-lineup-sub-meta {

        gap: 3px;
    }
}


/* =========================================================
   VERY SMALL PHONE
========================================================= */

@media (max-width: 359px) {

    .match-lineup-player-meta {

        gap: 2px;
    }


    .match-lineup-player-events {

        gap: 2px;
    }


    .match-lineup-event-badge {

        min-width: 15px;

        height: 15px;

        padding:
            0 3px;

        border-radius: 4px;

        font-size: 7px;
    }


    .match-lineup-event-badge.is-yellow,
    .match-lineup-event-badge.is-red {

        min-width: 15px;

        padding:
            0 2px;
    }
}
/* =========================================================
   MATCH DETAIL — MOBILE PITCH HEIGHT FINAL
   Lapangan sedikit lebih tinggi agar pemain atas/bawah
   tidak terpotong pada HP kecil.
   DESKTOP TIDAK DISENTUH.
========================================================= */


/* =========================================================
   HP / TABLET KECIL
   <= 600px
========================================================= */

@media screen and (max-width: 600px) {

    .match-lineup-pitch {

        width: 100% !important;

        /*
         * Lebih tinggi dari versi sebelumnya.
         * Tinggi mengikuti lebar supaya tetap responsive.
         */
        aspect-ratio: 10 / 17 !important;

        height: auto !important;

        min-height: 0 !important;

        max-height: none !important;

        overflow: hidden !important;

        position: relative !important;

        box-sizing: border-box !important;
    }


    .match-lineup-pitch-lines {

        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;

        height: 100% !important;
    }


    .match-lineup-players {

        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;

        height: 100% !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }
}


/* =========================================================
   HP KECIL
   <= 480px
========================================================= */

@media screen and (max-width: 480px) {

    .match-lineup-pitch {

        /*
         * EXTRA HEIGHT
         *
         * Ini sengaja dibuat lebih tinggi supaya:
         *
         * goalkeeper atas
         * dan goalkeeper bawah
         *
         * punya ruang aman.
         */
        aspect-ratio: 10 / 18 !important;

        min-height: 0 !important;

        max-height: none !important;

        overflow: hidden !important;
    }


    .match-lineup-players {

        inset: 0 !important;

        height: 100% !important;

        overflow: visible !important;
    }
}


/* =========================================================
   HP SANGAT KECIL
   <= 359px
========================================================= */

@media screen and (max-width: 359px) {

    .match-lineup-pitch {

        /*
         * Sedikit lebih tinggi lagi khusus HP kecil.
         *
         * Tujuannya:
         * - pemain paling atas aman
         * - pemain paling bawah aman
         * - rating + event tidak terpotong
         */
        aspect-ratio: 10 / 19 !important;

        min-height: 0 !important;

        max-height: none !important;

        overflow: hidden !important;
    }


    .match-lineup-players {

        inset: 0 !important;

        width: 100% !important;

        height: 100% !important;

        overflow: visible !important;
    }
}
/* =========================================================
   MOBILE SUBSTITUTES - FINAL CLEAN LAYOUT
   ========================================================= */

@media (max-width: 600px) {

    /* PARENT SUBSTITUTES */
    .match-lineup-substitutes {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        display: block !important;
        overflow: hidden !important;
    }

    /* JUDUL */
    .match-lineup-sub-title {
        width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 7px !important;
    }

    /* GRID 2 KOLOM */
    .match-lineup-sub-grid {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

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

        gap: 5px 6px !important;

        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
    }

    /* SETIAP PEMAIN */
    .match-lineup-substitute {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        min-height: 29px !important;

        display: flex !important;
        align-items: center !important;

        box-sizing: border-box !important;

        margin: 0 !important;
        padding: 4px 6px !important;

        gap: 5px !important;

        overflow: hidden !important;
    }

    /* NOMOR PEMAIN */
    .match-lineup-sub-number {
        flex: 0 0 21px !important;

        width: 21px !important;
        min-width: 21px !important;
        max-width: 21px !important;

        height: 21px !important;
        min-height: 21px !important;
        max-height: 21px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        box-sizing: border-box !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 8.5px !important;
        line-height: 1 !important;

        flex-shrink: 0 !important;
    }

    /* NAMA PEMAIN */
    .match-lineup-sub-name {
        flex: 1 1 auto !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;

        display: block !important;

        box-sizing: border-box !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 9px !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
        letter-spacing: 0 !important;

        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }
}


/* =========================================================
   VERY SMALL PHONE
   ========================================================= */

@media (max-width: 390px) {

    .match-lineup-sub-grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        gap: 4px 5px !important;
    }

    .match-lineup-substitute {
        min-height: 28px !important;
        padding: 3px 5px !important;
        gap: 4px !important;
    }

    .match-lineup-sub-number {
        flex: 0 0 20px !important;

        width: 20px !important;
        min-width: 20px !important;
        max-width: 20px !important;

        height: 20px !important;

        font-size: 8px !important;
    }

    .match-lineup-sub-name {
        font-size: 8.5px !important;
        line-height: 1.15 !important;
    }
}


/* =========================================================
   EXTRA SMALL PHONE
   ========================================================= */

@media (max-width: 359px) {

    .match-lineup-sub-grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        gap: 3px 4px !important;
    }

    .match-lineup-substitute {
        min-height: 27px !important;
        padding: 3px 4px !important;
        gap: 3px !important;
    }

    .match-lineup-sub-number {
        flex: 0 0 19px !important;

        width: 19px !important;
        min-width: 19px !important;
        max-width: 19px !important;

        height: 19px !important;

        font-size: 7.5px !important;
    }

    .match-lineup-sub-name {
        font-size: 8px !important;
        line-height: 1.1 !important;
    }
}