/* zone bars: one-row style under app */
.cate{
  display:flex;
  align-items:stretch;
  margin:8px 10px;
  border-radius:8px;
  overflow:hidden;
  background:#161616;
  border:1px solid rgba(255,255,255,.08);
}
.cate_name{
  width:34px;
  min-width:34px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 2px;
  background:linear-gradient(180deg,#8b5cf6 0%,#ec4899 100%);
}
.cate_name p{
  margin:0;
  color:#fff;
  font-size:13px;
  font-weight:700;
  letter-spacing:2px;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  line-height:1.2;
}
.cate_ul{
  flex:1;
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:6px;
  margin:0;
  padding:8px;
  list-style:none;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.cate_ul li{
  flex:0 0 calc((100% - 18px) / 4);
  max-width:calc((100% - 18px) / 4);
  margin:0;
  padding:0;
  list-style:none;
}
.cate_ul li a{
  display:block;
  padding:7px 4px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.12);
  background:#222;
  color:#ddd;
  font-size:12px;
  font-weight:500;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-decoration:none;
}
.cate_ul li a:hover{color:#fff;background:linear-gradient(90deg,#7c3aed,#db2777);border-color:transparent;}