body{
margin:0;
font-family:Segoe UI;
background:#0f172a;
color:white;
}

/* Topbar */
.topbar{
background:#111827;
display:flex;
justify-content:space-between;
padding:15px 20px;
align-items:center;
position:fixed;
width:100%;
z-index:1000;
}

.logo{font-size:20px;font-weight:bold;}

.top-right{
display:flex;
align-items:center;
gap:20px;
}

.profile{
position:relative;
cursor:pointer;
}

.dropdown{
display:none;
position:absolute;
background:#1f2937;
padding:10px;
top:25px;
right:0;
border-radius:5px;
}

.profile:hover .dropdown{
display:block;
}

.menu-btn{
display:none;
font-size:24px;
cursor:pointer;
}

/* Sidebar */
.sidebar{
width:220px;
background:#1f2937;
position:fixed;
top:60px;
bottom:0;
padding-top:20px;
transition:0.3s;
}

.sidebar a{
display:block;
color:white;
padding:12px 20px;
text-decoration:none;
}

.sidebar a:hover{
background:#374151;
}

/* Content */
.content{
margin-left:220px;
padding:90px 30px;
}

/* Stats */
.stats{
display:flex;
gap:20px;
flex-wrap:wrap;
}

.stat-card{
flex:1;
min-width:200px;
padding:20px;
border-radius:10px;
box-shadow:0 0 15px rgba(0,0,0,0.4);
}

.gradient1{background:linear-gradient(45deg,#16a34a,#22c55e);}
.gradient2{background:linear-gradient(45deg,#2563eb,#3b82f6);}
.gradient3{background:linear-gradient(45deg,#9333ea,#a855f7);}

.card{
background:#1f2937;
padding:20px;
border-radius:10px;
margin-top:20px;
}

/* Responsive */
@media(max-width:768px){

.sidebar{
left:-220px;
}

.sidebar.active{
left:0;
}

.content{
margin-left:0;
padding:90px 15px;
}

.menu-btn{
display:block;
}
}