body{
margin:0;
font-family:Inter,Arial;
background:#eef2f7;
color:#0f172a;
}

.topbar{
height:70px;
background:#08122f;
color:white;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 30px;
}

.logo{
font-size:24px;
font-weight:700;
}

.logo span{
display:block;
font-size:12px;
opacity:.7;
}

.layout{
display:flex;
min-height:calc(100vh - 70px);
}

.sidebar{
width:240px;
background:white;
border-right:1px solid #e5e7eb;
padding:20px;
}

.sidebar a{
display:block;
margin-bottom:18px;
cursor:pointer;
}

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

.pageTitle{
font-size:32px;
margin-bottom:25px;
color:#5c6c96;
}

.licenseBar{
background:white;
padding:25px;
border-radius:18px;
box-shadow:0 10px 25px rgba(0,0,0,.05);
margin-bottom:30px;
}

.cards{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
margin-bottom:30px;
}

.card{
background:white;
padding:28px;
border-radius:18px;
box-shadow:0 10px 25px rgba(0,0,0,.05);
}

.cardTitle{
color:#5c6c96;
margin-bottom:10px;
}

.cardValue{
font-size:28px;
font-weight:700;
}

.drawdownGrid{
display:grid;
grid-template-columns:1fr 1fr;
gap:25px;
margin-bottom:30px;
}

.ddCard{
background:white;
padding:25px;
border-radius:18px;
box-shadow:0 10px 25px rgba(0,0,0,.05);
}

.bar{
height:22px;
background:#e5e7eb;
border-radius:12px;
overflow:hidden;
margin-top:10px;
}

.bar div{
height:100%;
width:0%;
background:#16a34a;
}

.chartCard{
background:white;
padding:25px;
border-radius:18px;
box-shadow:0 10px 25px rgba(0,0,0,.05);
}

canvas{
height:300px!important;
}

.licenseSelect{
padding:14px 18px;
border:1px solid #d1d5db;
border-radius:12px;
font-size:16px;
min-width:360px;
background:#fff;
}

.licenseBar label{
font-size:18px;
color:#5c6c96;
margin-bottom:12px;
display:block;
}

.cardTitle{
font-size:18px;
color:#5c6c96;
margin-bottom:14px;
}

.card{
transition:all .2s ease;
}

.card:hover{
transform:translateY(-2px);
box-shadow:0 14px 30px rgba(0,0,0,.08);
}