.sidebar{
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-color:rgba(167,139,250,.35) transparent;
  scrollbar-width:thin;
}

.sidebar>form{
  flex:0 0 auto;
  width:100%;
  margin:0;
}

.sidebar nav{
  gap:10px;
  margin:38px 0;
}

.sidebar nav .sidebar-link{
  position:relative;
  gap:12px;
  min-height:56px;
  padding:7px 9px;
  overflow:hidden;
  border:1px solid transparent;
  transition:color .22s ease,background .22s ease,border-color .22s ease,transform .22s ease;
}

.sidebar-link::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  background:linear-gradient(100deg,rgba(139,92,246,.16),rgba(38,208,232,.05));
  transition:opacity .22s ease;
}

.sidebar-link:hover{
  transform:translateX(3px);
  border-color:rgba(139,92,246,.16);
}

.sidebar-link:hover::before,
.sidebar-link.is-active::before{
  opacity:1;
}

.sidebar-link.is-active{
  color:#fff;
  border-color:rgba(139,92,246,.28);
  background:rgba(139,92,246,.08);
  box-shadow:inset 3px 0 0 #8b5cf6;
}

.nav-icon{
  position:relative;
  z-index:1;
  flex:0 0 42px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.08);
  border-radius:13px;
  background:rgba(255,255,255,.045);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 20px rgba(0,0,0,.12);
  transition:transform .28s cubic-bezier(.2,.8,.2,1),background .22s ease,box-shadow .22s ease,color .22s ease;
}

.nav-icon svg{
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
}

.nav-label{
  position:relative;
  z-index:1;
  font-size:13px;
}

.nav-icon-home{color:#bca7ff}
.nav-icon-courses{color:#69dfef}
.nav-icon-create{color:#7ceba3}
.nav-icon-settings{color:#f2c96d}

.sidebar-link:hover .nav-icon{
  transform:scale(1.08);
  background:rgba(255,255,255,.085);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 9px 25px rgba(0,0,0,.2);
}

.sidebar-link:hover .nav-icon-home svg{transform:translateY(-2px)}
.sidebar-link:hover .nav-icon-courses svg{transform:rotate(4deg) scale(.96)}
.sidebar-link:hover .nav-icon-create svg{transform:rotate(-4deg)}
.sidebar-link:hover .nav-icon-settings svg{transform:translateX(1px)}

.sidebar-link.is-active .nav-icon{
  background:rgba(139,92,246,.16);
  border-color:rgba(167,139,250,.24);
}

.sidebar-link.is-active .nav-icon::after{
  content:"";
  position:absolute;
  right:-2px;
  top:-2px;
  width:7px;
  height:7px;
  border:2px solid #171c31;
  border-radius:50%;
  background:#a78bfa;
  box-shadow:0 0 0 0 rgba(167,139,250,.45);
  animation:nav-pulse 2.4s ease-out infinite;
}

.sidebar .brand>span{
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease;
}

.sidebar .brand:hover>span{
  transform:rotate(-5deg) scale(1.06);
  box-shadow:0 12px 30px rgba(124,58,237,.55);
}

.nav-logout{
  display:flex;
  align-items:center;
  gap:10px;
  border-radius:12px;
  transition:color .2s ease,background .2s ease;
}

.nav-logout svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .2s ease;
}

.nav-logout:hover{
  color:#fda4af;
  background:rgba(251,113,133,.08);
}

.nav-logout:hover svg{transform:translateX(2px)}

.menu-toggle{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:11px!important;
  transition:background .2s ease,transform .2s ease;
}

.mobile-header .menu-toggle:hover{background:rgba(139,92,246,.14)}
.menu-toggle:active{transform:scale(.94)}
.menu-toggle svg{
  grid-area:1/1;
  width:25px;
  height:25px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  transition:opacity .2s ease,transform .25s ease;
}
.menu-close-icon{opacity:0;transform:rotate(-90deg) scale(.7)}
.menu-toggle.is-open .menu-open-icon{opacity:0;transform:rotate(90deg) scale(.7)}
.menu-toggle.is-open .menu-close-icon{opacity:1;transform:rotate(0) scale(1)}

@keyframes nav-pulse{
  0%{box-shadow:0 0 0 0 rgba(167,139,250,.45)}
  65%,100%{box-shadow:0 0 0 7px rgba(167,139,250,0)}
}

@media(max-width:760px){
  .sidebar{width:min(270px,calc(100vw - 24px))}
  .sidebar nav{margin:30px 0}
  .sidebar nav .sidebar-link{min-height:58px}
}

@media(max-height:720px){
  .sidebar{padding-block:18px}
  .sidebar nav{gap:6px;margin:20px 0}
  .sidebar nav .sidebar-link{min-height:44px;padding:3px 7px}
  .nav-icon{flex-basis:38px;width:38px;height:38px;border-radius:11px}
  .nav-icon svg{width:21px;height:21px}
  .user-card{padding-block:9px}
  .nav-logout{padding-block:9px}
}

@media(prefers-reduced-motion:reduce){
  .sidebar-link,
  .nav-icon,
  .nav-icon svg,
  .sidebar .brand>span,
  .nav-logout,
  .nav-logout svg,
  .menu-toggle,
  .menu-toggle svg{
    transition:none;
  }
  .sidebar-link:hover,
  .sidebar-link:hover .nav-icon,
  .sidebar-link:hover .nav-icon svg,
  .sidebar .brand:hover>span,
  .nav-logout:hover svg{
    transform:none;
  }
  .sidebar-link.is-active .nav-icon::after{animation:none}
}