:root {
  --league-gold: #f7c948;
  --league-amber: #ff8a3d;
  --league-violet: #6d46c7;
  --league-ink: #100c1c;
  --league-panel: rgba(25, 18, 43, .94);
}

body.leagues-page {
  color: #f8f5ff;
  background: radial-gradient(circle at 10% 0%, #39235f 0, transparent 38%), radial-gradient(circle at 90% 15%, #553018 0, transparent 30%), #0d0915;
  min-height: 100vh;
}

.league-shell { max-width: 1240px; margin: 0 auto; padding: 3rem 1.25rem 5rem; }
.league-title { font-family: Georgia, serif; letter-spacing: .03em; }
.league-kicker { color: var(--league-gold); font-weight: 800; letter-spacing: .18em; text-transform: uppercase; font-size: .76rem; }
.league-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.4rem; }
.league-card, .league-panel, .date-card {
  background: var(--league-panel);
  border: 1px solid rgba(247, 201, 72, .25);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .32);
}
.league-card { color: inherit; text-decoration: none; transition: transform .2s ease, border-color .2s ease; }
.league-card:hover, .league-card:focus-visible { color: inherit; transform: translateY(-6px); border-color: var(--league-gold); outline: none; }
.league-card-banner, .date-card-banner { position: relative; background: linear-gradient(135deg, var(--league-violet), #241335); background-size: cover; background-position: center; }
.league-card-banner { height: 190px; }
.league-card-banner::after, .date-card-banner::after, .league-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 25%, rgba(13, 9, 21, .92)); }
.league-card-body { padding: 1.3rem; }
.league-status { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border-radius: 999px; background: rgba(247, 201, 72, .14); color: var(--league-gold); font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.league-progress { height: 7px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.league-progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--league-amber), var(--league-gold)); }
.league-hero { min-height: 430px; position: relative; display: flex; align-items: end; background: linear-gradient(135deg, #503080, #1a102b); background-size: cover; background-position: center; }
.league-hero-content { position: relative; z-index: 1; width: 100%; padding: clamp(2rem, 6vw, 5rem); }
.league-hero h1 { font-size: clamp(2.5rem, 7vw, 5.5rem); max-width: 900px; text-shadow: 0 7px 30px rgba(0,0,0,.7); }
.league-metrics { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.4rem; }
.league-metric { padding: .75rem 1rem; border-radius: 13px; background: rgba(10,7,17,.72); border: 1px solid rgba(255,255,255,.14); }
.league-panel { padding: clamp(1.2rem, 3vw, 2rem); }
.date-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.date-card { display: flex; flex-direction: column; }
.date-card-banner { height: 155px; }
.date-number { position: absolute; z-index: 2; left: 1rem; top: 1rem; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; color: #1b1126; background: var(--league-gold); font-size: 1.35rem; font-weight: 900; box-shadow: 0 5px 20px rgba(247,201,72,.35); }
.date-card-content { padding: 1.2rem; flex: 1; display: flex; flex-direction: column; }
.date-card-content .btn { margin-top: auto; }
.leaderboard-wrap { overflow-x: auto; }
.league-table { width: 100%; border-collapse: separate; border-spacing: 0 .55rem; min-width: 700px; }
.league-table th { padding: .7rem 1rem; color: #bcb4ca; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.league-table td { padding: .9rem 1rem; background: rgba(255,255,255,.055); }
.league-table td:first-child { border-radius: 12px 0 0 12px; font-weight: 900; }
.league-table td:last-child { border-radius: 0 12px 12px 0; }
.league-table tr.podium td { background: linear-gradient(90deg, rgba(247,201,72,.18), rgba(255,255,255,.055)); }
.league-table tr.is-me td { outline: 1px solid #a98aff; outline-offset: -1px; }
.league-avatar { width: 36px; height: 36px; object-fit: cover; border-radius: 50%; background: #533b73; }
.league-prize { display: grid; grid-template-columns: 2rem 64px minmax(0, 1fr); gap: .85rem; align-items: center; }
.league-prize-no-media { grid-template-columns: 2rem minmax(0, 1fr); }
.league-prize-media { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; background: rgba(255,255,255,.06); }
.league-prize-copy { min-width: 0; overflow-wrap: anywhere; }
.league-form label { color: #d9d1e5; font-weight: 700; }
.league-form .form-control, .league-form .form-select { color: #fff; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); }
.league-form .form-control:focus, .league-form .form-select:focus { background: rgba(255,255,255,.1); color: #fff; border-color: var(--league-gold); box-shadow: 0 0 0 .2rem rgba(247,201,72,.15); }
.league-form .form-select option { color: #111; }
.empty-league { text-align: center; padding: 5rem 1rem; color: #bdb4ca; }

.league-admin-shell { max-width: 1480px; }
.league-admin-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.league-admin-sidebar { position: sticky; top: 1.25rem; padding: 1rem; }
.league-admin-cover { width: 100%; height: 145px; border-radius: 14px; object-fit: cover; background: linear-gradient(135deg, var(--league-violet), #241335); }
.league-admin-cover-placeholder { display: grid; place-items: center; color: rgba(247,201,72,.7); font-size: 2.4rem; }
.league-admin-stats { display: grid; gap: .6rem; margin-top: 1.25rem; }
.league-admin-stats > div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem .8rem; border-radius: 10px; background: rgba(255,255,255,.055); }
.league-admin-stats span { color: #bdb4ca; font-size: .82rem; }
.league-admin-main { min-width: 0; }
.league-admin-tabs { display: flex; gap: .45rem; padding: .45rem; margin-bottom: 1rem; overflow-x: auto; border: 1px solid rgba(247,201,72,.2); border-radius: 15px; background: rgba(20,14,34,.9); }
.league-admin-tabs button, .league-config-tabs button { border: 0; color: #cfc7db; background: transparent; font-weight: 750; transition: color .15s ease, background .15s ease; }
.league-admin-tabs button { flex: 1; min-width: max-content; padding: .8rem 1rem; border-radius: 11px; }
.league-admin-tabs button i { margin-right: .5rem; }
.league-admin-tabs button:hover, .league-admin-tabs button:focus-visible, .league-admin-tabs button.active { color: #171020; background: var(--league-gold); outline: none; }
.league-admin-tab-panel[hidden], [data-config-panel][hidden] { display: none !important; }
.league-config-tabs { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.2rem 0 1.5rem; padding-bottom: .8rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.league-config-tabs button { padding: .55rem .8rem; border-radius: 9px; }
.league-config-tabs button:hover, .league-config-tabs button:focus-visible, .league-config-tabs button.active { color: var(--league-gold); background: rgba(247,201,72,.12); outline: 1px solid rgba(247,201,72,.4); }
.league-date-count { padding: .45rem .7rem; color: var(--league-gold); border-radius: 10px; background: rgba(247,201,72,.1); }
.league-admin-date-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; }
.league-admin-date-card { min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(255,255,255,.045); }
.league-admin-date-banner { position: relative; height: 90px; background: linear-gradient(135deg, var(--league-violet), #241335); background-position: center; background-size: cover; }
.league-admin-date-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,9,21,.05), rgba(13,9,21,.85)); }
.league-admin-date-number, .league-admin-date-status { position: absolute; z-index: 1; padding: .28rem .5rem; border-radius: 7px; font-size: .68rem; font-weight: 850; text-transform: uppercase; }
.league-admin-date-number { left: .6rem; bottom: .55rem; color: #1b1126; background: var(--league-gold); }
.league-admin-date-status { right: .6rem; top: .55rem; color: #fff; background: rgba(13,9,21,.82); }
.league-admin-date-origin { position: absolute; z-index: 1; right: .6rem; bottom: .55rem; padding: .28rem .5rem; color: #fff; border: 1px solid rgba(255,255,255,.24); border-radius: 7px; background: rgba(13,9,21,.82); font-size: .68rem; font-weight: 750; }
.league-admin-date-origin i { margin-right: .3rem; color: var(--league-gold); }
.league-admin-date-body { min-height: 150px; display: flex; flex-direction: column; padding: .75rem; }
.league-admin-date-body h3 { margin-bottom: .55rem; overflow: hidden; color: #fff; font-size: .98rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.league-admin-date-meta { display: grid; gap: .25rem; margin-bottom: .7rem; color: #bdb4ca; font-size: .74rem; }
.league-admin-date-meta i { width: 1rem; color: var(--league-gold); }
.league-admin-empty { padding: 3.5rem 1rem; text-align: center; color: #bdb4ca; }
.league-admin-empty > i { display: block; margin-bottom: .8rem; color: var(--league-gold); font-size: 2.2rem; }
.league-administrator-list { display: grid; gap: .6rem; margin-top: 1.2rem; }
.league-administrator-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .7rem; border: 1px solid rgba(255,255,255,.12); border-radius: 11px; background: rgba(0,0,0,.2); }
.league-administrator-avatar, .league-admin-search-item img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: #533b73; }
.league-administrator-identity { min-width: 0; display: flex; flex-direction: column; }
.league-administrator-identity span { overflow: hidden; color: #aaa1b8; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.league-admin-search-results { display: grid; gap: .4rem; margin-top: .5rem; color: #bdb4ca; }
.league-admin-search-item { width: 100%; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: .7rem; align-items: center; padding: .55rem .7rem; color: #fff; text-align: left; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(0,0,0,.28); }
.league-admin-search-item:hover, .league-admin-search-item:focus-visible { border-color: var(--league-gold); outline: none; }
.league-admin-search-item img { width: 38px; height: 38px; }
.league-admin-search-item span { min-width: 0; display: flex; flex-direction: column; }
.league-admin-search-item small { overflow: hidden; color: #aaa1b8; text-overflow: ellipsis; white-space: nowrap; }
.league-attachable-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 1rem; align-items: end; margin: 1.25rem 0; }
.league-attachable-status { min-height: 1.5rem; margin-bottom: .75rem; color: #bdb4ca; }
.league-attachable-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; }
.league-attachable-card { min-width: 0; padding: 0; overflow: hidden; color: #fff; text-align: left; border: 2px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(255,255,255,.045); transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.league-attachable-card:hover { border-color: rgba(247,201,72,.65); transform: translateY(-2px); }
.league-attachable-card:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-color: var(--league-gold); }
.league-attachable-card.selected { border-color: var(--league-gold); box-shadow: 0 0 0 3px rgba(247,201,72,.18); }
.league-attachable-media { position: relative; height: 105px; display: grid; place-items: center; overflow: hidden; color: rgba(247,201,72,.72); background: linear-gradient(135deg, var(--league-violet), #241335); font-size: 2rem; }
.league-attachable-media img { width: 100%; height: 100%; object-fit: cover; }
.league-attachable-badge { position: absolute; top: .55rem; right: .55rem; padding: .28rem .5rem; color: #fff; border-radius: 7px; background: rgba(13,9,21,.86); font-size: .68rem; font-weight: 850; text-transform: uppercase; }
.league-attachable-body { min-height: 118px; display: flex; flex-direction: column; gap: .35rem; padding: .8rem; }
.league-attachable-body strong { overflow: hidden; font-size: .96rem; text-overflow: ellipsis; white-space: nowrap; }
.league-attachable-body span { overflow: hidden; color: #bdb4ca; font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }
.league-attachable-pagination { min-height: 44px; display: flex; justify-content: center; align-items: center; gap: .8rem; margin-top: 1rem; color: #d9d1e5; }
.league-attachable-pagination .btn { min-height: 44px; }

@media (max-width: 1199.98px) {
  .league-admin-date-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .league-attachable-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  .date-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .league-admin-layout { grid-template-columns: 1fr; }
  .league-admin-sidebar { position: static; }
  .league-admin-cover { height: 190px; }
}
@media (max-width: 767.98px) {
  .date-grid { grid-template-columns: 1fr; }
  .league-shell { padding-top: 2rem; }
  .league-hero { min-height: 360px; }
  .league-hero-content { padding: 1.4rem; }
  .league-admin-date-grid { grid-template-columns: 1fr; }
  .league-attachable-grid { grid-template-columns: 1fr; }
  .league-attachable-toolbar { grid-template-columns: 1fr; }
  .league-admin-tabs button { padding-inline: .75rem; }
  .league-admin-tabs button i { display: none; }
}