.sidebar{

position:fixed;
left:0;
top:0;
width:270px;
height:100vh;
background:#0f172a;
border-right:1px solid #1e293b;
display:flex;
flex-direction:column;
justify-content:space-between;
overflow:auto;

}

.sidebar-logo{

padding:30px 20px;
text-align:center;
border-bottom:1px solid #1e293b;

}

.sidebar-logo img{

width:72px;
height:72px;
border-radius:18px;

}

.sidebar-logo h2{

margin-top:15px;
font-size:24px;
color:#fff;

}

.sidebar-menu{

padding:20px;

}

.sidebar-menu a{

display:block;
text-decoration:none;
color:#cbd5e1;
padding:14px 18px;
margin-bottom:8px;
border-radius:12px;
transition:.2s;

}

.sidebar-menu a:hover{

background:#2563eb;
color:#fff;

}
.sidebar-menu hr{

border:none;
border-top:1px solid #1e293b;
margin:18px 0;

}

.sidebar-user{

display:flex;
align-items:center;
gap:14px;
padding:20px;
border-top:1px solid #1e293b;

}

.sidebar-user img{

width:54px;
height:54px;
border-radius:50%;
border:2px solid #2563eb;

}

.sidebar-user h3{

margin:0;
font-size:17px;
color:#fff;

}

.sidebar-user p{

margin:4px 0 0;
font-size:14px;
color:#94a3b8;

}

#logoutButton{

margin:20px;
padding:14px;
border:none;
border-radius:12px;
background:#dc2626;
color:white;
font-size:15px;
font-weight:bold;
cursor:pointer;
transition:.2s;

}

#logoutButton:hover{

background:#b91c1c;

}
.sidebar-menu a.active{

background:#2563eb;
color:#fff;
font-weight:bold;

}

.sidebar-menu a.disabled{

opacity:.5;
pointer-events:none;
cursor:not-allowed;

}

.sidebar-menu a.ceo{

background:linear-gradient(90deg,#7c3aed,#2563eb);
color:#fff;

}

.sidebar-menu a.ceo:hover{

filter:brightness(1.1);

}

.sidebar-menu a.premium{

color:#facc15;

}

.sidebar-menu a.subscriber{

color:#22c55e;

}

.sidebar-menu a i{

margin-right:10px;

}
/* ===== RESPONSYWNOŚĆ ===== */

@media (max-width:900px){

.sidebar{

width:100%;
height:auto;
position:relative;
border-right:none;
border-bottom:1px solid #1e293b;

}

.sidebar-menu{

padding:15px;

}

.sidebar-user{

padding:15px;

}

#logoutButton{

margin:15px;

}

}

/* ===== ANIMACJE ===== */

@keyframes sidebarFade{

from{

opacity:0;
transform:translateX(-20px);

}

to{

opacity:1;
transform:translateX(0);

}

}

.sidebar{

animation:sidebarFade .35s ease;

}

.sidebar-menu a{

transition:
background .2s,
transform .2s;

}

.sidebar-menu a:hover{

transform:translateX(6px);

}

/* ===== SCROLLBAR ===== */

.sidebar::-webkit-scrollbar{

width:8px;

}

.sidebar::-webkit-scrollbar-track{

background:#0f172a;

}

.sidebar::-webkit-scrollbar-thumb{

background:#2563eb;
border-radius:20px;

}

.sidebar::-webkit-scrollbar-thumb:hover{

background:#1d4ed8;

}