:root {
    --bg-dark: #070a13;
    --bg-card: #111827;
    --primary: #38bdf8;
    --accent: #10b981;
}

body { 
    background: var(--bg-dark); 
    color: white; 
    font-family: 'Inter', sans-serif; 
    scroll-behavior: smooth; 
}

.navbar { transition: all 0.3s; }
.logo span { color: var(--primary); }

.hero { padding: 100px 0; background: radial-gradient(circle at center, #1e293b 0%, var(--bg-dark) 70%); }

.section-title { 
    font-size: 2.2rem; 
    font-weight: 900; 
    border-left: 6px solid var(--primary); 
    padding-left: 1.2rem; 
    margin-bottom: 2.5rem; 
}

.card-campeonato {
    background: var(--bg-card);
    border-radius: 20px;
    padding: 1.5rem;
    transition: all 0.4s ease;
}

.card-campeonato:hover { 
    transform: translateY(-10px); 
    box-shadow: 0 10px 30px rgba(56, 189, 248, 0.15); 
}

.card-img {
    width: calc(100% + 3rem);
    height: 180px;
    margin: -1.5rem -1.5rem 1.5rem -1.5rem;
    object-fit: cover;
    border-radius: 20px 20px 0 0;
    filter: brightness(0.6);
    transition: 0.3s;
}

.card-campeonato:hover .card-img { filter: brightness(1); }

.btn-primary { 
    background: var(--primary); 
    color: #000; 
    padding: 10px 25px; 
    border-radius: 8px; 
    font-weight: bold; 
    transition: 0.3s;
}

.btn-primary:hover { background: #0ea5e9; }

.btn-outline {
    background: transparent;
    color: white;
    padding: 10px 20px;
    border: 1px solid #38bdf8;
    border-radius: 8px;
    font-weight: bold;
    transition: 0.3s;
}

.btn-outline:hover {
    background: rgba(56, 189, 248, 0.1);
    color: #38bdf8;
}

.btn-full-green {
    width: 100%; 
    background: var(--accent); 
    color: white; 
    padding: 15px; 
    border-radius: 10px; 
    font-weight: 900; 
    text-transform: uppercase;
    transition: 0.3s;
}

.btn-full-green:hover { background: #059669; }

.badge { background: rgba(56, 189, 248, 0.1); color: var(--primary); padding: 5px 12px; border-radius: 50px; font-size: 0.75rem; font-weight: bold; }
.badge-squad { background: rgba(245, 158, 11, 0.1); color: #f59e0b; padding: 5px 12px; border-radius: 50px; font-size: 0.75rem; font-weight: bold; border: 1px solid rgba(245, 158, 11, 0.3); }
.badge-solo { background: rgba(16, 185, 129, 0.1); color: #10b981; padding: 5px 12px; border-radius: 50px; font-size: 0.75rem; font-weight: bold; border: 1px solid rgba(16, 185, 129, 0.3); }

.tab-btn { padding: 10px 25px; border-radius: 10px; color: #64748b; font-weight: bold; transition: 0.3s; }
.tab-btn.active { background: var(--primary); color: black; }
.table-container { background: #111827; border-radius: 12px; overflow: hidden; border: 1px solid #1f2937; }

.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.9); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal-content { background: var(--bg-card); padding: 2.5rem; border-radius: 25px; width: 95%; max-width: 500px; border: 1px solid #374151; }
.form-input { width: 100%; background: #030712; border: 1px solid #374151; padding: 15px; border-radius: 12px; color: white; outline: none; transition: 0.3s;}
.form-input:focus { border-color: var(--primary); }
.hidden { display: none; }