{% extends "base.html" %}

{% block title %}Page Not Found{% endblock %}

{% block content %}
<div class="auth-container">
    <div style="text-align: center; max-width: 500px;">
        <div style="font-size: 8rem; font-weight: 800; background: linear-gradient(135deg, var(--primary), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1;">404</div>
        <h1 style="font-size: 2rem; margin: 1rem 0;">Page Not Found</h1>
        <p style="color: var(--text-secondary); margin-bottom: 2rem;">The page you are looking for doesn't exist or has been moved.</p>
        <a href="{{ url_for('main.index') }}" class="btn btn-primary">🏠 Back to Home</a>
    </div>
</div>
{% endblock %}