.source-filter{
    max-width:var(--max);
    margin:0 auto;
    padding:14px 24px 0;
}

.source-filter-inner{
    display:flex;
    align-items:center;
    gap:14px;
    padding:12px 14px;
    background:rgba(255,255,255,0.78);
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:0 10px 30px rgba(15,23,42,0.04);
}

.source-filter-label{
    flex:0 0 auto;
    font-size:0.78rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--muted);
}

.source-filter-buttons{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    overflow-x:auto;
    padding-bottom:1px;
    -webkit-overflow-scrolling:touch;
}

.source-filter-btn{
    flex:0 0 auto;
    border:1px solid var(--line-strong);
    background:var(--surface);
    color:var(--muted);
    border-radius:999px;
    padding:8px 13px;
    font-size:0.84rem;
    font-weight:700;
    cursor:pointer;
    transition:background .2s ease, color .2s ease, border-color .2s ease;
}

.source-filter-btn:hover{
    color:var(--text);
    background:var(--surface-soft);
}

.source-filter-btn.active{
    color:var(--accent-2);
    border-color:var(--accent-2);
    background:rgba(29,78,216,0.08); /* faint blue */
}
.source-filter-all{
    border-color:var(--accent);
}

@media (max-width:760px){

    .source-filter{
        padding:12px 14px 0;
    }

    .source-filter-inner{
        align-items:flex-start;
        flex-direction:column;
        gap:10px;
    }

    .source-filter-buttons{
        width:100%;
        justify-content:flex-start;

        /* hide scrollbar only on mobile */
        scrollbar-width:none;
        -ms-overflow-style:none;
    }

    .source-filter-buttons::-webkit-scrollbar{
        display:none;
    }
}