:root {
    --color-primary: #E63946;
    --color-secondary: #161821;
    --color-accent: #FFD700;
    --color-bg: #0A0B10;
    --color-text: #F8F9FA;
    --radius: 12px;
}

body {
    font-family: Inter, system-ui, sans-serif;
}

.font-heading {
    font-family: Oswald, Inter, sans-serif;
    letter-spacing: 0;
}

.glass-panel {
    background: rgba(22, 24, 33, .76);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .08);
}

.hero-bg {
    background:
        linear-gradient(180deg, rgba(10, 11, 16, .1), rgba(10, 11, 16, 1)),
        url("https://images.unsplash.com/photo-1517927033932-b3d18e61fb3a?auto=format&fit=crop&w=1800&q=80") center/cover;
    opacity: .55;
}

.nav-link,
.mobile-nav-link {
    color: rgb(156 163 175);
    transition: color .18s ease;
}

.nav-link:hover,
.mobile-nav-link:hover {
    color: white;
}

.mobile-nav-link {
    display: block;
}

.brand-logo {
    display: block;
    object-fit: contain;
}

.brand-logo-header {
    max-width: 13rem;
    max-height: 3.2rem;
}

.brand-logo-footer {
    max-width: 10rem;
    max-height: 2.5rem;
}

.brand-logo-light {
    display: none;
}

html[data-theme="light"] .brand-logo-dark.has-light-logo {
    display: none;
}

html[data-theme="light"] .brand-logo-light {
    display: block;
}

.brand-icon {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}

.btn-primary,
.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    border-radius: var(--radius);
    padding: .85rem 1.1rem;
    font-weight: 700;
}

.btn-primary {
    background: var(--color-primary);
    color: white;
}

.btn-primary:hover {
    background: #c92f3b;
}

.btn-ghost {
    border: 1px solid rgba(255, 255, 255, .12);
    color: white;
    background: rgba(255, 255, 255, .04);
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, .09);
}

.stat-box,
.big-stat,
.info-box {
    border-radius: var(--radius);
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(0, 0, 0, .28);
    padding: 1rem;
}

.stat-box span,
.big-stat span {
    display: block;
    font-family: Oswald, Inter, sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: white;
}

.stat-box small,
.big-stat small {
    color: rgb(156 163 175);
    text-transform: uppercase;
    font-size: .72rem;
}

.big-stat {
    text-align: center;
}

.feature-card {
    display: grid;
    gap: .55rem;
    border-radius: 1rem;
    background: #161821;
    border: 1px solid rgba(255, 255, 255, .08);
    padding: 1.35rem;
}

.feature-card:hover {
    border-color: rgba(255, 255, 255, .22);
}

.feature-card i {
    font-size: 1.4rem;
}

.feature-card span {
    color: rgb(156 163 175);
    font-size: .9rem;
}

.phase-nav {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .7rem;
}

.phase-button {
    min-height: 4.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .2rem;
    border-radius: var(--radius);
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(0, 0, 0, .24);
    padding: .85rem .9rem;
    text-align: center;
    font-size: .82rem;
    font-weight: 800;
    text-transform: uppercase;
}

.phase-button:hover {
    border-color: rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .06);
}

.phase-button.is-current {
    border-color: rgba(255, 215, 0, .65);
    background: linear-gradient(135deg, rgba(230, 57, 70, .26), rgba(255, 215, 0, .18));
    color: white;
    box-shadow: 0 12px 30px rgba(230, 57, 70, .14);
}

.phase-button small {
    color: var(--color-accent);
    font-size: .66rem;
}

.group-detail-button {
    padding: .48rem .7rem;
    border-radius: .6rem;
    font-size: .72rem;
    text-transform: uppercase;
}

.instagram-widget {
    display: flex;
    align-items: center;
    gap: .9rem;
    min-height: 6rem;
    border-radius: var(--radius);
    border: 1px solid rgba(255, 255, 255, .1);
    background:
        radial-gradient(circle at 8% 0%, rgba(255, 214, 0, .22), transparent 34%),
        radial-gradient(circle at 92% 100%, rgba(230, 57, 70, .22), transparent 36%),
        rgba(0, 0, 0, .24);
    padding: 1rem;
}

.instagram-widget:hover {
    border-color: rgba(255, 255, 255, .26);
    background-color: rgba(255, 255, 255, .05);
}

.instagram-widget-icon {
    width: 2.8rem;
    height: 2.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 999px;
    background: linear-gradient(135deg, #F9CE34, #EE2A7B 48%, #6228D7);
    color: white;
    font-size: 1.35rem;
}

.instagram-widget strong,
.instagram-widget small {
    display: block;
}

.instagram-widget small {
    margin-top: .18rem;
    color: rgb(156 163 175);
}

.instagram-widget-action {
    margin-left: auto;
    color: var(--color-accent);
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap;
}

.social-links-card {
    background: rgba(0, 0, 0, .24);
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border-radius: .7rem;
    border: 1px solid rgba(255, 255, 255, .1);
    padding: .55rem .7rem;
    font-size: .78rem;
    font-weight: 700;
}

.social-link:hover {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .24);
}

.match-card {
    display: grid;
    grid-template-columns: minmax(160px, .8fr) minmax(240px, 1.4fr) minmax(160px, .8fr);
    align-items: center;
    gap: 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(0, 0, 0, .25);
    padding: 1rem;
}

.match-chronicle-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .35rem;
}

.match-chronicle-gallery img {
    width: 100%;
    height: 16rem;
    object-fit: cover;
}

.match-chronicle-body {
    max-width: 62rem;
    line-height: 1.85;
}

.match-card:hover {
    border-color: rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .04);
}

.score-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.5rem;
    border-radius: .8rem;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .08);
    padding: .55rem .8rem;
    color: var(--color-accent);
    font-family: Oswald, Inter, sans-serif;
    font-weight: 700;
}

.page-shell {
    max-width: 80rem;
    margin: 0 auto;
    padding: 4rem 1rem;
}

.page-heading {
    margin-bottom: 2rem;
}

.page-heading h1 {
    font-family: Oswald, Inter, sans-serif;
    font-size: clamp(2.3rem, 6vw, 4rem);
    font-weight: 700;
    text-transform: uppercase;
}

.page-heading p {
    max-width: 48rem;
    color: rgb(156 163 175);
    font-size: 1.05rem;
}

.field {
    width: 100%;
    border-radius: var(--radius);
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(0, 0, 0, .35);
    color: white;
    padding: .8rem 1rem;
    outline: none;
}

.field:focus {
    border-color: var(--color-primary);
}

.info-box dt {
    color: rgb(156 163 175);
    font-size: .75rem;
    text-transform: uppercase;
}

.info-box dd {
    margin-top: .3rem;
    color: white;
    font-weight: 700;
}

.admin-link {
    display: block;
    border-radius: .7rem;
    padding: .7rem .85rem;
    color: rgb(209 213 219);
    font-size: .9rem;
}

.admin-link:hover {
    background: rgba(255, 255, 255, .08);
    color: white;
}

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

@media (min-width: 1280px) {
    .groups-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.standings-col-pos {
    width: 2.35rem;
}

.standings-col-team {
    width: 12rem;
}

.standings-col-stat {
    width: 2.2rem;
}

.standings-col-points {
    width: 3rem;
}

.standings-table th,
.standings-table td {
    white-space: nowrap;
    height: 3.65rem;
}

.standings-table {
    min-width: 32.75rem;
}

.standings-team {
    white-space: normal;
    line-height: 1.25;
}

.standings-team span:last-child {
    min-width: 18ch;
    white-space: normal;
}

.standings-card {
    container-type: inline-size;
}

.team-detail-anchor {
    scroll-margin-top: 6rem;
}

@container (max-width: 560px) {
    .standings-col-goals,
    .standings-col-goals-cell {
        display: none;
    }

    .standings-table {
        min-width: 28.35rem;
    }
}

@container (max-width: 500px) {
    .standings-col-form,
    .standings-col-form-cell {
        display: none;
    }

    .standings-table {
        min-width: 21.75rem;
    }
}

@container (max-width: 410px) {
    .standings-col-stat {
        width: 2.25rem;
    }

    .standings-col-pos {
        width: 2.2rem;
    }

    .standings-col-points {
        width: 3rem;
    }

    .standings-table {
        min-width: 25rem;
    }

    .standings-col-team {
        width: 11.5rem;
    }
}

@media (max-width: 800px) {
    .match-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

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

@media (max-width: 760px) {
    .squad-col-optional {
        display: none;
    }
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
    color: white;
    padding: .55rem .8rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .28);
}

.theme-toggle-light {
    display: none;
}

html[data-theme="light"] {
    --color-primary: #2563EB;
    --color-secondary: #E2E8F0;
    --color-accent: #0EA5E9;
    --color-bg: #F4F7FB;
    --color-text: #172033;
}

html[data-theme="light"] body {
    background:
        radial-gradient(circle at top left, rgba(14, 165, 233, .14), transparent 32rem),
        linear-gradient(180deg, #FFFFFF 0%, #F4F7FB 45%, #EAF0F8 100%);
}

html[data-theme="light"] .glass-panel {
    background: rgba(255, 255, 255, .86);
    border-color: rgba(37, 99, 235, .14);
    box-shadow: 0 18px 45px rgba(30, 64, 175, .08);
}

html[data-theme="light"] .hero-bg {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(244, 247, 251, 1)),
        url("https://images.unsplash.com/photo-1517927033932-b3d18e61fb3a?auto=format&fit=crop&w=1800&q=80") center/cover;
    opacity: .22;
}

html[data-theme="light"] .nav-link,
html[data-theme="light"] .mobile-nav-link,
html[data-theme="light"] .text-gray-400,
html[data-theme="light"] .text-gray-500 {
    color: #64748B !important;
}

html[data-theme="light"] .nav-link:hover,
html[data-theme="light"] .mobile-nav-link:hover,
html[data-theme="light"] .hover\:text-white:hover,
html[data-theme="light"] .text-white,
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] strong,
html[data-theme="light"] .info-box dd {
    color: #172033 !important;
}

html[data-theme="light"] .btn-primary {
    background: #2563EB;
    color: white;
}

html[data-theme="light"] .btn-primary:hover {
    background: #1D4ED8;
}

html[data-theme="light"] .btn-ghost,
html[data-theme="light"] .feature-card,
html[data-theme="light"] .phase-button,
html[data-theme="light"] .match-card,
html[data-theme="light"] .score-pill,
html[data-theme="light"] .stat-box,
html[data-theme="light"] .big-stat,
html[data-theme="light"] .info-box,
html[data-theme="light"] .instagram-widget,
html[data-theme="light"] .social-links-card,
html[data-theme="light"] .social-link,
html[data-theme="light"] article.rounded-xl,
html[data-theme="light"] .rounded-xl.border {
    background: rgba(255, 255, 255, .78) !important;
    border-color: rgba(37, 99, 235, .13) !important;
    color: #172033;
}

html[data-theme="light"] .stat-box span,
html[data-theme="light"] .big-stat span {
    color: #1E3A8A !important;
}

html[data-theme="light"] .stat-box small,
html[data-theme="light"] .big-stat small {
    color: #475569 !important;
}

html[data-theme="light"] .match-card:hover,
html[data-theme="light"] .feature-card:hover,
html[data-theme="light"] .phase-button:hover,
html[data-theme="light"] .btn-ghost:hover {
    background: #EEF5FF !important;
    border-color: rgba(37, 99, 235, .28) !important;
}

html[data-theme="light"] .phase-button.is-current {
    background: linear-gradient(135deg, rgba(37, 99, 235, .16), rgba(14, 165, 233, .16)) !important;
    border-color: rgba(37, 99, 235, .4) !important;
    color: #1E3A8A !important;
}

html[data-theme="light"] .score-pill {
    color: #1D4ED8;
}

html[data-theme="light"] .field {
    background: white;
    border-color: rgba(37, 99, 235, .18);
    color: #172033;
}

html[data-theme="light"] .border-white\/10,
html[data-theme="light"] .border-white\/5,
html[data-theme="light"] .border-white\/20 {
    border-color: rgba(37, 99, 235, .13) !important;
}

html[data-theme="light"] .bg-black,
html[data-theme="light"] .bg-black\/20,
html[data-theme="light"] .bg-black\/25,
html[data-theme="light"] .bg-black\/30,
html[data-theme="light"] .bg-black\/90,
html[data-theme="light"] footer {
    background-color: rgba(255, 255, 255, .92) !important;
}

html[data-theme="light"] .bg-white\/5,
html[data-theme="light"] .bg-white\/10,
html[data-theme="light"] .bg-white\/\[\.03\] {
    background-color: rgba(219, 234, 254, .65) !important;
}

html[data-theme="light"] .theme-toggle {
    border-color: rgba(37, 99, 235, .18);
    background: #DBEAFE;
    color: #1E3A8A;
}

html[data-theme="light"] .theme-toggle-dark {
    display: none;
}

html[data-theme="light"] .theme-toggle-light {
    display: inline-block;
}

html[data-theme="light"] .mobile-nav-link {
    color: #334155 !important;
}

html[data-theme="light"] .hero-shade {
    background: linear-gradient(90deg, rgba(255, 255, 255, .96) 0%, rgba(239, 246, 255, .9) 46%, rgba(239, 246, 255, .18) 100%) !important;
}

html[data-theme="light"] .home-hero-copy,
html[data-theme="light"] .home-kickoff-meta,
html[data-theme="light"] .text-gray-300 {
    color: #475569 !important;
}

html[data-theme="light"] .home-kickoff-meta {
    border-top-color: rgba(37, 99, 235, .16) !important;
}

html[data-theme="light"] .home-stats-strip {
    background: linear-gradient(180deg, rgba(219, 234, 254, .72), rgba(255, 255, 255, .76)) !important;
    border-color: rgba(37, 99, 235, .12) !important;
}

html[data-theme="light"] .feature-card .text-blue-400 {
    color: #2563EB !important;
}

html[data-theme="light"] .feature-card .text-red-400 {
    color: #DC2626 !important;
}

html[data-theme="light"] .feature-card .text-yellow-300 {
    color: #CA8A04 !important;
}