/* GLOBAL RESET */
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Segoe UI, sans-serif;
}

body{
background:#f8fafc;
color:#0f172a;
}

/* TOPBAR */
.topbar{
height:65px;
background:#fff;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 15px;
box-shadow:0 2px 10px rgba(0,0,0,0.08);
position:sticky;
top:0;
z-index:1000;
}

/* LOGO */
.logo{
font-size:22px;
font-weight:800;
color:#2563eb;
}

/* SIDEBAR */
.sidebar{
position:fixed;
top:0;
left:-280px;
width:280px;
height:100%;
background:#0f172a;
padding-top:70px;
transition:.3s;
z-index:1200;
}

.sidebar.active{
left:0;
}

.sidebar a{
display:block;
padding:15px 20px;
color:#fff;
text-decoration:none;
}

.sidebar a:hover{
background:#1e293b;
}

/* OVERLAY */
.overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
opacity:0;
visibility:hidden;
transition:.3s;
z-index:1100;
}

.overlay.active{
opacity:1;
visibility:visible;
}

/* USER MENU */
.user-menu{
position:absolute;
right:0;
top:45px;
width:180px;
background:#fff;
border-radius:10px;
box-shadow:0 10px 20px rgba(0,0,0,0.12);
display:none;
overflow:hidden;
}

.user-menu.show{
display:block;
}

/* CARD */
.card{
background:#fff;
padding:20px;
border-radius:15px;
box-shadow:0 5px 15px rgba(0,0,0,0.06);
}

/* BUTTON */
.btn{
padding:10px 15px;
background:#2563eb;
color:#fff;
border:none;
border-radius:10px;
cursor:pointer;
}

.btn:hover{
background:#1d4ed8;
}