body{
    background:#0e1726;
    color:#fff;
}

.login-bg{
    background:
    linear-gradient(
    135deg,
    #07111f,
    #102542
    );
}

.login-card{
    max-width:420px;
    margin:100px auto;
    background:#162337;
    padding:30px;
    border-radius:20px;
    box-shadow:
    0 10px 30px rgba(0,0,0,.3);
}

.page-title{
    font-weight:800;
}

.stat-card{
    background:#162337;
    padding:25px;
    border-radius:16px;
    text-align:center;
}

.stat-card div{
    font-size:32px;
    font-weight:700;
    color:#4ade80;
}

.match-card{
    background:#162337;
    padding:20px;
    border-radius:16px;
    margin-bottom:15px;
}

.teams{
    font-size:20px;
    font-weight:700;
}

.vs{
    color:#aaa;
    margin:0 10px;
}

.countdown{
    margin-top:10px;
    color:#4ade80;
    font-weight:700;
}

.score-input{
    width:80px;
    text-align:center;
    font-size:24px;
}

.locked{
    opacity:.5;
}

.save-indicator{
    color:#4ade80;
}

.result-btn.active{
    background:#22c55e;
    color:#fff;
    border-color:#22c55e;
}

#toastContainer{
    position:fixed;
    top:20px;
    right:20px;
    z-index:9999;
    width:300px;
}

.team-box{
display:block;
padding:15px;
background:#162337;
border-radius:12px;
cursor:pointer;
}

.bracket-column{
    min-height:600px;
}

.bracket-match{
    background:#162337;
    border-radius:12px;
    padding:12px;
    margin-bottom:20px;
}

.winner{
    color:#22c55e;
    font-weight:bold;
}

/* -------------------------
PREDICTIONS PAGE
------------------------- */

.round-header{
    width:100%;
    background:#b5b5b5de;
    color:#fff;
    border:none;
    padding:16px;
    margin-top:25px;
    border-radius:12px;
    font-size:18px;
    font-weight:700;
    text-align:left;
    cursor:pointer;
}

.date-header{
    width:100%;
    background:#566987;
    color:#fff;
    border:none;
    padding:12px;
    margin-top:12px;
    border-radius:10px;
    text-align:left;
    cursor:pointer;
    font-weight:600;
}

.prediction-card{
    background:#132238;
    padding:15px;
    border-radius:12px;
    min-height:260px;
    transition:.2s;
}

.prediction-card:hover{
    transform:translateY(-2px);
}

.matches-grid{
    display:grid;
    grid-template-columns:
    repeat(auto-fill,minmax(350px,1fr));
    gap:15px;
}

.teams-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
}

.team{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:600;
}

.flag{
    width:28px;
    height:20px;
    object-fit:cover;
    border-radius:3px;
}

.vs{
    font-weight:bold;
    opacity:.6;
}

.countdown{
    color:#4ade80;
    font-weight:700;
}

@media(max-width:768px){

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

}

.round-content{
    display:none;
    padding:10px 0;
}

.date-content{
    display:none;
    padding:10px 0;
}

.matches-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
    gap:15px;
}

.prediction-card{
    width:100%;
}

.selected-finalists{

display:flex;

flex-wrap:wrap;

gap:10px;

margin-top:10px;
}

.finalist-pill{

background:#ffc107;

color:#000;

padding:10px 15px;

border-radius:30px;

font-weight:bold;
}

.progress-bar-card{

display:flex;

justify-content:space-around;

align-items:center;

background:#132238;

border-radius:12px;

padding:10px 15px;

margin-bottom:15px;
}

.progress-stat{

text-align:center;
}

.progress-stat strong{

display:block;

font-size:24px;

color:#fff;

line-height:1;
}

.progress-stat span{

font-size:12px;

opacity:.7;

color:#ccc;
}

.mobile-menu{

display:flex;

flex-wrap:wrap;

gap:8px;

justify-content:center;

margin-bottom:15px;
}

.mobile-menu a{

background:#132238;

padding:8px 12px;

border-radius:8px;

text-decoration:none;

color:white;

font-weight:600;
}

.mobile-menu a:hover{

background:#1e3a5f;
}

.dashboard-bar{

display:flex;

justify-content:space-between;

gap:10px;

margin-bottom:15px;
}

.dashboard-item{

flex:1;

background:#132238;

padding:10px;

border-radius:12px;

text-align:center;
}

.dashboard-item strong{

font-size:22px;

display:block;
}
.user-bar{

text-align:center;

margin-bottom:10px;

font-size:14px;

color:#ccc;
}

.earned-points{

background:#198754;

color:white;

padding:8px;

border-radius:8px;

text-align:center;

font-weight:bold;

margin-top:10px;
}