.sort-toggle-btn,.filter-toggle-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
height:40px;
padding:0 14px;
border:none;
background:transparent;
color:rgba(255,255,255,0.55);
border-radius:999px;
cursor:pointer;
flex-shrink:0;
position:relative;
font-size:var(--fz4);
font-weight:600;
transition:background 120ms ease,color 120ms ease;
}
.sort-toggle-btn:hover,.filter-toggle-btn:hover{
background:rgba(255,255,255,0.08);
}
.sort-toggle-btn:active,.filter-toggle-btn:active{
background:rgba(255,255,255,0.12);
}
.sort-toggle-btn svg,.filter-toggle-btn svg{
width:18px;
height:18px;
flex-shrink:0;
}
.sort-toggle-btn.sort-toggle-open,.filter-toggle-btn.filter-toggle-open{
color:var(--ac1);
background:rgba(255,255,255,0.06);
}
.sort-toggle-btn.sort-toggle-open:hover,.filter-toggle-btn.filter-toggle-open:hover{
background:rgba(255,255,255,0.1);
}
.banner-dark .sort-toggle-btn,.banner-dark .filter-toggle-btn{
color:rgba(0,0,0,0.55);
}
.banner-dark .sort-toggle-btn:hover,.banner-dark .filter-toggle-btn:hover{
background:rgba(0,0,0,0.08);
}
.banner-dark .sort-toggle-btn.sort-toggle-open,.banner-dark .filter-toggle-btn.filter-toggle-open{
color:var(--ooo);
background:rgba(0,0,0,0.1);
}
.sort-bar,.filter-bar{
width:var(--pw2);
max-width:var(--max);
margin:0 auto var(--gap);
display:flex;
}
.sort-bar-scroll,.filter-bar-scroll{
display:flex;
flex-wrap:wrap;
gap:var(--gd2);
padding:0 2px;
width:100%;
}
.sort-btn,.filter-btn{
flex-shrink:0;
display:inline-flex;
align-items:center;
gap:7px;
height:40px;
padding:0 18px;
border:none;
border-radius:999px;
background:rgba(255,255,255,0.04);
color:rgba(255,255,255,0.5);
font-size:var(--fz4);
font-weight:600;
letter-spacing:0.3px;
cursor:pointer;
white-space:nowrap;
transition:background 120ms ease,color 120ms ease,transform 60ms ease;
user-select:none;
-webkit-user-select:none;
}
.sort-btn:hover,.filter-btn:hover{
background:rgba(255,255,255,0.12);
color:rgba(255,255,255,0.8);
}
.sort-btn:active,.filter-btn:active{
transform:scale(0.97);
}
.sort-btn.active,.filter-btn.active{
background:var(--ac2);
color:var(--ooo);
font-weight:700;
}
.sort-btn.active:hover,.filter-btn.active:hover{
background:var(--ac2-light);
}
@media(max-width:700px){
.sort-btn,.filter-btn{
height:34px;
padding:0 14px;
font-size:var(--fz5);
}
.sort-bar,.filter-bar{
margin-top:calc(var(--gap) * 0.3);
}
.sort-toggle-btn,.filter-toggle-btn,.banner-upload-btn{
height:36px;
padding:0 12px;
font-size:var(--fz5);
}
.sort-toggle-btn svg,.filter-toggle-btn svg,.banner-upload-btn svg{
width:16px;
height:16px;
}
}