.menu {
    overflow-y: auto;
    border-bottom: solid 1px #0083ff33;
}

/* ===== Scrollbar (Chrome, Edge, Safari) ===== */
.menu::-webkit-scrollbar {
    width: 6px;
}

.menu::-webkit-scrollbar-track {
    background: transparent;
}

.menu::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #00f0ff, #0066ff);
    border-radius: 10px;
}

.menu::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #00ffff, #3399ff);
}

/* ===== Firefox ===== */
.menu {
    scrollbar-width: thin;
    scrollbar-color: #39aac221 transparent;
}
/* SIDEBAR */
.labels {
    color: #717171 !important;
}
.sidebar {
  width: 220px;
  position: relative;

  padding: 44px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;

  /* glass dark */
  background: linear-gradient(
    180deg,
    rgba(10, 20, 40, 0.95),
    rgba(5, 10, 25, 0.85)
  );

  border-right: 1px solid rgba(0, 240, 255, 0.15);

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  transition: transform 0.3s ease;

  /* depth */
  box-shadow:
    5px 0 30px rgba(0, 0, 0, 0.6);
}
.sidebar::before {
  content: "";
  position: absolute;
  inset: 0;

  background: radial-gradient(
    circle at 0% 50%,
    rgba(0, 150, 255, 0.25),
    transparent 60%
  );

  filter: blur(40px);
  opacity: 0.6;

  pointer-events: none;
}


.logo{

font-size:18px;
color:#00ffaa;
font-weight:bold;

}

.network{

font-size:12px;

}

.online-dot{

width:8px;
height:8px;
background:#00ff6a;
border-radius:50%;
display:inline-block;
margin-left:5px;

}

.menu div{
color: white;
padding:6px 0;
cursor:pointer;

}

.menu div:hover{

color:#00ffaa;

}

.system-info{

margin-top: auto;
    font-size: 12px;
    color: white;
    background: #001aff4f;
    padding: 10px;
    border-radius: 10px;

}

/* OVERLAY */

.sidebar-overlay{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;

background:rgba(0,0,0,0.6);

opacity:0;
visibility:hidden;

transition:0.3s;

z-index:9;

}

.sidebar-overlay.active{

opacity:1;
visibility:visible;

}

/* MOBILE MODE */

@media (max-width:900px){

.sidebar{

position:fixed;
top:0;
left:0;
height:100%;

transform:translateX(-100%);
z-index:10;

}

.sidebar.active{

transform:translateX(0);

}
.menu div {
    color: white;
    padding: 8px 0;
}
}