/* =========================================================
   PRO LEAGUE CS2 – Unified Design System
   Dark • Clean • Esport • Spójny
   ========================================================= */


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

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Segoe UI', system-ui, sans-serif;
    color: #e6edf3;
    -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4 {
    margin-top: 0;
}

img {
    display: block;
    max-width: 100%;
}


/* ===============================
   THEME
================================ */

:root {

    --bg-main: #0b0f15;
    --bg-card: #121822;
    --bg-soft: #1a2230;
    --bg-hover: #202a3b;

    --border: rgba(255,255,255,0.06);

    --primary: #3b82f6;
    --primary-soft: rgba(59,130,246,0.12);

    --success: #10b981;
    --danger: #dc2626;

    --text-main: #e6edf3;
    --text-muted: #8b98ad;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
}


/* ===============================
   BASE UI
================================ */

button {
    background: var(--primary);
    border: none;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    color: white;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.2s ease;
}

button:hover {
    background: #2563eb;
}

input, textarea, select {
    width: 100%;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-soft);
    color: white;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--primary);
}


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

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 40px;
    background: #0f141b;
    border-bottom: 1px solid var(--border);
}

.brand {
    display: flex;
    align-items: center;
    gap: 15px;
}

.brand img {
    height: 70px;
}

.navbar {
    display: flex;
    justify-content: center;
    gap: 35px;
    padding: 16px 0;
    background: #0f141b;
    border-bottom: 1px solid var(--border);
}

.navLink {
    text-decoration: none;
    color: var(--text-muted);
    font-weight: 600;
    transition: color 0.2s ease;
}

.navLink:hover {
    color: white;
}


/* ===============================
   CARD SYSTEM
================================ */

.card,
.homeCard,
.dashboardCard,
.teamDetails,
.matchHero,
.matchesBlock {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

.homeCard,
.dashboardCard,
.matchHero,
.matchesBlock {
    padding: 30px;
}

.matchHero {
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* ===============================
   HOME
================================ */

.homePage {
    max-width: 1300px;
    margin: 50px auto;
    padding: 0 20px;
}


.homePage .homeTeam span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.homeCard h3 {
    margin-bottom: 25px;
    font-size: 18px;
    letter-spacing: 0.5px;
}

.homeCard + .homeCard {
    border-top: 1px solid rgba(255,255,255,0.03);
}
.heroStats {
    display: flex;
    gap: 50px;
    margin-top: 25px;
}

.heroStats span {
    font-size: 12px;
    color: var(--text-muted);
}

.heroStats strong {
    font-size: 28px;
    color: var(--primary);
}


.homeMatchRow {
    background: var(--bg-soft);
    padding: 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.2s ease;
    display: flex;
    flex-direction: column;
}

.homeMatchRow:hover {
    background: var(--bg-hover);
}

/* ===============================
   HERO – ESPORT UPGRADE
================================ */

.homeHero {
    position: relative;
    overflow: hidden;
    padding: 60px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #0f1722 0%, #121a28 100%);
    border: 1px solid rgba(59,130,246,0.15);
    margin-bottom: 50px;
}

.homeHero::before {
    content: "";
    position: absolute;
    top: -40%;
    right: -20%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(59,130,246,0.25) 0%, transparent 70%);
    filter: blur(60px);
    pointer-events: none;
}

.homeHero h1 {
    font-size: 42px;
    letter-spacing: 1px;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.homeHero p {
    color: var(--text-muted);
    max-width: 600px;
}

.homeMainColumn {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.homeSideColumn {
    display: flex;
    flex-direction: column;
    gap: 30px;
    min-width: 0;
}

.heroStats {
    margin-top: 40px;
}

.heroStats strong {
    font-size: 34px;
}

/* LIVE CARD */

.liveCard {
    border: 1px solid rgba(220,38,38,0.5);
    box-shadow: 0 0 30px rgba(220,38,38,0.15);
}

/* HIGHLIGHT CARD */

.highlightCard {
    border: 1px solid rgba(59,130,246,0.3);
    background: linear-gradient(135deg, rgba(59,130,246,0.1), transparent);
}

/* HOME GRID – bardziej esportowo */

.homeGrid {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.homeCard {
    padding: 30px;
    background: linear-gradient(145deg, #121822, #0f1520);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    min-width: 0;
}

.homeCard:hover {
    border: 1px solid rgba(59,130,246,0.3);
}

.liveDot {
    animation: pulse 1.2s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

/* ===============================
   MATCH ROW
================================ */

.matchRow {
    background: transparent;
    padding: 22px 28px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.2s ease;
    transition: transform 0.15s ease, border 0.2s ease;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
}


.matchRow:last-child {
    border-bottom: none;
}

.matchRow:hover {
    background: var(--bg-hover);
    transform: translateY(-2px);
    border-color: var(--primary);
}

.matchTeams {
    display: grid;
    grid-template-columns: 1fr 220px 1fr;
    align-items: center;
    gap: 20px;
}

.matchTeam {
    display: flex;
    align-items: center;
    gap: 12px;
}

.matchTeam.right {
    justify-content: flex-end;
}

.matchTeamLogo img {
    width: 48px;
    height: 48px;
    border-radius: 10px;
}

.matchCenter {
    text-align: center;
}

.matchScore {
    font-weight: 700;
    font-size: 18px;
    color: var(--primary);
}

.matchDate {
    font-size: 12px;
    color: var(--text-muted);
}


/* ===============================
   MATCH DETAILS – HERO
================================ */

.matchHeroCard {
    background: linear-gradient(145deg, #121822, #0f1520);
    padding: 50px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    margin-bottom: 40px;
    text-align: center;
}

.matchTeamsHero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 40px 0;
}

.heroTeam {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    max-width: 220px;
}

.heroTeam img {
    width: 110px;
    height: 110px;
    border-radius: 18px;
}

.heroTeam span {
    font-weight: 600;
}

.heroScore {
    font-size: 56px;
    font-weight: 800;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.heroScore span {
    color: var(--text-muted);
}

.matchMeta {
    color: var(--text-muted);
    font-size: 14px;
}

.matchHeroCard.live {
    border: 1px solid rgba(220,38,38,0.5);
    box-shadow: 0 0 30px rgba(220,38,38,0.15);
}


.matchPage {
    max-width: 1300px;
    margin: 50px auto;
    padding: 0 20px;
}

.matchHero {
    position: relative;
    overflow: hidden;
    padding: 60px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #0f1722 0%, #121a28 100%);
    border: 1px solid rgba(59,130,246,0.15);
    margin-bottom: 50px;
}

.matchHero::before {
    content: "";
    position: absolute;
    top: -40%;
    right: -20%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(59,130,246,0.25) 0%, transparent 70%);
    filter: blur(60px);
    pointer-events: none;
}

.matchHeroContent {
    position: relative;
    z-index: 2;
}

.matchTeamsHero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 40px 0;
}

.heroScore {
    font-size: 56px;
    font-weight: 800;
    color: var(--primary);
}
/* ===============================
   TABLE – CLEAN PRO VERSION
================================ */

.leagueTable {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border);
}


/* HEADER */
.leagueTable thead {
    background: #1c2433;
}

.leagueTable th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    font-weight: 600;
}

/* CELLS */
.leagueTable td {
    padding: 16px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 15px;
}

/* ===============================
   TABLE FIX – STABLE COLUMNS
================================ */

/* reset */
.leagueTable th,
.leagueTable td {
    padding: 14px 16px;
    text-align: center;
    overflow: hidden;
}

/* kolumna # */
.leagueTable th:nth-child(1),
.leagueTable td:nth-child(1) {
    width: 60px;
}

/* kolumna Drużyna */
.leagueTable th:nth-child(2),
.leagueTable td:nth-child(2) {
    width: 45%;
    text-align: left;
}

/* M W L */
.leagueTable th:nth-child(3),
.leagueTable td:nth-child(3),
.leagueTable th:nth-child(4),
.leagueTable td:nth-child(4),
.leagueTable th:nth-child(5),
.leagueTable td:nth-child(5) {
    width: 70px;
}

/* PTS */
.leagueTable th:nth-child(6),
.leagueTable td:nth-child(6) {
    width: 80px;
    font-weight: 700;
}

/* TEAM CELL */
.teamCell {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.teamCell img {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.teamCell span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* POSITION */
.positionCell {
    font-weight: 700;
    color: var(--primary);
}

/* POINTS */
.points {
    font-weight: 700;
    color: var(--primary);
}

/* ROW HOVER */
.leagueTable tbody tr {
    transition: background 0.2s ease;
}

.leagueTable tbody tr:hover {
    background: var(--bg-hover);
}

/* ===============================
   TEAMS PAGE – ESPORT MODE
================================ */

.teamsPage {
    max-width: 1300px;
    margin: 50px auto;
    padding: 0 20px;
}

.teamsHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    flex-wrap: wrap;
    gap: 20px;
}

.teamsControls {
    display: flex;
    gap: 15px;
    align-items: center;
}

.teamsGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
}

.teamsBlock {
    margin-top: 40px;
    padding: 40px;
}

.teamsTopBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 35px;
    gap: 20px;
    flex-wrap: wrap;
}

/* ===============================
   TEAM CARD – PREMIUM
================================ */

.teamCardEsport {
    position: relative;
    padding: 30px;
    background: linear-gradient(145deg, #121822, #0f1520);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
}

.teamCardEsport:hover {
    transform: translateY(-6px);
    border: 1px solid rgba(59,130,246,0.4);
    box-shadow: 0 10px 30px rgba(59,130,246,0.15);
}

.teamLogo {
    width: 90px;
    height: 90px;
    border-radius: 18px;
    margin: 0 auto 20px;
    object-fit: cover;
    background: var(--bg-soft);
}

.teamRankBadge {
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
}

.teamRecordMini {
    margin-top: 12px;
    display: flex;
    justify-content: center;
    gap: 14px;
    font-weight: 600;
}

.teamMetaMini {
    margin-top: 10px;
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* ===============================
   TOP 3 HIGHLIGHT
================================ */

.teamCardEsport:nth-child(1) {
    border: 1px solid rgba(59,130,246,0.45);
}

.teamCardEsport:nth-child(2),
.teamCardEsport:nth-child(3) {
    border: 1px solid rgba(59,130,246,0.25);
}
/* ===============================
   TEAM DETAILS – DYNAMIC HERO v2
================================ */

.teamDetails {
    max-width: 1300px;
    margin: 50px auto;
    padding: 60px 50px;
    border-radius: var(--radius-md);
    background: linear-gradient(145deg, #121822, #0f1520);
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* subtle glow */
.teamDetails::before {
    content: "";
    position: absolute;
    top: -35%;
    right: -15%;
    width: 450px;
    height: 450px;
    background: radial-gradient(
        circle,
        rgba(59,130,246,0.18) 0%,
        transparent 70%
    );
    filter: blur(70px);
    pointer-events: none;
}
.teamPage {
    max-width: 1300px;
    margin: 50px auto;
    padding: 0 20px;
}
/* ===============================
   HEADER
================================ */

.teamHeader {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 50px;
}

.teamHeader img {
    width: 160px;
    height: 160px;
    border-radius: 22px;
    border: 1px solid var(--border);
    background: var(--bg-soft);
}

/* title + info block */
.teamInfo {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.teamTitleRow {
    display: flex;
    align-items: center;
    gap: 15px;
}

.teamTitleRow h2 {
    margin: 0;
    font-size: 32px;
    letter-spacing: 0.5px;
}

.teamRank {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary);
}

.teamDescription {
    color: var(--text-muted);
    max-width: 600px;
}

/* ===============================
   RECORD
================================ */

.teamRecord {
    display: flex;
    gap: 24px;
    font-size: 22px;
    margin-top: 10px;
}

.wins {
    color: var(--success);
    font-weight: 700;
}

.losses {
    color: var(--danger);
    font-weight: 700;
}

/* ===============================
   ROSTER
================================ */

.playersGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 22px;
}

.playerCard {
    background: var(--bg-soft);
    padding: 22px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    transition: all 0.2s ease;
    min-height: 90px;
}

.playerCard:hover {
    background: var(--bg-hover);
    transform: translateY(-4px);
    border-color: var(--primary);
}

.playerCard.captain {
    border: 1px solid var(--primary);
    box-shadow: 0 0 18px rgba(59,130,246,0.25);
}

/* ===============================
   ADMIN (SUROWY)
================================ */

.adminPanel,
.matchAdminPanel {
    margin-top: 40px;
    padding: 20px;
    background: #0f141b;
    border-radius: var(--radius-sm);
    border: 1px solid #222;
}

.adminRow {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}


/* ===============================
   PAGINATION
================================ */

.pagination {
    margin-top: 20px;
}

.pageBtn {
    background: var(--bg-soft);
    border: 1px solid var(--border);
}

.pageBtn.activePage {
    background: var(--primary);
}


/* ===============================
   RESPONSIVE
================================ */

@media (max-width: 900px) {

    .matchTeams {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .matchTeam,
    .matchTeam.right {
        justify-content: center;
    }

    .teamHeader {
        flex-direction: column;
        text-align: center;
    }

}
/* =========================================================
   CONTINUATION – Unified Design Addons
   ========================================================= */


/* ===============================
   HOME – MATCH GRID DETAILS
================================ */

.homeMatchTeams {
    display: grid;
    grid-template-columns: 1fr 120px 1fr;
    align-items: center;
    gap: 20px;
}

.homeMatchTeams > div {
    min-width: 0;
}

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

.homeTeam:first-child {
    justify-content: flex-start;
}

.homeTeam:last-child {
    justify-content: flex-end;
}

.homeTeam img {
    width: 48px;
    height: 48px;
    border-radius: 10px;
}

.homeScoreColumn {
    text-align: center;
}

.homeScore {
    font-weight: 700;
    color: var(--primary);
}

.homeMatchDate {
    font-size: 12px;
    color: var(--text-muted);
}


/* ===============================
   STATUS (LIVE / FINISHED / SCHEDULED)
================================ */

.matchStatus {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    border-radius: 20px;
    font-weight: 600;
    margin-bottom: 15px;
}

.matchStatus.live {
    background: rgba(220,38,38,0.15);
    color: var(--danger);
}

.matchStatus.finished {
    background: rgba(16,185,129,0.15);
    color: var(--success);
}

.matchStatus.scheduled {
    background: var(--primary-soft);
    color: var(--primary);
}

.liveDot {
    width: 8px;
    height: 8px;
    background: var(--danger);
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}


/* ===============================
   MAP + SERVER BOX
================================ */

.mapBadge {
    background: var(--bg-soft);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    color: var(--text-muted);
}

.serverBox {
    margin-top: 15px;
    padding: 14px;
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
    border: 1px solid var(--border);
    text-align: center;
}

.serverLabel {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.serverIp {
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--success);
}

.connectBtn {
    display: inline-block;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    background: var(--success);
    color: white;
    text-decoration: none;
    font-size: 13px;
}

.connectBtn:hover {
    background: #0f9f6e;
}


/* ===============================
   STATS TABLE
================================ */

.esportTable {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.esportTable th {
    background: #1c2433;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 10px;
}

.esportTable td {
    padding: 10px;
    border-bottom: 1px solid var(--border);
    text-align: center;
}

.esportTable tr:hover {
    background: var(--bg-hover);
}

.playerName {
    text-align: left;
    font-weight: 600;
}

.scoreCell {
    font-weight: 700;
    color: var(--primary);
}

.tableRow {
    position: relative;
}

.tableRow::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background: var(--primary);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.tableRow:hover::before {
    opacity: 1;
}

/* ===============================
   TEAM DETAILS – HISTORY
================================ */

.teamMatchCard {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-soft);
    padding: 16px 20px;
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
    border: 1px solid var(--border);
    transition: all 0.2s ease;
}

.teamMatchCard:hover {
    background: var(--bg-hover);
    transform: translateX(4px);
}

.teamMatchCard small {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

.teamMatchCard.win {
    border-left: 4px solid var(--success);
}

.teamMatchCard.loss {
    border-left: 4px solid var(--danger);
}

.teamRecord {
    display: flex;
    gap: 20px;
    font-size: 20px;
    margin-bottom: 30px;
}

.teamRank {
    margin-left: 12px;
    font-size: 18px;
    color: var(--primary);
}

/* ===============================
   FORM CARD
================================ */

.formCard {
    max-width: 520px;
    margin: 40px auto;
    padding: 30px;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

.playerRow {
    margin-bottom: 20px;
    padding: 15px;
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
}


/* ===============================
   ADMIN DASHBOARD
================================ */

.adminPage {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
}

.dashboardCard {
    margin-bottom: 30px;
}

.adminRow label {
    width: 120px;
    font-size: 13px;
    color: var(--text-muted);
}

.adminActions {
    margin-top: 15px;
    display: flex;
    gap: 10px;
}

.adminStatusButtons {
    margin-top: 15px;
    display: flex;
    gap: 10px;
}

.liveBtn {
    background: var(--success);
}

.testBtn {
    background: var(--primary);
}


/* ===============================
   USER PANEL
================================ */

#userPanel {
    display: flex;
    align-items: center;
    gap: 10px;
}

#userPanel img {
    border-radius: 50%;
}

#userPanel a {
    color: var(--primary);
    text-decoration: none;
}

#userPanel a:hover {
    text-decoration: underline;
}


/* ===============================
   ANIMATIONS (SUBTLE)
================================ */

.fadeIn {
    opacity: 0;
    transform: translateY(6px);
    animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1100px) {
    .homeGrid {
        grid-template-columns: 1fr;
    }
}
/* =================================
   DYNAMIC BACKGROUND – ESPORT
================================= */

body {
    background: radial-gradient(
        circle at 20% 30%,
        rgba(59,130,246,0.15),
        transparent 40%
    ),
    radial-gradient(
        circle at 80% 70%,
        rgba(220,38,38,0.12),
        transparent 45%
    ),
    linear-gradient(180deg, #0b0f15 0%, #0a0e14 100%);
    background-attachment: fixed;
}
@keyframes bgShift {
    0% { background-position: 20% 30%, 80% 70%, 0 0; }
    50% { background-position: 25% 35%, 75% 65%, 0 0; }
    100% { background-position: 20% 30%, 80% 70%, 0 0; }
}

body {
    background-size: 100% 100%, 100% 100%, 100% 100%;
    animation: bgShift 18s ease-in-out infinite;
}

/* ===============================
   MATCHES – PREMIUM TOP BAR
================================ */

.matchesTopBar {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.matchesTopBar h2 {
    margin: 0;
    font-size: 26px;
}

.matchesTabs {
    display: inline-flex;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 4px;
}

.tabBtn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 8px 18px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: all 0.2s ease;
}
.tabBtn:hover {
    color: white;
}

.tabBtn.active {
    background: var(--primary-soft);
    color: var(--primary);
}

#matchSearch {
    max-width: 300px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    padding: 10px 14px;
    border-radius: 999px;
    transition: all 0.2s ease;
}

#matchSearch:focus {
    border-color: var(--primary);
    box-shadow: 0 0 12px rgba(59,130,246,0.2);
}

.matchRow:hover {
    transform: translateY(-3px);
    border: 1px solid rgba(59,130,246,0.3);
}

.matchRow.live {
    border: 1px solid rgba(220,38,38,0.4);
}

.matchRow.live:hover {
    box-shadow: 0 0 18px rgba(220,38,38,0.2);
}
.matchesPage {
    max-width: 1300px;
    margin: 50px auto;
    padding: 0 20px;
}
.matchesControls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
/* ===============================
   USER PANEL – PREMIUM
================================ */

#userPanel {
    position: relative;
    display: flex;
    align-items: center;
}

.userPanelInner {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.userAvatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
}

.userName {
    font-weight: 600;
    font-size: 14px;
}

.userRole {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
}

.userDropdown {
    position: absolute;
    top: 50px;
    right: 0;
    min-width: 200px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px;
    display: none;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    z-index: 50;
}

.userDropdown a {
    text-decoration: none;
    color: var(--text-main);
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-size: 13px;
}

.userDropdown a:hover {
    background: var(--bg-hover);
}

#userPanel.open .userDropdown {
    display: flex;
}

.loginBtn {
    background: var(--primary);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    color: white;
    text-decoration: none;
    font-weight: 600;
}

.loginBtn:hover {
    background: #2563eb;
}

/* ===============================
   ADMIN – PREMIUM DASHBOARD
================================ */

.adminPage {
    max-width: 1300px;
    margin: 50px auto;
    padding: 0 20px;
}

.adminHeader {
    margin-bottom: 40px;
}

.adminHeader h1 {
    font-size: 32px;
    margin-bottom: 8px;
}

.adminHeader p {
    color: var(--text-muted);
}

/* STAT CARDS */

.adminStatsGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 25px;
    margin-bottom: 50px;
}

.adminStatCard {
    padding: 25px;
    background: linear-gradient(145deg, #121822, #0f1520);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

.adminStatCard span {
    font-size: 12px;
    color: var(--text-muted);
}

.adminStatCard strong {
    font-size: 28px;
    color: var(--primary);
}

/* ===============================
   UNIVERSAL PAGE SYSTEM
================================ */

.page {
    max-width: 1300px;
    margin: 50px auto;
    padding: 0 20px;
}

.pageHero {
    position: relative;
    padding: 60px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #0f1722 0%, #121a28 100%);
    border: 1px solid rgba(59,130,246,0.15);
    margin-bottom: 50px;
    overflow: hidden;
}

.pageHero::before {
    content: "";
    position: absolute;
    top: -40%;
    right: -20%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(59,130,246,0.25) 0%, transparent 70%);
    filter: blur(60px);
}

.pageHero h1 {
    font-size: 36px;
    margin-bottom: 10px;
}

.pageHero p {
    color: var(--text-muted);
    max-width: 600px;
}

.pageContent {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* ===========================
   GRID HEIGHT FIX
=========================== */

.teamsGrid {
    min-height: 500px; /* zapobiega przeskokowi */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}

/* ===========================
   SKELETON CARD
=========================== */

.teamCardSkeleton {
    padding: 20px;
    border-radius: 16px;
    background: #1b1b1b;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    overflow: hidden;
}

/* shimmer animation */
.teamCardSkeleton::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 150%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.05),
        transparent
    );
    animation: shimmer 1.3s infinite;
}

@keyframes shimmer {
    100% {
        left: 150%;
    }
}

/* skeleton elements */

.skeletonRank {
    width: 40px;
    height: 20px;
    background: #2a2a2a;
    border-radius: 6px;
}

.skeletonLogo {
    width: 100px;
    height: 100px;
    border-radius: 12px;
    background: #2a2a2a;
    align-self: center;
}

.skeletonLine {
    height: 14px;
    background: #2a2a2a;
    border-radius: 6px;
}

.skeletonLine.short {
    width: 50%;
}

.skeletonLine.long {
    width: 80%;
}

.matchesList {
    min-height: 400px;
}

/* skeleton row */
.matchRowSkeleton {
    height: 80px;
    border-radius: 12px;
    background: #1b1b1b;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}

.matchRowSkeleton::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 150%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.05),
        transparent
    );
    animation: shimmer 1.3s infinite;
}

.skeletonTeam {
    width: 120px;
    height: 20px;
    background: #2a2a2a;
    border-radius: 6px;
}

.skeletonScore {
    width: 50px;
    height: 20px;
    background: #2a2a2a;
    border-radius: 6px;
}

@keyframes shimmer {
    100% { left: 150%; }
}


/* =========================
   SKELETON ROW
========================= */

.tableRowSkeleton td {
    padding: 12px;
}

.sk {
    background: #2a2a2a;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}

.sk::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 150%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.05),
        transparent
    );
    animation: shimmer 1.3s infinite;
}

.sk-pos {
    width: 24px;
    height: 18px;
}

.sk-small {
    width: 30px;
    height: 18px;
}

.sk-team {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sk-avatar {
    width: 32px;
    height: 32px;
    background: #2a2a2a;
    border-radius: 6px;
}

.sk-name {
    width: 120px;
    height: 18px;
    background: #2a2a2a;
    border-radius: 6px;
}

@keyframes shimmer {
    100% {
        left: 150%;
    }
}

/* avatar fix */
.teamCell img {
    width: 32px;
    height: 32px;
    object-fit: cover;
}