        </main>
        <footer class="footer">
            <small>&copy; <?php echo date('Y'); ?> MonitorPing · Monitoramento simples por ping.</small>
        </footer>
    </div>
</div>

<!-- Toast container -->
<div id="toast-container"></div>

<script>
/* ── Toast global ───────────────────────────────────────── */
function toast(msg, type = 'success', duration = 3500) {
    const icons = { success: '✓', error: '✕', warning: '⚠', info: 'ℹ' };
    const c = document.getElementById('toast-container');
    if (!c) return;
    const el = document.createElement('div');
    el.className = 'toast toast-' + type;
    el.innerHTML = `<span class="toast-icon">${icons[type] || '✓'}</span> ${msg}`;
    c.appendChild(el);
    requestAnimationFrame(() => requestAnimationFrame(() => el.classList.add('show')));
    setTimeout(() => {
        el.classList.remove('show');
        setTimeout(() => el.remove(), 400);
    }, duration);
}

/* ── Dark mode ─────────────────────────────────────────── */
function toggleDark() {
    const root = document.documentElement;
    const isDark = root.getAttribute('data-theme') === 'dark';
    const next = isDark ? 'light' : 'dark';
    root.setAttribute('data-theme', next);
    localStorage.setItem('mp_theme', next);
    const btn = document.getElementById('darkToggle');
    if (btn) btn.textContent = next === 'dark' ? '☀️' : '🌙';
}

// Atualiza ícone do botão conforme tema atual
document.addEventListener('DOMContentLoaded', () => {
    const t = localStorage.getItem('mp_theme') || 'light';
    const btn = document.getElementById('darkToggle');
    if (btn) btn.textContent = t === 'dark' ? '☀️' : '🌙';
});
</script>
</body>
</html>
