body{
    background:#f5f7fb;
    font-family:Inter,sans-serif;
}

.wrapper{
    display:flex;
}

.sidebar{

    width:260px;
    min-height:100vh;

    background:
    linear-gradient(
        180deg,
        #04142b,
        #02101f
    );

    color:white;
}

.logo{

    padding:30px;
    font-size:28px;
    font-weight:700;
}

.sidebar ul{
    list-style:none;
    padding:0;
}

.sidebar li{

    padding:15px 25px;
    margin:10px;

    border-radius:12px;
    cursor:pointer;
}

.sidebar li.active{
    background:#28a745;
}

.content{
    flex:1;
    padding:30px;
}

.topbar{

    display:flex;
    justify-content:space-between;
    margin-bottom:30px;
}

.kpi-card{

    background:white;

    border-radius:20px;

    padding:20px;

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

    display:flex;
    align-items:center;
    gap:20px;
}

.icon{

    width:60px;
    height:60px;

    border-radius:16px;

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

    font-size:28px;
}

.green{
    background:#dff6e6;
}

.blue{
    background:#e2efff;
}

.purple{
    background:#ece4ff;
}

.orange{
    background:#fff0d9;
}

.chart-card{

    border:none;

    border-radius:24px;

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