.leagues-page main { min-height: 72vh; }
.leagues-hero { padding: 38px 0 18px; }
.leagues-hero-inner { padding: clamp(22px, 4vw, 38px); border: 1px solid var(--border); border-radius: 22px; background: radial-gradient(circle at 86% 12%, rgba(84,214,140,.15), transparent 35%), linear-gradient(145deg, rgba(18,31,52,.98), rgba(8,18,32,.98)); box-shadow: var(--shadow); }
.leagues-hero h1 { margin: 0 0 10px; font-size: clamp(1.9rem, 4.8vw, 3.6rem); line-height: 1.03; letter-spacing: -1.8px; }
.leagues-hero p { max-width: 760px; margin: 0; color: var(--muted); line-height: 1.6; font-size: clamp(.94rem, 2vw, 1.06rem); }
.leagues-shell { display: grid; grid-template-columns: 305px minmax(0,1fr); gap: 18px; padding: 16px 0 50px; align-items: start; }
.league-main { min-width: 0; display: grid; gap: 16px; }
.league-sidebar { position: sticky; top: 82px; display: grid; gap: 14px; }
.league-card, .league-sidebar-card { border: 1px solid var(--border); border-radius: 18px; background: linear-gradient(180deg, rgba(23,36,58,.96), rgba(18,28,46,.96)); box-shadow: var(--shadow); }
.league-header-card { padding: 20px; }
.league-header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.league-identity { display: flex; align-items: center; gap: 14px; min-width: 0; }
.league-identity-copy { min-width: 0; }
.league-logo-wrap { width: 64px; height: 64px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 16px; background: rgba(255,255,255,.95); overflow: hidden; }
.league-logo-wrap img { width: 52px; height: 52px; object-fit: contain; }
.league-logo-fallback { color: #0b1220; font-weight: 950; font-size: 1.1rem; }
.league-kicker { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; color: var(--muted); font-size: .76rem; font-weight: 760; }
.league-country-flag { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; }
.league-identity h2 { margin: 0; font-size: clamp(1.35rem, 3vw, 2rem); line-height: 1.1; }
.league-season-control { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--muted); font-size: .75rem; }
.league-season-control select { border: 1px solid var(--border); border-radius: 8px; padding: 5px 28px 5px 8px; background: #0d1728; color: var(--text); font: inherit; }
.league-header-actions { display: flex; gap: 8px; align-items: center; }
.league-live-link { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; padding: 0 13px; border: 1px solid rgba(84,214,140,.35); border-radius: 11px; color: var(--accent); background: rgba(84,214,140,.06); font-size: .73rem; font-weight: 850; }
.league-live-link:hover { background: rgba(84,214,140,.12); }
.league-favourite-button { width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 11px; background: rgba(8,17,29,.55); color: var(--muted); font-size: 1.1rem; cursor: pointer; }
.league-favourite-button.is-favourite { color: #ffd66b; border-color: rgba(255,214,107,.42); background: rgba(255,214,107,.08); }
.league-data-status { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--border); color: var(--muted); font-size: .72rem; }
.data-badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 5px 8px; border: 1px solid rgba(84,214,140,.3); color: var(--accent); background: rgba(84,214,140,.06); font-weight: 850; }
.data-badge.demo { color: #f8c15c; border-color: rgba(248,193,92,.34); background: rgba(248,193,92,.07); }
.league-summary-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 17px; }
.league-summary-item { min-width: 0; padding: 13px; border: 1px solid var(--border); border-radius: 13px; background: rgba(8,17,29,.42); }
.league-summary-item span { display: block; color: var(--muted); font-size: .66rem; margin-bottom: 7px; text-transform: uppercase; letter-spacing: .04em; }
.league-summary-item strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .94rem; }
.league-section { overflow: hidden; }
.league-section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 17px 19px; border-bottom: 1px solid var(--border); }
.league-section-head h2 { margin: 0; font-size: 1.04rem; }
.league-section-head span { color: var(--muted); font-size: .7rem; }
.league-error { padding: 11px 14px; border: 1px solid rgba(217,85,85,.36); border-radius: 12px; background: rgba(217,85,85,.08); color: #ffb2b2; font-size: .76rem; line-height: 1.5; }
.standings-scroll { overflow-x: auto; }
.standings-table { width: 100%; border-collapse: collapse; min-width: 710px; }
.standings-table th, .standings-table td { padding: 10px 9px; border-bottom: 1px solid rgba(38,55,82,.75); text-align: center; font-size: .75rem; }
.standings-table th { color: var(--muted); background: rgba(8,17,29,.48); font-size: .62rem; letter-spacing: .04em; text-transform: uppercase; }
.standings-table th:nth-child(2), .standings-table td:nth-child(2) { text-align: left; }
.standings-table tbody tr:last-child td { border-bottom: 0; }
.standings-table tbody tr:hover { background: rgba(84,214,140,.035); }
.standing-rank { font-weight: 900; color: var(--muted); }
.standing-team { display: flex; align-items: center; gap: 9px; min-width: 180px; color: var(--text); font-weight: 800; }
.standing-team:hover { color: var(--accent); }
.standing-team img, .team-logo-fallback { width: 26px; height: 26px; object-fit: contain; flex: 0 0 auto; }
.team-logo-fallback { display: grid; place-items: center; border-radius: 50%; background: rgba(84,214,140,.12); color: var(--accent); font-size: .65rem; }
.standing-points { color: var(--accent); font-weight: 950; }
.form-list { display: flex; justify-content: center; gap: 3px; }
.form-pill { width: 19px; height: 19px; display: grid; place-items: center; border-radius: 5px; font-size: .55rem; font-weight: 950; }
.form-w { color: #07120c; background: var(--accent); }.form-d { color: #181204; background: #f8c15c; }.form-l { color: #fff; background: #d95555; }
.standings-group + .standings-group { border-top: 8px solid rgba(8,17,29,.55); }
.standings-group-title { margin: 0; padding: 12px 17px; color: var(--muted); font-size: .74rem; background: rgba(8,17,29,.28); }
.fixture-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 15px; }
.fixture-column h3 { margin: 0 0 10px; font-size: .84rem; }
.fixture-list { display: grid; gap: 8px; }
.fixture-card { padding: 11px; border: 1px solid var(--border); border-radius: 12px; background: rgba(8,17,29,.42); }
.fixture-meta { display: flex; justify-content: space-between; gap: 9px; color: var(--muted); font-size: .64rem; margin-bottom: 8px; }
.fixture-meta a { color: var(--muted); }.fixture-meta a:hover { color: var(--accent); }
.fixture-teams { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; }
.fixture-team-list { display: grid; gap: 6px; min-width: 0; }
.fixture-team { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--text); font-size: .75rem; font-weight: 760; }
.fixture-team:hover { color: var(--accent); }
.fixture-team img { width: 22px; height: 22px; object-fit: contain; }
.fixture-team span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fixture-score { min-width: 50px; text-align: center; color: var(--text); font-weight: 950; font-size: 1.02rem; }
.fixture-score:hover { color: var(--accent); }
.fixture-upcoming { color: var(--accent); font-size: .78rem; }
.league-empty { padding: 25px 17px; color: var(--muted); text-align: center; line-height: 1.55; }
.league-loading-copy { min-height: 90px; display: grid; place-items: center; }
.league-sidebar-card { padding: 15px; }
.league-sidebar-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.league-sidebar-title h2 { margin: 0; font-size: .98rem; }
.league-count { color: var(--muted); font-size: .68rem; }
.league-search { width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: 11px; background: #0d1728; color: var(--text); outline: 0; }
.league-search:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(84,214,140,.09); }
.league-filter-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 11px; }
.league-filter { border: 1px solid var(--border); border-radius: 999px; padding: 7px 9px; background: rgba(8,17,29,.48); color: var(--muted); font-size: .63rem; font-weight: 820; cursor: pointer; }
.league-filter.active { color: #07120c; background: var(--accent); border-color: transparent; }
.league-list { display: grid; gap: 9px; max-height: 630px; overflow-y: auto; padding-right: 3px; }
.league-country-group { display: grid; gap: 4px; }
.league-country-heading { display: flex; justify-content: space-between; gap: 8px; padding: 7px 7px 5px; color: var(--muted); font-size: .64rem; text-transform: uppercase; letter-spacing: .035em; }
.league-country-heading span { font-size: .58rem; opacity: .8; }
.league-country-list { display: grid; gap: 3px; }
.league-list-button { width: 100%; display: grid; grid-template-columns: 35px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 7px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.league-list-button:hover { background: rgba(84,214,140,.06); }
.league-list-button.active { border-color: rgba(84,214,140,.35); background: rgba(84,214,140,.09); }
.league-list-logo { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.94); overflow: hidden; color: #0b1220; font-size: .62rem; font-weight: 900; }
.league-list-logo img { width: 27px; height: 27px; object-fit: contain; }
.league-list-name { min-width: 0; }
.league-list-name strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .73rem; }
.league-list-name small { display: block; margin-top: 2px; color: var(--muted); font-size: .59rem; }
.league-star { color: #ffd66b; font-size: .7rem; }
.league-sidebar-note { margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.55; }
.league-loading { min-height: 300px; display: grid; place-items: center; color: var(--muted); text-align: center; }
.league-spinner { width: 34px; height: 34px; margin: 0 auto 12px; border: 3px solid rgba(84,214,140,.16); border-top-color: var(--accent); border-radius: 50%; animation: league-spin .8s linear infinite; }
@keyframes league-spin { to { transform: rotate(360deg); } }
@media (max-width: 1000px) { .leagues-shell { grid-template-columns: 1fr; } .league-sidebar { position: static; order: -1; } .league-list { max-height: 340px; } }
@media (max-width: 700px) { .leagues-hero { padding-top: 26px; } .leagues-hero h1 { letter-spacing: -1.1px; } .league-header-card { padding: 16px; } .league-header-top { flex-direction: column; } .league-header-actions { width: 100%; } .league-live-link { flex: 1; } .league-summary-grid { grid-template-columns: repeat(2,1fr); } .fixture-columns { grid-template-columns: 1fr; } .league-data-status { align-items: flex-start; flex-direction: column; } .standings-table .optional-col { display: none; } }

/* Keep the initial loading card out of the layout after league selection. */
.league-loading[hidden],
#leagueLoadedContent[hidden] {
  display: none !important;
}