*{

margin:0;
padding:0;
box-sizing:border-box;

}



body{

font-family:"Inter",sans-serif;

background:#f4f6fa;

color:#171717;

}



.app{

display:grid;

grid-template-columns:260px 1fr;

min-height:100vh;

}



/* SIDEBAR */


.sidebar{

background:white;

padding:30px;

border-right:1px solid #ddd;

display:flex;

flex-direction:column;

}



.brand{

display:flex;

align-items:center;

gap:14px;

margin-bottom:45px;

}



.brand-icon{

width:45px;

height:45px;

border-radius:12px;

background:#111827;

color:white;

display:flex;

align-items:center;

justify-content:center;

font-size:24px;

}



.brand h2{

font-size:22px;

}



.brand span{

color:#777;

font-size:14px;

}



.nav{

width:100%;

padding:14px;

margin-bottom:8px;

border:none;

background:none;

border-radius:12px;

text-align:left;

cursor:pointer;

font-size:15px;

}



.nav:hover{

background:#eef2ff;

}



.nav.active{

background:#111827;

color:white;

}



.sidebar-footer{

margin-top:auto;

color:#777;

}



/* MAIN */


main{

padding:40px;

}



header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:35px;

}



header h1{

font-size:42px;

}



header p{

margin-top:8px;

color:#777;

}



#themeToggle{

width:50px;

height:50px;

border-radius:50%;

border:none;

cursor:pointer;

font-size:20px;

}





/* HERO */


.hero{

background:

linear-gradient(
135deg,
#111827,
#374151
);

border-radius:25px;

padding:50px;

color:white;

margin-bottom:35px;

}



.hero h2{

font-size:38px;

margin-bottom:15px;

}



.hero p{

max-width:600px;

line-height:1.6;

color:#d1d5db;

}



.actions{

display:flex;

gap:15px;

margin-top:30px;

}



.primary,
.secondary{

padding:16px 24px;

border-radius:14px;

border:none;

cursor:pointer;

font-size:15px;

}



.primary{

background:white;

color:#111827;

}



.secondary{

background:#ffffff20;

color:white;

}



/* CARDS */


.stats{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:20px;

margin-bottom:35px;

}



.card{

background:white;

padding:25px;

border-radius:20px;

}



.card h3{

color:#777;

font-size:14px;

margin-bottom:12px;

}



.card strong{

font-size:38px;

}





.projects{

background:white;

border-radius:20px;

padding:30px;

}



.empty{

padding:50px;

text-align:center;

color:#777;

}





/* DARK MODE */


.dark{

background:#0b0d10;

color:white;

}


.dark .sidebar,
.dark .card,
.dark .projects{

background:#15181d;

color:white;

}



.dark .secondary{

background:#ffffff15;

}




@media(max-width:900px){


.app{

grid-template-columns:1fr;

}


.sidebar{

display:none;

}


.stats{

grid-template-columns:repeat(2,1fr);

}


}



@media(max-width:600px){


.stats{

grid-template-columns:1fr;

}


.hero h2{

font-size:28px;

}


.actions{

flex-direction:column;

}


}