:root {
    --filter-btn-bg: #f9fafa;
    --filter-btn-hover-bg: #f1f3f6;
    --filter-btn-color: #4a5568;
    --filter-btn-all-bg: #f3f4f6;
    --filter-btn-all-color: #4a4a4a;
    --filter-btn-all-on-bg: #253245;
    --filter-btn-all-on-color: #fff;
    --filter-btn-all-border: #d1d5db;
}



.series-btn.color-flu_a.on      { background-color: var(--color-flu_a); }
.series-btn.color-flu_b.on      { background-color: var(--color-flu_b); }
.series-btn.color-cov.on        { background-color: var(--color-cov); }
.series-btn.color-strept_a.on   { background-color: var(--color-strept_a); }
.series-btn.color-adeno.on      { background-color: var(--color-adeno); }
.series-btn.color-rs.on         { background-color: var(--color-rs); }
.series-btn.color-hmp.on        { background-color: var(--color-hmp); }
.series-btn.color-myco.on       { background-color: var(--color-myco); }



.series-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.6rem;
    user-select: none;
    justify-content: center;
}


.series-row {
    display: inline-flex;
    white-space: nowrap;
    gap: 0.6rem;
    justify-content: center;
}


.series-btn {
    border-radius: 999px;
    padding: 0.45em 1.4em;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--filter-btn-color);
    background: var(--filter-btn-bg);
    cursor: pointer;
    letter-spacing: 0.01rem;
    border: 1px solid transparent;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.series-btn:hover {
    background: var(--filter-btn-hover-bg);
    filter: brightness(1.05);


}


.series-btn.on {
    /*background: linear-gradient(90deg, #4f46e5 0%, #6d28d9 100%);*/
    color: #fff;
    /*box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1),    0 4px 16px rgba(79, 70, 229, 0.25);*/
    transform: scale(1.03);
}

.series-btn.all {
    border-radius: 0.5rem;
    margin-right: 1.5rem;

    background: var(--filter-btn-all-bg);
    color: var(--filter-btn-all-color);
    border: 1px solid var(--filter-btn-all-border);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.45rem 1.4rem;
    transition: background-color 0.2s ease, color 0.2s ease;

}

.series-btn.all.on {
    background: var(--filter-btn-all-on-bg);
    color: var(--filter-btn-all-on-color);
    border: 1px solid transparent;
}



/*for animation*/
.series-btn {
    /*transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;*/
    transition: background-color 1.0s ease, color 0.3s ease, box-shadow 0.3s ease;

    background-color: transparent;

}

.series-btn.on {
    box-shadow: 0 4px 16px rgba(79, 70, 229, 0.25);
    transform: scale(1.03);
}