.wrapper{

display:grid;

grid-template-columns:260px 1fr;

height:100vh;

}

.sidebar{

background:#16161b;

border-right:1px solid #2d2d35;

display:flex;

flex-direction:column;

}

.sidebar-header{

display:flex;

align-items:center;

gap:15px;

padding:25px;

border-bottom:1px solid #2d2d35;

}

.logo-circle{

width:60px;

height:60px;

border-radius:18px;

background:#e11d48;

display:flex;

justify-content:center;

align-items:center;

font-size:30px;

}

.sidebar-header h2{

font-size:22px;

}

.sidebar-header p{

font-size:13px;

color:#999;

}

.sidebar-menu{

display:flex;

flex-direction:column;

padding:15px;

gap:6px;

}

.sidebar-menu a{

padding:14px;

border-radius:12px;

color:white;

text-decoration:none;

transition:.25s;

}

.sidebar-menu a:hover{

background:#27272f;

}

.sidebar-menu .active{

background:#e11d48;

}

.sidebar-footer{

margin-top:auto;

padding:25px;

font-size:13px;

color:#999;

border-top:1px solid #2d2d35;

}

.content{

overflow:auto;

padding:30px;

}

.navbar{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:30px;

}

.navbar-right{

display:flex;

align-items:center;

gap:25px;

}

.notification{

position:relative;

font-size:24px;

cursor:pointer;

}

.badge{

position:absolute;

top:-8px;

right:-10px;

background:#ef4444;

color:white;

font-size:11px;

padding:2px 7px;

border-radius:20px;

}

.user{

display:flex;

align-items:center;

gap:12px;

}

.user img{

width:46px;

height:46px;

border-radius:50%;

}