body{
margin:0;
font-family:system-ui;
background:#f6f8fb;
}
h1{

font-size:clamp(
32px,
5vw,
42px
);

margin-bottom:24px;

}
.stats{
display:grid;
max-width:1000px;
grid-template-columns:repeat(auto-fit,minmax(80px,1fr));

gap:10px;

margin:15px auto;

padding:0 10px;

box-sizing:border-box;
}

.stat-card{

background:#fff;

border-radius:18px;

padding:25px;

text-align:center;

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

transition:.2s;

}

.stat-card:hover{

transform:translateY(-3px);

}

.stat-card.full{

grid-column:1/-1;

}

.icon{

font-size:40px;

margin-bottom:10px;

}

.number{

font-size:42px;

font-weight:bold;

color:#2E7D32;

margin-bottom:5px;

}

.label{

color:#666;

font-size:15px;

}
.chart-card{

    background:#fff;

    border-radius:18px;

    padding:20px;

    max-width:900px;
 
    box-shadow:0 8px 20px rgba(0,0,0,.08);

    margin:20px auto;
}

#historyChart{

    width:100% !important;

    

}
@media (max-width:600px){


.stat-card{

    padding:12px 6px;    border-radius:12px;


}

.icon{

    font-size:24px;

}

.number{

    font-size:24px;

}

.label{

    font-size:12px;

}

}



.menu{

    display:flex;

    justify-content:center;

    gap:20px;

    margin:20px auto;

}

.menu a{

    text-decoration:none;

    color:#333;

    display:flex;

    flex-direction:column;

    align-items:center;

    padding:10px 16px;

    border-radius:12px;

    transition:.2s;

}

.menu a:hover{

    background:#f3f3f3;

}

.menu span{

    font-size:28px;

}

.menu small{

    margin-top:4px;

    font-size:14px;

}

.menu a.active{

    color:#2E7D32;
	background:#E8F5E9;
	transform:scale(.92);

}

.menu a.active span{

    transform:scale(1.15);

}

@media (max-width:700px){

.menu{

    position:fixed;

    bottom:0;

    left:0;

    right:0;

    z-index:9999;

    margin:0;

    background:white;

    border-top:1px solid #ddd;

    box-shadow:0 -3px 10px rgba(0,0,0,.08);

    justify-content:space-around;

    padding:6px 0;

}

.menu a{

    flex:1;

    padding:4px 0;

}

.menu span{

    font-size:24px;

}

.menu small{

    font-size:11px;

}



body{

    padding-bottom:80px;

}

}



.locked-message {
    margin: auto;
    padding: 15px;
    border-radius: 10px;
    background: #fff3cd;
    color: #856404;
    text-align: center;
	
max-width:1000px;
	
}

.locked-title {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 8px;
}

.locked-message p {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.4;
}

.buy-pack-btn {
    display: inline-block;
    padding: 11px 20px;
    border-radius: 8px;
    background: #e5a900;
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    transition: background 0.2s ease, transform 0.2s ease;
}

.buy-pack-btn:hover {
    background: #c88f00;
    transform: translateY(-2px);
}

/* =========================================
   NAVIGATION
========================================= */

.bottom-navigation {
    display: flex;

    justify-content: center;

    margin: 35px 0 20px;
}

.back-button {
    display: inline-flex;

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

    min-width: 180px;
    min-height: 48px;

    padding: 0 25px;

    border-radius: 10px;

    background: #0c1d33;

    border: 1px solid #367da9;

    color: #bfe8ff;

    text-decoration: none;

    font-weight: 700;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.back-button:hover {
    background: #12365a;
    transform: translateY(-2px);
}


/* =========================================
   FOOTER
========================================= */

footer {
    text-align: center;

    color: #607b96;

    font-size: 12px;

    padding-top: 10px;
}