.sidebar{
  width:236px; flex:0 0 236px;
  background:var(--sidebar-bg);
  border-right:1px solid var(--line);
  display:flex; flex-direction:column;
  position:fixed; top:0; bottom:0; left:0;
  padding-top:env(safe-area-inset-top,0px);
  transition:transform .25s ease, background .2s ease;
  z-index:40;
}
.brand-row{
  display:flex; align-items:center; gap:10px;
  padding:20px 18px 16px;
  border-bottom:1px solid var(--line);
}
.brand-mark{
  width:34px; height:34px; flex:0 0 34px;
  display:flex; align-items:center; justify-content:center;
  background:#000; border-radius:8px; padding:5px;
}
.brand-mark svg{width:100%; height:100%;}
.brand-mark img{width:100%; height:100%; object-fit:contain;}
.brand-text{line-height:1.05;}
.brand{font-size:19px; font-weight:700; letter-spacing:.5px;}
.brand-tag{font-size:9.5px; color:var(--red); letter-spacing:1.2px; font-weight:600; text-transform:uppercase;}

.nav{flex:1; overflow-y:auto; padding:14px 10px;}
.nav-group-label{
  font-size:10.5px; color:var(--muted-2); letter-spacing:1px; text-transform:uppercase;
  padding:14px 10px 6px;
}
.nav-item{
  display:flex; align-items:center; gap:11px;
  padding:9px 12px; border-radius:8px;
  color:var(--muted); font-size:14.5px; font-weight:600;
  cursor:pointer; margin-bottom:2px; border:1px solid transparent;
}
.nav-item svg{width:17px; height:17px; flex:0 0 17px; opacity:.85;}
.nav-item:hover{background:var(--panel); color:var(--text);}
.nav-item.active{
  background:linear-gradient(90deg, rgba(226,38,59,.16), rgba(226,38,59,.03));
  border-color:rgba(226,38,59,.35);
  color:var(--text);
}
.nav-item.active svg{opacity:1; color:var(--red);}
.sidebar-foot{
  padding:14px 18px; border-top:1px solid var(--line);
  font-size:11px; color:var(--muted-2);
}

/* Main */