:root{
    --primary:#4f46e5;
    --primary-dark:#3730a3;
    --success:#10b981;
    --danger:#ef4444;
    --warning:#f59e0b;
    --bg:#f5f7fb;
    --sidebar:#1f2937;
    --card:#ffffff;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:var(--bg);
    font-family:Inter,Segoe UI,sans-serif;
}

.sidebar{

    position:fixed;

    left:0;

    top:0;

    width:250px;

    height:100vh;

    background:var(--sidebar);

    color:#fff;

    padding:30px 20px;

}

.sidebar h2{

    font-size:24px;

    margin-bottom:40px;

    font-weight:700;

}

.sidebar a{

    display:block;

    color:#d1d5db;

    padding:14px 18px;

    border-radius:10px;

    text-decoration:none;

    margin-bottom:10px;

    transition:.25s;

}

.sidebar a:hover{

    background:#374151;

    color:#fff;

    transform:translateX(4px);

}

.sidebar a.active{

    background:var(--primary);

    color:#fff;

}

.main{

    margin-left:250px;

    padding:40px;

}

.hero{

    background:linear-gradient(135deg,#4f46e5,#7c3aed);

    color:#fff;

    border-radius:18px;

    padding:35px;

    margin-bottom:30px;

    box-shadow:0 15px 30px rgba(79,70,229,.25);

}

.hero h2{

    font-size:34px;

    margin-bottom:10px;

}

.hero p{

    opacity:.9;

    margin:0;

}

.card{

    border:none;

    border-radius:18px;

    background:#fff;

    box-shadow:0 8px 25px rgba(0,0,0,.05);

    transition:.25s;

}

.card:hover{

    transform:translateY(-5px);

}

.stat-card{

    text-align:center;

    padding:25px;

}

.stat-card i{

    font-size:34px;

    color:var(--primary);

    margin-bottom:15px;

}

.stat-card h6{

    color:#6b7280;

}

.stat-card h2{

    font-weight:700;

}

.progress{

    height:24px;

    border-radius:50px;

}

.progress-bar{

    font-weight:600;

}

.table{

    border-radius:15px;

    overflow:hidden;

}

.badge{

    padding:8px 14px;

    border-radius:20px;

}

footer{

    margin-top:40px;

    color:#777;

    text-align:center;

}

@media(max-width:992px){

.sidebar{

position:relative;

width:100%;

height:auto;

}

.main{

margin-left:0;

padding:20px;

}

}

.stat-card{

    border-top:4px solid #4f46e5;

}

.stat-card:nth-child(2){

    border-top-color:#10b981;

}

.stat-card:nth-child(3){

    border-top-color:#f59e0b;

}

.stat-card:nth-child(4){

    border-top-color:#ef4444;

}

.usage-chart-container {
    position: relative;
    width: 100%;
    max-width: 420px;
    height: 280px;
    margin: 0 auto;
}