.archive-controls{
position: relative;
margin: 10px 0 18px;
}
.sort-tabs{
display: inline-flex;
gap: 6px;
padding: 6px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.04);
backdrop-filter: blur(6px);
}
.sort-tab{
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 64px;
padding: 10px 14px;
border-radius: 999px;
text-decoration: none;
font-weight: 700;
font-size: 14px;
line-height: 1;
border: 1px solid transparent;
transition: transform .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
}
.sort-tab:hover{
transform: translateY(-1px);
border-color: rgba(255,255,255,.16);
}
.sort-tab.is-active{
background: rgba(255,255,255,.12);
border-color: rgba(255,255,255,.22);
}
.sort-tabs.is-loading .sort-tab{
pointer-events: none;
opacity: .65;
}
.archive-loading{
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
display: none;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(0,0,0,.25);
}
.sort-tabs.is-loading ~ .archive-loading{
display: inline-flex;
}
.archive-loading .spinner{
width: 14px;
height: 14px;
border-radius: 999px;
border: 2px solid rgba(255,255,255,.25);
border-top-color: rgba(255,255,255,.9);
animation: howinfoSpin .8s linear infinite;
}
.archive-loading .loading-text{
font-size: 12px;
opacity: .85;
}
@keyframes howinfoSpin{
to { transform: rotate(360deg); }
} @media (max-width: 640px){
.sort-tabs{ width: 100%; justify-content: space-between; }
.sort-tab{ flex: 1 1 auto; min-width: 0; }
.archive-loading{ right: 10px; }
} .archive-loading{display:none; align-items:center; gap:8px;}
.sort-tabs.is-loading + .archive-loading,
.archive-controls .sort-tabs.is-loading ~ .archive-loading{display:inline-flex;}
.howinfo-empty-state{
text-align:center;
padding:48px 12px;
border:1px solid rgba(255,255,255,.08);
border-radius:16px;
margin:24px 0;
background: rgba(255,255,255,.03);
}
.howinfo-empty-state .title{font-weight:700; font-size:18px; margin-bottom:10px;}
.howinfo-empty-state .desc{opacity:.85; margin:0;} [data-theme="light"] .sort-tabs{
border: 1px solid rgba(2,6,23,.10);
background: rgba(2,6,23,.03);
}
[data-theme="light"] .sort-tab:hover{
border-color: rgba(2,6,23,.14);
}
[data-theme="light"] .sort-tab.is-active{
background: rgba(2,6,23,.06);
border-color: rgba(2,6,23,.18);
}
[data-theme="light"] .archive-loading{
border: 1px solid rgba(2,6,23,.10);
background: rgba(255,255,255,.85);
}
[data-theme="light"] .archive-loading .spinner{
border: 2px solid rgba(2,6,23,.18);
border-top-color: rgba(2,6,23,.55);
}
[data-theme="light"] .howinfo-empty-state{
border: 1px solid rgba(2,6,23,.10);
background: rgba(255,255,255,.75);
}