/* =========================================================
   NobarTV LiveScore v7.1 — style.css  (Core)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Nunito:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

:root {
    --nbtv-navy:          #1a2535;
    --nbtv-navy-mid:      #243047;
    --nbtv-navy-light:    #2e3d56;
    --nbtv-orange:        #f97316;
    --nbtv-orange-dark:   #ea6c0a;
    --nbtv-orange-soft:   #fff7ed;
    --nbtv-orange-border: #fed7aa;
    --nbtv-bg:            #f3f4f6;
    --nbtv-surface:       #ffffff;
    --nbtv-surface-2:     #f9fafb;
    --nbtv-border:        #e5e7eb;
    --nbtv-border-match:  #d1d5db;
    --nbtv-text-primary:  #111827;
    --nbtv-text-muted:    #6b7280;
    --nbtv-live:          #dc2626;
    --nbtv-live-soft:     #fef2f2;
    --nbtv-live-border:   #fecaca;
    --nbtv-ft:            #6b7280;
    --nbtv-ft-soft:       #f9fafb;
    --nbtv-ht:            #d97706;
    --nbtv-ht-soft:       #fffbeb;
    --nbtv-winner:        #f97316;
    --nbtv-radius-sm:     4px;
    --nbtv-radius-md:     8px;
    --nbtv-radius-lg:     10px;
    --nbtv-radius-xl:     12px;
    --nbtv-font:      'Nunito', sans-serif;
    --nbtv-font-cond: 'Barlow Condensed', sans-serif;
    --nbtv-mono:      'JetBrains Mono', monospace;
    --nbtv-shadow-sm:   0 1px 3px rgba(0,0,0,.07);
    --nbtv-shadow-md:   0 4px 16px rgba(0,0,0,.10);
    --nbtv-shadow-card: 0 2px 8px rgba(0,0,0,.06);
}

/* ─── WRAPPER ─────────────────────────────────────────────── */

.nbtv-wrapper {
    font-family: var(--nbtv-font);
    width: 100%;
    background: var(--nbtv-bg);
    border-radius: var(--nbtv-radius-xl);
    overflow: hidden;
    border: 1px solid var(--nbtv-border);
    box-shadow: var(--nbtv-shadow-md);
}


/* ─── HEADER ──────────────────────────────────────────────── */

.nbtv-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--nbtv-navy);
    border-bottom: 3px solid var(--nbtv-orange);
    gap: 10px;
    position: relative;
}

.nbtv-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.nbtv-header-icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}

.nbtv-header-title {
    font-family: var(--nbtv-font-cond);
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: .3px;
    text-transform: uppercase;
    line-height: 1.1;
}

.nbtv-header-sub {
    font-size: 12px;
    color: rgba(255,255,255,.55);
    margin-top: 2px;
    font-weight: 500;
}

.nbtv-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Live counter ── */
.nbtv-live-counter {
    display: none;
    align-items: center;
    gap: 5px;
    background: rgba(220,38,38,.15);
    border: 1px solid rgba(220,38,38,.4);
    color: #fca5a5;
    font-family: var(--nbtv-font-cond);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s, transform .1s;
}

.nbtv-live-counter.nbtv-counter-active {
    display: inline-flex;
    animation: nbtv-counter-glow 2.5s ease-in-out infinite;
}

.nbtv-live-counter:hover { background: rgba(220,38,38,.25); transform: translateY(-1px); }
.nbtv-live-count         { font-size: 13px; color: #fca5a5; }

@keyframes nbtv-counter-glow {
    0%, 100% { border-color: rgba(220,38,38,.4);  background: rgba(220,38,38,.15); }
    50%       { border-color: rgba(220,38,38,.7);  background: rgba(220,38,38,.27); }
}

.nbtv-load-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 2px solid var(--nbtv-orange);
    background: var(--nbtv-orange);
    color: #fff;
    font-family: var(--nbtv-font-cond);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 7px 14px;
    border-radius: var(--nbtv-radius-md);
    cursor: pointer;
    transition: background .15s, transform .1s;
    white-space: nowrap;
}

.nbtv-load-btn:hover    { background: var(--nbtv-orange-dark); border-color: var(--nbtv-orange-dark); transform: translateY(-1px); }
.nbtv-load-btn:active   { transform: translateY(0); }
.nbtv-load-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* ─── DATE NAVIGATION ─────────────────────────────────────── */

.nbtv-date-nav {
    display: flex;
    align-items: center;
    background: var(--nbtv-navy-mid);
    padding: 0 6px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    /* Tidak pakai gap — tiap elemen punya margin sendiri */
}

.nbtv-date-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 44px;
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: rgba(255,255,255,.7);
    cursor: pointer;
    border-radius: var(--nbtv-radius-sm);
    transition: color .15s, background .15s;
}

.nbtv-date-arrow:hover:not(:disabled) { color: #fff; background: rgba(255,255,255,.08); }
.nbtv-date-arrow.nbtv-arrow-disabled  { opacity: .25; cursor: not-allowed; }

/* ── Date center (hari + tanggal) — SATU BARIS ── */
.nbtv-date-center {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 10px 4px;
    gap: 0;
    min-width: 0;
}

.nbtv-date-label {
    font-family: var(--nbtv-font-cond);
    font-size: 17px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: .8px;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}

/* Separator titik antara hari & tanggal */
.nbtv-date-label::after {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    background: var(--nbtv-orange);
    border-radius: 50%;
    margin: 0 8px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.nbtv-date-value {
    font-family: var(--nbtv-mono);
    font-size: 15px;
    font-weight: 600;
    color: rgba(255,255,255,.75);
    line-height: 1;
    letter-spacing: .4px;
    white-space: nowrap;
}

/* ── Tombol Hari Ini ── */
.nbtv-today-btn {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    background: var(--nbtv-orange);
    color: #fff;
    border: none;
    font-family: var(--nbtv-font-cond);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s, transform .1s;
    white-space: nowrap;
    margin-left: 2px;
}

.nbtv-today-btn:hover  { background: var(--nbtv-orange-dark); transform: translateY(-1px); }
.nbtv-today-btn:active { transform: translateY(0); }
.nbtv-today-btn.nbtv-today-hidden { display: none; }

/* ── Favorites Tab ── */
.nbtv-fav-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    background: rgba(255,255,255,.12);
    border: 1.5px solid rgba(255,255,255,.35);
    color: rgba(255,255,255,.9);
    font-family: var(--nbtv-font-cond);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .1s, box-shadow .15s;
    white-space: nowrap;
    margin-left: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

.nbtv-fav-tab:hover {
    border-color: var(--nbtv-orange);
    color: var(--nbtv-orange);
    background: rgba(249,115,22,.15);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(249,115,22,.25);
}

.nbtv-fav-tab:active { transform: translateY(0); }

.nbtv-fav-tab.nbtv-fav-tab-active {
    background: var(--nbtv-orange);
    border-color: var(--nbtv-orange);
    color: #fff;
    box-shadow: 0 3px 12px rgba(249,115,22,.5);
}

.nbtv-fav-tab.nbtv-fav-tab-active svg { fill: #fff; }

/* ─── CONTENT ─────────────────────────────────────────────── */

.nbtv-content {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ─── PLACEHOLDER ─────────────────────────────────────────── */

.nbtv-placeholder {
    text-align: center;
    padding: 40px 16px;
    color: var(--nbtv-text-muted);
    font-size: 14px;
}

.nbtv-placeholder-icon { font-size: 38px; margin-bottom: 10px; opacity: .35; display: block; }
.nbtv-placeholder p    { margin: 0; font-weight: 500; line-height: 1.6; }
.nbtv-placeholder strong { color: var(--nbtv-orange); }

/* ─── LEAGUE GROUP ────────────────────────────────────────── */

.nbtv-league {
    background: var(--nbtv-surface);
    border-radius: var(--nbtv-radius-lg);
    border: 1px solid var(--nbtv-border);
    overflow: hidden;
    box-shadow: var(--nbtv-shadow-card);
    transition: box-shadow .2s;
}

.nbtv-league:hover { box-shadow: 0 4px 16px rgba(0,0,0,.10); }

.nbtv-league.nbtv-league-hidden,
.nbtv-league.nbtv-search-hidden,
.nbtv-league.nbtv-fav-hidden { display: none; }

/* ── League Header — now clickable toggle ── */
.nbtv-league-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px 9px 12px;
    background: linear-gradient(135deg, var(--nbtv-navy) 0%, var(--nbtv-navy-mid) 100%);
    border-left: 4px solid var(--nbtv-orange);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.nbtv-league-header:focus { outline: 2px solid var(--nbtv-orange); outline-offset: -2px; }

.nbtv-league-header img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: 3px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
    flex-shrink: 0;
}

.nbtv-league-name {
    font-family: var(--nbtv-font-cond);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .6px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

/* Legacy: keep old .nbtv-league-header > span support */
.nbtv-league-header > span:not(.nbtv-league-name):not(.nbtv-fixture-badge) {
    font-family: var(--nbtv-font-cond);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .6px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

/* Fixture count badge */
.nbtv-fixture-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(249,115,22,.22);
    border: 1px solid rgba(249,115,22,.45);
    color: #fed7aa;
    font-family: var(--nbtv-font-cond);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    padding: 2px 7px;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
    text-transform: uppercase;
}

/* Chevron icon */
.nbtv-chevron {
    flex-shrink: 0;
    color: rgba(255,255,255,.55);
    transition: transform .25s cubic-bezier(.4,0,.2,1), color .15s;
    margin-left: 2px;
}

.nbtv-league-open .nbtv-chevron    { transform: rotate(180deg); color: rgba(255,255,255,.85); }
.nbtv-league-collapsed .nbtv-chevron { transform: rotate(0deg); }

/* Hover state on header */
.nbtv-league-header:hover .nbtv-chevron { color: rgba(255,255,255,.9); }
.nbtv-league-header:hover { background: linear-gradient(135deg, #243350 0%, #2d3e5c 100%); }

/* ── League Body — collapsible ── */
.nbtv-league-body {
    overflow: hidden;
    transition: max-height .32s cubic-bezier(.4,0,.2,1), opacity .25s ease;
}

.nbtv-league-open .nbtv-league-body {
    max-height: 9999px;
    opacity: 1;
}

.nbtv-league-collapsed .nbtv-league-body {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

/* ── Favorite button on league header — eyecatching ── */
.nbtv-fav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    background: rgba(255,255,255,.18);
    border: 2px solid rgba(255,255,255,.55);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .15s;
    margin-left: 4px;
}

.nbtv-fav-btn:hover {
    background: rgba(249,115,22,.3);
    border-color: var(--nbtv-orange);
    color: var(--nbtv-orange);
    transform: scale(1.12);
}

.nbtv-fav-btn.nbtv-fav-active {
    background: var(--nbtv-orange);
    border-color: var(--nbtv-orange);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(249,115,22,.3);
}

.nbtv-fav-btn.nbtv-fav-active svg path {
    fill: #fff;
    stroke: #fff;
}

@keyframes nbtv-fav-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.35); }
    70%  { transform: scale(.88); }
    100% { transform: scale(1); }
}

.nbtv-fav-btn.nbtv-fav-pop { animation: nbtv-fav-pop .3s ease-out forwards; }

/* Favorites empty notice */
.nbtv-fav-notice {
    text-align: center;
    padding: 36px 16px;
    color: var(--nbtv-text-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
}

.nbtv-fav-notice-icon { font-size: 36px; opacity: .3; display: block; margin-bottom: 10px; }
.nbtv-fav-notice-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: rgba(249,115,22,.15);
    border: 1.5px solid var(--nbtv-orange-border);
    border-radius: 50%;
    font-size: 11px;
    color: var(--nbtv-orange);
    vertical-align: middle;
    margin: 0 2px;
}

/* ── Load More section ── */
.nbtv-load-more-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 10px 8px;
}

.nbtv-showing-info {
    font-family: var(--nbtv-font);
    font-size: 12px;
    font-weight: 500;
    color: var(--nbtv-text-muted);
    text-align: center;
    margin: 0;
    letter-spacing: .2px;
    text-transform: uppercase;
}

.nbtv-showing-info strong {
    color: var(--nbtv-text-primary);
    font-weight: 700;
}

.nbtv-load-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    max-width: 340px;
    padding: 13px 20px;
    background: var(--nbtv-orange);
    border: none;
    border-radius: var(--nbtv-radius-md);
    color: #fff;
    font-family: var(--nbtv-font-cond);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s, transform .15s, box-shadow .15s;
    box-shadow: 0 3px 12px rgba(249,115,22,.35);
}

.nbtv-load-more-btn svg {
    transition: transform .2s;
}

.nbtv-load-more-btn:hover {
    background: var(--nbtv-orange-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(249,115,22,.45);
}

.nbtv-load-more-btn:hover svg { transform: translateY(2px); }
.nbtv-load-more-btn:active    { transform: translateY(0); box-shadow: 0 2px 8px rgba(249,115,22,.3); }

/* ── All leagues shown notice ── */
.nbtv-showing-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 16px 8px;
    font-family: var(--nbtv-font);
    font-size: 12px;
    font-weight: 600;
    color: var(--nbtv-text-muted);
    text-transform: uppercase;
    letter-spacing: .3px;
}

.nbtv-showing-all svg { color: #22c55e; flex-shrink: 0; }

/* ─── MATCH CARD ──────────────────────────────────────────── */

.nbtv-match {
    position: relative;
    border-bottom: 1px solid var(--nbtv-border-match);
    transition: background .15s;
}

.nbtv-match:last-child           { border-bottom: none; }
.nbtv-match:hover                { background: #fffbf7; }
.nbtv-match.nbtv-search-hidden   { display: none; }

.nbtv-live-bar {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, var(--nbtv-live), #f87171);
    z-index: 1;
}

.nbtv-match.is-live       { background: #fff9f9; }
.nbtv-match.is-live:hover { background: #fef2f2; }

.nbtv-scoreboard,
.nbtv-match-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 12px 16px 14px;
    gap: 8px;
    flex-wrap: nowrap;
}

/* ─── TEAM ────────────────────────────────────────────────── */

.nbtv-team {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    min-width: 0;
    text-align: center;
}

.nbtv-team img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.10));
    transition: transform .2s;
}

.nbtv-match:hover .nbtv-team img { transform: scale(1.06); }

.nbtv-team-name,
.nbtv-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--nbtv-text-primary);
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3;
    letter-spacing: -.1px;
    max-width: 90px;
}

.nbtv-team-name.nbtv-winner,
.nbtv-name.nbtv-winner { color: var(--nbtv-winner); }

/* ─── CENTER ──────────────────────────────────────────────── */

.nbtv-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    min-width: 110px;
    text-align: center;
}

.nbtv-score {
    display: flex;
    align-items: center;
    gap: 2px;
}

.nbtv-score-num {
    font-family: var(--nbtv-font-cond);
    font-size: 42px;
    font-weight: 800;
    color: var(--nbtv-navy);
    min-width: 26px;
    text-align: center;
    line-height: 1;
    letter-spacing: -1px;
}

.nbtv-score-num.nbtv-score-win { color: var(--nbtv-orange); }

.nbtv-score-sep {
    font-family: var(--nbtv-mono);
    font-size: 20px;
    font-weight: 500;
    color: var(--nbtv-text-muted);
    line-height: 1;
    margin: 0 2px;
    opacity: .45;
}

/* ─── BADGES ──────────────────────────────────────────────── */

.nbtv-meta { line-height: 1; }

.nbtv-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--nbtv-font-cond);
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    letter-spacing: .4px;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid transparent;
}

.nbtv-badge-live {
    background: var(--nbtv-live);
    color: #fff;
    border-color: var(--nbtv-live);
    animation: nbtv-badge-glow 2s ease-in-out infinite;
}

@keyframes nbtv-badge-glow {
    0%, 100% { box-shadow: 0 2px 6px rgba(239,68,68,.3); }
    50%       { box-shadow: 0 2px 12px rgba(239,68,68,.55); }
}

.nbtv-badge-ft { background: var(--nbtv-ft-soft);  color: var(--nbtv-ft);  border-color: #cbd5e1; }
.nbtv-badge-ht { background: var(--nbtv-ht-soft);  color: var(--nbtv-ht);  border-color: #fde68a; }
.nbtv-badge-ns {
    background: var(--nbtv-orange-soft);
    color: var(--nbtv-orange);
    border-color: var(--nbtv-orange-border);
    font-family: var(--nbtv-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2px;
    text-transform: none;
}

.nbtv-pulse {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    animation: nbtv-pulse 1.4s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes nbtv-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .4; transform: scale(.6); }
}

/* ─── ERROR / EMPTY ───────────────────────────────────────── */

.nbtv-empty,
.nbtv-error {
    padding: 16px;
    border-radius: var(--nbtv-radius-md);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.nbtv-empty { background: var(--nbtv-ft-soft); color: var(--nbtv-ft); border: 1px solid #e2e8f0; }
.nbtv-error { background: var(--nbtv-live-soft); color: var(--nbtv-live); border: 1px solid var(--nbtv-live-border); }

/* ─── LOADING SKELETON ────────────────────────────────────── */

.nbtv-skeleton { display: flex; flex-direction: column; gap: 10px; padding: 10px; }

.nbtv-skel-league {
    background: var(--nbtv-surface);
    border-radius: var(--nbtv-radius-lg);
    border: 1px solid var(--nbtv-border);
    overflow: hidden;
}

.nbtv-skel-header { height: 38px; border-bottom: 1px solid var(--nbtv-border-match); }
.nbtv-skel-row    { height: 90px; border-bottom: 1px solid var(--nbtv-border-match); }
.nbtv-skel-row:last-child { border-bottom: none; }

.nbtv-skel-header,
.nbtv-skel-row {
    background: linear-gradient(90deg, #f1f3f6 25%, #e8eaed 50%, #f1f3f6 75%);
    background-size: 200% 100%;
    animation: nbtv-shimmer 1.4s infinite;
}

@keyframes nbtv-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ─── RESPONSIVE: TABLET (≤768px) ────────────────────────── */

@media (max-width: 768px) {
    .nbtv-content       { padding: 8px; gap: 8px; }
    .nbtv-scoreboard,
    .nbtv-match-inner   { padding: 14px 8px 14px 10px; gap: 6px; }
    .nbtv-team img      { width: 48px; height: 48px; }
    .nbtv-team-name,
    .nbtv-name          { font-size: 11.5px; max-width: 80px; }
    .nbtv-score-num     { font-size: 36px; min-width: 22px; }
    .nbtv-center        { min-width: 96px; }
    .nbtv-league-name,
    .nbtv-league-header > span { font-size: 14px; }
    .nbtv-skel-row      { height: 82px; }
    .nbtv-fixture-badge { font-size: 9px; padding: 2px 5px; }
}

/* ─── RESPONSIVE: MOBILE (≤480px) ────────────────────────── */

@media (max-width: 480px) {
    .nbtv-header        { padding: 10px 12px; gap: 8px; }
    .nbtv-header-title  { font-size: 16px; }
    .nbtv-header-sub    { font-size: 10px; }
    .nbtv-load-btn      { font-size: 12px; padding: 6px 10px; }
    .nbtv-live-counter  { font-size: 10px; padding: 3px 7px; }
    .nbtv-live-count    { font-size: 11px; }

    /* Date nav: kompak, fav tab hanya ikon */
    .nbtv-date-nav      { padding: 0 4px; }
    .nbtv-date-arrow    { width: 30px; height: 40px; }
    .nbtv-date-label    { font-size: 13px; }
    .nbtv-date-label::after { width: 3px; height: 3px; margin: 0 6px; }
    .nbtv-date-value    { font-size: 12px; }
    .nbtv-today-btn     { font-size: 10px; padding: 3px 7px; }

    /* Fav tab: hanya ikon bulat di mobile */
    .nbtv-fav-tab {
        width: 34px;
        height: 34px;
        padding: 0;
        border-radius: 50%;
        margin-left: 4px;
    }
    .nbtv-fav-tab span  { display: none; }

    .nbtv-content       { padding: 6px; gap: 6px; }
    .nbtv-scoreboard,
    .nbtv-match-inner   { padding: 12px 6px 12px 8px; gap: 4px; }
    .nbtv-team img      { width: 40px; height: 40px; }
    .nbtv-team-name,
    .nbtv-name          { font-size: 10.5px; max-width: 68px; }
    .nbtv-score-num     { font-size: 32px; min-width: 20px; letter-spacing: -.5px; }
    .nbtv-score-sep     { font-size: 16px; margin: 0 1px; }
    .nbtv-center        { min-width: 82px; gap: 4px; }
    .nbtv-badge         { font-size: 9.5px; padding: 2px 7px; }
    .nbtv-badge-ns      { font-size: 10px; }
    .nbtv-league-header { padding: 7px 8px 7px 10px; }
    .nbtv-league-header img  { width: 16px; height: 16px; }
    .nbtv-league-name,
    .nbtv-league-header > span { font-size: 12px; }
    .nbtv-fav-btn       { width: 26px; height: 26px; }
    .nbtv-skel-row      { height: 76px; }
    .nbtv-fixture-badge { display: none; }
    .nbtv-load-more-btn { font-size: 13px; padding: 12px 16px; }
    .nbtv-showing-info  { font-size: 11px; }
}

/* ─── RESPONSIVE: TINY (≤360px) ──────────────────────────── */

@media (max-width: 360px) {
    .nbtv-header-title  { font-size: 14px; }
    .nbtv-scoreboard,
    .nbtv-match-inner   { padding: 10px 4px; gap: 2px; }
    .nbtv-team img      { width: 34px; height: 34px; }
    .nbtv-team-name,
    .nbtv-name          { font-size: 10px; max-width: 60px; }
    .nbtv-score-num     { font-size: 28px; min-width: 18px; }
    .nbtv-score-sep     { font-size: 14px; }
    .nbtv-center        { min-width: 74px; }
    .nbtv-today-btn     { display: none; }
    .nbtv-date-label    { font-size: 12px; }
    .nbtv-date-label::after { width: 3px; height: 3px; margin: 0 5px; }
    .nbtv-date-value    { font-size: 11px; }
}

/* ─── ARTICLE LINK STRIP ──────────────────────────────────── */

.nbtv-article-link {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px 8px 14px;
    background: #eef6ff;
    border-top: 2px solid #bfdbfe;
    border-bottom: none;
    color: #1d4ed8;
    font-family: var(--nbtv-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1px;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, color .15s, padding-left .15s, border-color .15s;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    text-align: left;
    line-height: 1.3;
}

.nbtv-article-link:hover:not(:disabled),
.nbtv-article-link:focus-visible {
    background: #dbeafe;
    color: #1e40af;
    padding-left: 17px;
    border-color: #93c5fd;
}

.nbtv-article-link:disabled { cursor: not-allowed; opacity: .65; }

/* Left icon */
.nbtv-article-link > svg:first-child {
    flex-shrink: 0;
    color: #3b82f6;
}

/* Right arrow */
.nbtv-article-link > svg:last-child {
    margin-left: auto;
    flex-shrink: 0;
    opacity: .6;
    transition: transform .15s;
}

.nbtv-article-link:hover > svg:last-child { transform: translate(2px,-2px); }

.nbtv-article-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Pending — artikel belum ada */
.nbtv-article-pending {
    background: #fff7ed;
    border-top-color: #fdba74;
    color: #c2410c;
}

.nbtv-article-pending > svg:first-child { color: var(--nbtv-orange); }

.nbtv-article-pending:hover:not(:disabled) {
    background: #ffedd5;
    color: #9a3412;
    border-color: #f97316;
    padding-left: 17px;
}

/* Newly created — flash hijau */
.nbtv-article-new {
    background: #f0fdf4;
    border-top-color: #86efac;
    color: #15803d;
    animation: nbtv-article-flash .7s ease-out forwards;
}

@keyframes nbtv-article-flash {
    0%   { background: #dcfce7; border-color: #4ade80; }
    100% { background: #f0fdf4; border-color: #86efac; }
}

/* Live matches — strip merah mencolok */
.nbtv-match.is-live .nbtv-article-link:not(.nbtv-article-pending) {
    background: #fef2f2;
    border-top-color: #fca5a5;
    color: #b91c1c;
}

.nbtv-match.is-live .nbtv-article-link:not(.nbtv-article-pending) > svg:first-child {
    color: var(--nbtv-live);
}

.nbtv-match.is-live .nbtv-article-link:not(.nbtv-article-pending):hover {
    background: #fee2e2;
    border-color: #f87171;
}

/* ─── RESPONSIVE ──────────────────────────────────────────── */

@media (max-width: 480px) {
    .nbtv-article-link      { font-size: 11px; padding: 7px 10px 7px 12px; gap: 6px; }
}

@media (max-width: 360px) {
    .nbtv-article-link      { font-size: 10px; padding: 6px 8px; }
}

/* ─── LIGA PILIHAN BADGE ───────────────────────────────────── */

.nbtv-featured-badge {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    line-height: 1;
    margin-right: 2px;
    flex-shrink: 0;
    /* subtle glow agar tidak terlalu mencolok */
    filter: drop-shadow(0 0 3px rgba(250, 204, 21, 0.6));
}