.sidebar{
  position:sticky; top:0; align-self:flex-start;
  height:100vh; width:var(--sidebar-w);
  background:linear-gradient(180deg,#ffffff,#f6fbff);
  border-right:1px solid var(--border);
  box-shadow:var(--shadow);
  padding:18px 14px;
  display:flex; flex-direction:column; gap:14px;
}
.brand{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; }
.drop{
  width:28px; height:28px; border-radius:8px;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  box-shadow:0 6px 18px rgba(59,130,246,.35); flex:0 0 auto;
}
.brand h1{
  margin:0; font-weight:800; letter-spacing:.4px;
  background:linear-gradient(90deg,var(--primary),var(--primary-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-size:20px; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nav{ margin-top:6px; display:flex; flex-direction:column; gap:8px; }
.nav a{
  display:flex; align-items:center; gap:12px;
  padding:12px 12px; border-radius:12px; text-decoration:none; color:var(--text);
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
  will-change: transform;
}
.nav a .icon{
  width:22px; height:22px; border-radius:6px;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  opacity:.9; flex:0 0 auto;
}
.nav a .label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav a:hover{ background:#eef5ff; transform: translateX(4px) scale(1.02); box-shadow: var(--shadow); }
.nav a.active{ background:#e8f2ff; box-shadow:var(--shadow); outline:2px solid rgba(59,130,246,.15); }
.sidebar .spacer{ flex:1 }