*{
box-sizing:border-box;
}

body{

margin:0;

font-family:
Inter,
sans-serif;

background:
#F6F8FC;

}

.layout{

display:flex;

min-height:100vh;

}

.sidebar{

width:280px;

background:
linear-gradient(
180deg,
#071329,
#12284a
);

color:white;

padding:32px;

}

.logo{

font-size:28px;

font-weight:700;

margin-bottom:40px;

}

.sidebar nav{

display:flex;

flex-direction:column;

gap:12px;

}

.sidebar a{

color:white;

text-decoration:none;

padding:16px;

border-radius:16px;

}

.sidebar a:hover{

background:
rgba(
255,
255,
255,
0.08
);

}

.main{

flex:1;

}

.topbar{

height:90px;

display:flex;

justify-content:
space-between;

align-items:center;

padding:0 40px;

background:white;

}

.content{

padding:40px;

}

.cards{

display:grid;

grid-template-columns:
repeat(
auto-fit,
minmax(
220px,
1fr
));

gap:20px;

}

.card{

background:white;

padding:32px;

border-radius:24px;

box-shadow:
0 20px 40px
rgba(
0,
0,
0,
0.05
);

min-height:180px;

}