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

* {
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
}

body {
margin: 0;
background: #05070b;
color: #ffffff;
font-family: "Inter", Arial, sans-serif;
}

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

.site-header {
position: sticky;
top: 0;
z-index: 1000;
background: rgba(5, 7, 11, 0.92);
border-bottom: 1px solid rgba(255,255,255,.07);
backdrop-filter: blur(18px);
}

.header-inner {
max-width: 1200px;
margin: auto;
min-height: 72px;
padding: 0 24px;

display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;

}

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

.logo {
display: flex;
align-items: center;
gap: 10px;

color: #ffffff;
text-decoration: none;

font-size: 21px;
font-weight: 900;
letter-spacing: -0.7px;

white-space: nowrap;

}

.logo > span:last-child > span {
color: #00e676;
}

.logo-mark {
width: 38px;
height: 38px;

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

border-radius: 11px;

background: rgba(0,230,118,.12);

font-size: 21px;

}

/* ==========================================
DESKTOP NAV
========================================== */

.desktop-nav {
display: flex;
align-items: center;
gap: 6px;
}

.desktop-nav a {
padding: 9px 13px;

border-radius: 9px;

color: #9ba5b3;

text-decoration: none;

font-size: 13px;
font-weight: 700;

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

}

.desktop-nav a:hover {
color: #ffffff;
background: rgba(255,255,255,.05);
}

.desktop-nav a.active {
color: #00e676;
background: rgba(0,230,118,.10);
}

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

.header-actions {
display: flex;
align-items: center;
gap: 10px;
}

.search-button,
.menu-button {
width: 40px;
height: 40px;

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

background: rgba(255,255,255,.04);
color: #ffffff;

cursor: pointer;

font-size: 17px;

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

}

.search-button:hover,
.menu-button:hover {
background: rgba(255,255,255,.08);
transform: translateY(-1px);
}

.menu-button {
display: none;
}

/* ==========================================
PROFILE
========================================== */

.profile-button {
width: 40px;
height: 40px;

position: relative;

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

overflow: hidden;

border-radius: 50%;

background: #111821;

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

text-decoration: none;

}

.profile-initial {
color: #ffffff;
font-weight: 900;
font-size: 14px;
}

.profile-image {
width: 100%;
height: 100%;

object-fit: cover;

}

/* ==========================================
SEARCH BAR
========================================== */

.search-bar {
max-height: 0;
overflow: hidden;

opacity: 0;

border-top: 1px solid transparent;

transition:
    max-height .3s ease,
    opacity .25s ease,
    padding .3s ease;

}

.search-bar.open {
max-height: 100px;
opacity: 1;

padding: 12px 24px;

border-top-color:
    rgba(255,255,255,.06);

}

.search-inner {
max-width: 1200px;
margin: auto;

display: flex;
gap: 10px;

}

.search-inner input {
flex: 1;

min-width: 0;

padding: 12px 14px;

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

outline: none;

background: #101620;
color: #ffffff;

font-family: inherit;

}

.search-inner input::placeholder {
color: #66717f;
}

.search-inner input:focus {
border-color: rgba(0,230,118,.45);
}

.search-inner button,
.team-search button {
padding: 0 16px;

border: 0;
border-radius: 10px;

background: #00e676;
color: #031009;

font-weight: 800;

cursor: pointer;

}

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

.mobile-menu {
display: none;
}

.mobile-menu.open {
display: flex;
flex-direction: column;

padding: 10px 20px 18px;

border-top: 1px solid rgba(255,255,255,.06);

}

.mobile-menu a {
padding: 13px 10px;

color: #aab3bf;

text-decoration: none;

font-size: 14px;
font-weight: 700;

border-radius: 9px;

}

.mobile-menu a:hover,
.mobile-menu a.active {
color: #00e676;
background: rgba(0,230,118,.08);
}

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

main {
max-width: 1200px;
margin: auto;
}

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

.page-hero {
min-height: 330px;

padding: 70px 24px;

display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;

position: relative;
overflow: hidden;

}

.page-hero::before {
content: "";

position: absolute;

width: 420px;
height: 420px;

right: -150px;
top: -170px;

border-radius: 50%;

background:
    radial-gradient(
        circle,
        rgba(0,230,118,.14),
        transparent 68%
    );

pointer-events: none;

}

.page-kicker,
.section-kicker {
color: #00e676;

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

letter-spacing: 1.5px;

}

.page-hero h1 {
margin: 14px 0 16px;

font-size: clamp(48px, 8vw, 82px);

line-height: .95;

letter-spacing: -4px;

}

.page-hero h1 span {
color: #00e676;
}

.page-hero p {
max-width: 560px;

margin: 0;

color: #8c97a5;

font-size: 16px;
line-height: 1.7;

}

.league-badge {
width: 120px;
height: 120px;

flex-shrink: 0;

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

border-radius: 30px;

background:
    linear-gradient(
        145deg,
        rgba(0,230,118,.16),
        rgba(255,255,255,.03)
    );

border: 1px solid rgba(0,230,118,.18);

font-size: 58px;

box-shadow:
    0 25px 80px rgba(0,0,0,.35);

}

/* ==========================================
TABLE SECTION
========================================== */

.table-section {
padding: 20px 24px 80px;
}

.table-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;

margin-bottom: 20px;

}

.table-header h2 {
margin: 7px 0 0;

font-size: 30px;
letter-spacing: -1px;

}

.table-status {
color: #8490a0;

font-size: 13px;
font-weight: 700;

}

/* ==========================================
TEAM SEARCH
========================================== */

.team-search {
display: flex;
gap: 10px;

margin-bottom: 16px;

}

.team-search input {
flex: 1;

min-width: 0;

padding: 13px 15px;

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

outline: none;

background: #101620;
color: #ffffff;

font-family: inherit;
font-size: 14px;

}

.team-search input::placeholder {
color: #66717f;
}

.team-search input:focus {
border-color: rgba(0,230,118,.45);
}

/* ==========================================
TABLE WRAPPER
========================================== */

.table-wrapper {
overflow-x: auto;

border: 1px solid rgba(255,255,255,.07);
border-radius: 16px;

background: #0d1219;

box-shadow:
    0 20px 60px rgba(0,0,0,.20);

}

table {
width: 100%;

min-width: 760px;

border-collapse: collapse;

}

thead {
background: #101720;
}

th {
padding: 15px 14px;

color: #707b89;

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

text-align: left;

text-transform: uppercase;
letter-spacing: .8px;

white-space: nowrap;

}

td {
padding: 16px 14px;

border-top: 1px solid rgba(255,255,255,.055);

color: #c6cdd6;

font-size: 13px;

white-space: nowrap;

}

.team-row {
cursor: pointer;

outline: none;

transition:
    background .18s ease,
    transform .18s ease;

}

.team-row:hover {
background: rgba(0,230,118,.045);
}

.team-row:focus-visible {
background: rgba(0,230,118,.08);

box-shadow:
    inset 3px 0 0 #00e676;

}

.position {
width: 50px;

color: #798492;

font-weight: 900;

}

.team-cell {
min-width: 250px;
}

.team-info {
display: flex;
align-items: center;
gap: 13px;
}

.team-info > div:last-child {
display: flex;
flex-direction: column;
gap: 3px;
}

.team-info strong {
color: #ffffff;

font-size: 13px;
font-weight: 800;

}

.team-info span {
color: #697482;

font-size: 10px;
font-weight: 700;

text-transform: uppercase;

}

.team-badge {
width: 38px;
height: 38px;

flex-shrink: 0;

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

border-radius: 10px;

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

}

.team-badge img {
width: 30px;
height: 30px;

object-fit: contain;

}

.points {
color: #00e676;

font-weight: 900;

}

.positive {
color: #00e676;

font-weight: 800;

}

.negative {
color: #ff5d6c;

font-weight: 800;

}

.neutral {
color: #8490a0;

font-weight: 700;

}

/* ==========================================
TABLE NOTE
========================================== */

.table-note {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;

margin-top: 14px;

color: #687381;

font-size: 11px;

}

.table-note span {
padding: 4px 6px;

border-radius: 5px;

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

color: #aab4c0;

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

}

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

.loading-card {
padding: 40px;

display: flex;
align-items: center;
justify-content: center;
gap: 12px;

color: #7f8a98;

font-weight: 700;

}

.loading-spinner {
width: 18px;
height: 18px;

border: 2px solid rgba(255,255,255,.12);
border-top-color: #00e676;

border-radius: 50%;

animation:
    spin .8s linear infinite;

}

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

/* ==========================================
EMPTY / ERROR
========================================== */

.empty-card,
.error-card {
padding: 50px 20px;

text-align: center;

}

.empty-card h3,
.error-card h3 {
margin: 12px 0 7px;

color: #ffffff;

font-size: 18px;

}

.empty-card p,
.error-card p {
margin: 0;

color: #7f8a98;

font-size: 13px;

}

.empty-card > div,
.error-card > div {
font-size: 30px;
}

.error-card button {
margin-top: 18px;

padding: 11px 17px;

border: 0;
border-radius: 9px;

background: #00e676;
color: #031009;

font-weight: 900;

cursor: pointer;

}

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

.site-footer {
border-top: 1px solid rgba(255,255,255,.07);

background: #030508;

}

.footer-inner {
max-width: 1200px;

margin: auto;

padding: 40px 24px;

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

gap: 30px;

}

.footer-brand p {
margin: 8px 0 0;

color: #687381;

font-size: 12px;

}

.footer-links {
display: flex;
flex-wrap: wrap;
gap: 18px;
}

.footer-links a {
color: #7d8794;

text-decoration: none;

font-size: 12px;
font-weight: 700;

}

.footer-links a:hover {
color: #00e676;
}

.copyright {
margin: 0;

color: #4f5965;

font-size: 11px;

}

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

@media (max-width: 850px) {

.desktop-nav {
    display: none;
}

.menu-button {
    display: block;
}

.page-hero {
    min-height: auto;

    padding: 55px 20px 45px;
}

.page-hero h1 {
    font-size: 58px;
    letter-spacing: -3px;
}

.league-badge {
    width: 90px;
    height: 90px;

    border-radius: 24px;

    font-size: 42px;
}

.table-section {
    padding:
        10px
        20px
        60px;
}

.footer-inner {
    flex-direction: column;
    align-items: flex-start;
}

}

@media (max-width: 600px) {

.header-inner {
    min-height: 64px;
    padding: 0 15px;
}

.logo {
    font-size: 18px;
}

.logo-mark {
    width: 34px;
    height: 34px;

    font-size: 18px;
}

.header-actions {
    gap: 7px;
}

.search-button,
.menu-button,
.profile-button {
    width: 37px;
    height: 37px;
}

.page-hero {
    padding:
        45px
        18px
        35px;
}

.page-hero h1 {
    font-size: 50px;
}

.page-hero p {
    font-size: 14px;
}

.league-badge {
    display: none;
}

.table-header {
    align-items: flex-start;
    flex-direction: column;
}

.table-header h2 {
    font-size: 25px;
}

.team-search {
    flex-direction: column;
}

.team-search button {
    min-height: 42px;
}

.search-inner {
    flex-direction: column;
}

.search-inner button {
    min-height: 42px;
}

.table-wrapper {
    border-radius: 13px;
}

th,
td {
    padding: 13px 11px;
}

.team-cell {
    min-width: 220px;
}

.team-badge {
    width: 34px;
    height: 34px;
}

.team-badge img {
    width: 27px;
    height: 27px;
}

}