.predict-btn{
    background:#d71920;
    color:#fff;

    padding:16px 28px;

    border-radius:12px;

    text-decoration:none;
    font-weight:700;
}



/* =========================
   SECTIONS
========================= */

.dashboard-section{
    margin-bottom:35px;
}

.section-header{
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:20px;
}

/* =========================
   QUICK ACTIONS
========================= */

.quick-actions{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
}

.quick-actions a{
    background:#fff;

    padding:18px;

    color:#071a35;
    text-decoration:none;
    text-align:center;
    font-weight:700;

    border-radius:14px;
    border-left:5px solid #d71920;

    transition:.25s;
}

.quick-actions a:hover{
    transform:translateY(-4px);

    box-shadow:
        0 10px 30px rgba(215,25,32,.15);
}

/* =========================
   COMPETITIONS
========================= */

.competition-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.competition-card{
    padding:30px;

    text-align:center;

    border-radius:20px;
    border-top:5px solid #d71920;

    background:
        linear-gradient(
            135deg,
            #fff,
            #f8fafc
        );

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

    transition:.25s;
}

.competition-card:hover{
    transform:translateY(-5px);
}

/* =========================
   ACHIEVEMENTS
========================= */

.achievement-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
}

.achievement-card{
    background:#fff;

    padding:20px;

    border-radius:14px;

    text-align:center;
    font-weight:700;

    box-shadow:
        0 5px 20px rgba(0,0,0,.08);
}

/* =========================
   FIXTURE FILTERS
========================= */

.competition-tabs,
.week-tabs{
    display:flex;
    gap:12px;

    overflow-x:auto;

    margin-bottom:20px;

    scrollbar-width:none;
}

.competition-tabs::-webkit-scrollbar,
.week-tabs::-webkit-scrollbar{
    display:none;
}

.competition-tab,
.week-tab{
    border:none;

    cursor:pointer;

    white-space:nowrap;

    padding:12px 20px;

    border-radius:999px;

    font-weight:700;
}

.competition-tab{
    background:#fff;
}

.week-tab{
    background:#eef2f7;
}

.competition-tab.active,
.week-tab.active{
    background:#071a35;
    color:#fff;
}

/* =========================
   FIXTURES
========================= */

.week-content{
    display:none;
}

.week-content.active{
    display:block;
}

.matches-scroll{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.match-card{
    background:#fff;

    padding:20px;

    border-radius:20px;

    box-shadow:
        0 5px 15px rgba(0,0,0,.06);

    transition:.25s;
}

.match-card:hover{
    transform:translateY(-4px);
}

.match-top{
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:18px;
}

.competition-badge{
    background:#eef4ff;
    color:#071a35;

    padding:6px 12px;

    border-radius:999px;

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

.kickoff-time{
    font-size:13px;
    color:#777;
}

.match-teams{
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:20px;
}

.team{
    display:flex;
    flex-direction:column;
    align-items:center;

    gap:10px;

    text-align:center;
}

.team img{
    width:56px;
    height:56px;

    object-fit:contain;
}

.team span{
    font-weight:700;
}

.vs{
    width:52px;
    height:52px;

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

    border-radius:50%;

    background:#d71920;
    color:#fff;

    font-weight:900;
}

.predict-btn-card{
    display:block;

    padding:12px;
	width:100%;
    color:#fff;
    text-decoration:none;
    text-align:center;
    font-weight:700;

    border-radius:12px;

    background:#d71920;
	border-color: #d71920;
	margin-top: 10px;
    cursor: pointer;
}

/* =========================
   FORM & H2H
========================= */

.form-section{
    display:flex;
    justify-content:space-between;

    margin:15px 0;
}

.form-team{
    display:flex;
    gap:5px;
}

.dot{
    width:20px;
    height:20px;

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

    border-radius:50%;

    color:#fff;

    font-size:11px;
    font-weight:700;
}

.win{
    background:#22c55e;
}

.draw{
    background:#f59e0b;
}

.loss{
    background:#ef4444;
}

.h2h-card{
    margin-top:10px;
    padding:8px 10px;

    text-align:center;

    border-radius:10px;

    background:#f8fafc;

    color:#475569;

    font-size:12px;
    font-weight:600;
}

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

@media(max-width:1200px){

    .matches-scroll{
        grid-template-columns:repeat(3,1fr);
    }

}

@media(max-width:992px){

    .dashboard-hero{
        flex-direction:column;
        gap:20px;
        text-align:center;
    }

    .dashboard-stats,
    .competition-grid,
    .achievement-grid,
    .quick-actions{
        grid-template-columns:1fr;
    }

}

@media(max-width:768px){

    .matches-scroll{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:480px){

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

}

@media(max-width:768px){

    .dashboard-stats{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:12px;
    }

    .stat-card{
        padding:20px;
        min-height:140px;
    }

    .stat-card h2{
        font-size:32px;
    }


    .dashboard-hero{
        padding:24px;
        text-align:left;
        align-items:flex-start;
    }

    .dashboard-hero h1{
        font-size:24px;
        margin-bottom:8px;
    }

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

    .predict-btn{
        width:100%;
        text-align:center;
        margin-top:15px;
    }

}

.prediction-modal{
    position:fixed;
    inset:0;

    background:rgba(0,0,0,.6);

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

    z-index:9999;
}

.prediction-modal.active{
    display:flex;
}

.prediction-modal-content{
    width:95%;
    max-width:500px;
}

.prediction-card{
    background:#fff;
    padding:25px;
    border-radius:24px;
    position:relative;
}

.close-modal{
    position:absolute;
    top:15px;
    right:15px;

    border:none;
    background:none;

    font-size:28px;
    cursor:pointer;
}

.score-inputs{
    display:flex;
    gap:15px;
    margin-top:25px;
}

.score-inputs div{
    flex:1;
}

.score-inputs label{
    display:block;
    margin-bottom:8px;
    font-weight:700;
}

.score-inputs input{
    width:100%;
    padding:12px;

    border:1px solid #ddd;
    border-radius:10px;

    text-align:center;
    font-size:20px;
}

.submit-prediction{
    width:100%;
    margin-top:20px;

    border:none;

    padding:14px;

    border-radius:12px;

    background:#d71920;
    color:#fff;

    font-weight:700;
    cursor:pointer;
}
.prediction-message{
    display:none;

    margin:15px 0;
    padding:12px;

    border-radius:10px;

    font-size:14px;
    font-weight:600;
}

.prediction-message.success{
    display:block;

    background:#dcfce7;
    color:#166534;

    border:1px solid #86efac;
}

.prediction-message.error{
    display:block;

    background:#fee2e2;
    color:#991b1b;

    border:1px solid #fca5a5;
}

.week-nav-wrapper {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 30px;
}

.week-slider {
	flex: 1;
	display: flex;
	gap: 15px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding: 20px 0px 20px 0px;
}

.week-slider::-webkit-scrollbar {
	display: none;
}

.week-nav-btn {
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: white;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
	cursor: pointer;
	font-size: 20px;
	flex-shrink: 0;
}

.week-btn {
	min-width: 170px;
	border: none;
	border-radius: 18px;
	padding: 16px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
	cursor: pointer;
	transition: .25s;
	font-weight: 600;
    color: #000;
}

.week-btn.active {
	background: rgb(7, 26, 53);
	color: white;
	font-weight: 700;
}

.week-title {
	display: block;
	font-size: 18px;
	font-weight: 800;
	margin-bottom: 4px;
}

.week-range {
	display: block;
	font-size: 14px;
	opacity: .8;
}

#week-next {
	position: absolute;
	right: 40px;
}

.ai-analysis-btn{
    width:100%;
    margin-top:10px;
    background:transparent;
    border:1px solid #d71920;
    color:#d71920;
    padding:10px 14px;
    border-radius:10px;
    font-weight:600;
    cursor:pointer;
    transition:.2s;
}

.ai-analysis-btn:hover{
    background:#d71920;
    color:#fff;
}