@media(max-width:1280px){
  #dp-root{
    --dp-main: minmax(0,1fr);
    --dp-right:320px;
    --dp-gap:20px;
  }
  #dp-root .dp-top,
  #dp-root .dp-layout,
  #dp-root .dp-foot{
    width:calc(100% - 32px);
  }
}

@media(max-width:900px){
  #dp-root .dp-side{
    width:56px;
  }
  #dp-root .dp-shell{
    margin-left:56px;
  }
  #dp-root .dp-head{
    position:fixed;
    left:56px;
    right:0;
    top:0;
    min-height:64px;
    grid-template-columns:minmax(0,1fr) auto;
    padding:0 12px;
  }
  #dp-root .dp-head-left{
    display:none;
  }
  #dp-root .dp-top{
    padding-top:88px;
  }
  #dp-root .dp-top,
  #dp-root .dp-layout,
  #dp-root .dp-foot{
    width:auto;
    max-width:none;
    margin-left:16px;
    margin-right:16px;
  }
  #dp-root .dp-layout{
    display:block;
  }
  #dp-root .dp-main,
  #dp-root .dp-right{
    min-height:auto;
    margin-bottom:24px;
    width:100%;
  }
  body.dp-sidebar-open #dp-root .dp-side{
    width:240px;
  }
  #dp-root .dp-mask{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    z-index:25;
  }
  body.dp-sidebar-open #dp-root .dp-mask{
    display:block;
  }
}

@media(max-width:520px){
  #dp-root .dp-top,
  #dp-root .dp-layout,
  #dp-root .dp-foot{
    margin-left:12px;
    margin-right:12px;
  }
  #dp-root .dp-head-right{
    gap:8px;
  }
  #dp-root .dp-pill{
    padding:8px 10px;
  }
}