{% extends "base.html" %}
{% block title %}Page Not Found - QBO Excel Sync{% endblock %}
{% block content %}
<div class="error-page">
    <div class="error-content">
        <div class="error-icon">
            <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                <circle cx="12" cy="12" r="10"/>
                <path d="M16 16s-1.5-2-4-2-4 2-4 2"/>
                <line x1="9" y1="9" x2="9.01" y2="9"/>
                <line x1="15" y1="9" x2="15.01" y2="9"/>
            </svg>
        </div>
        <h1>404</h1>
        <h2>Page Not Found</h2>
        <p>The page you're looking for doesn't exist or has been moved.</p>
        <a href="{{ url_for('index') }}" class="btn btn-primary">Back to Dashboard</a>
    </div>
</div>
<style>
.error-page { display: flex; align-items: center; justify-content: center; min-height: 60vh; }
.error-content { text-align: center; }
.error-icon { color: #64748b; margin-bottom: 24px; }
.error-page h1 { font-size: 72px; font-weight: 800; color: #e2e8f0; margin: 0; }
.error-page h2 { font-size: 24px; margin: 8px 0 16px; }
.error-page p { color: #64748b; margin-bottom: 24px; }
</style>
{% endblock %}