Status Badge

<a href="/status" target="_blank" style="display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 500; text-decoration: none; background: rgba(255,255,255,0.06); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.1); color: #e8e8ed;"> <span id="sq-badge-dot" style="width: 8px; height: 8px; border-radius: 50%; background: #6b7280;"></span> <span id="sq-badge-text">Loading...</span> </a> <script> (async function(){try{const r=await fetch('/api/status');const d=await r.json();const c=d.status==='up'?'#22c55e':d.status==='down'?'#ef4444':d.status==='degraded'?'#eab308':'#6b7280';const t=d.status==='up'?'All Systems Operational':d.status==='down'?'Some Systems Down':d.status==='degraded'?'Degraded Performance':'No Endpoints';document.getElementById('sq-badge-dot').style.background=c;document.getElementById('sq-badge-text').textContent=t}catch(e){document.getElementById('sq-badge-text').textContent='Status Unavailable'}})() </script>