{# Page loader - shows during initial page load, auto-hides when fonts are ready #}
{% macro page_loader(color="#6366f1", bg="#f9fafb") %}
<div id="page-loader" style="position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:{{ bg }};transition:opacity 0.2s ease-out;">
    <div style="width:40px;height:40px;border:3px solid #e5e7eb;border-top-color:{{ color }};border-radius:50%;animation:_pl_spin 0.8s linear infinite;"></div>
</div>
<style>
@keyframes _pl_spin { to { transform: rotate(360deg); } }
.dark #page-loader { background: #0f172a !important; }
.dark #page-loader > div { border-color: #374151 !important; border-top-color: #818cf8 !important; }
</style>
{% endmacro %}