{% extends 'base.html' %}

{% block title %}Form Not Found — AgentForms{% endblock %}

{% block head_extra %}
<style nonce="{{ csp_nonce }}">
    .error-page main {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px 24px;
    }
    .error-container {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.03);
        width: 100%;
        max-width: 480px;
        padding: 48px 32px;
        text-align: center;
    }
    .error-icon {
        font-size: 48px;
        margin-bottom: 16px;
    }
    .error-container h1 {
        font-size: 24px;
        font-weight: 700;
        color: var(--text);
        margin-bottom: 8px;
    }
    .error-container p {
        font-size: 15px;
        color: var(--text-muted);
        margin-bottom: 24px;
    }
    @media (max-width: 480px) {
        .error-container { padding: 32px 24px; }
    }
</style>
{% endblock %}

{% block content %}
<main>
    <div class="error-container">
        <div class="error-icon">🔍</div>
        <h1>Form Not Found</h1>
        <p>This form doesn't exist or has been removed. Check the URL and try again.</p>
        <a href="/" class="btn">Go Home</a>
    </div>
</main>
{% endblock %}