<!-- Optional: background & favicon integration for admin pages -->
<link rel="icon" href="images/taji-yetu.png" type="image/png">
<canvas id="particles-bg"></canvas>
<script>
// Particles Background
const canvas = document.getElementById('particles-bg');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let particles = [];
for(let i=0;i<80;i++){
    particles.push({x:Math.random()*canvas.width, y:Math.random()*canvas.height, r:2+Math.random()*2});
}
function animate(){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    particles.forEach(p=>{
        ctx.beginPath();
        ctx.arc(p.x,p.y,p.r,0,Math.PI*2);
        ctx.fillStyle='white';
        ctx.fill();
        p.y -= 0.3;
        if(p.y<0) p.y=canvas.height;
    });
    requestAnimationFrame(animate);
}
animate();
window.addEventListener('resize', ()=>{canvas.width=window.innerWidth; canvas.height=window.innerHeight;});
</script>
<style>
body { background:#000; color:#fff; }
</style>
