@extends('layouts.auth')

@section('title', '404 — Page Not Found')

@section('content')
    <div class="text-center">
        <div class="inline-flex items-center justify-center w-16 h-16 bg-warning-50 rounded-full mb-4">
            <svg class="w-8 h-8 text-warning-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
            </svg>
        </div>
        <h2 class="font-display text-2xl font-semibold text-gray-900 mb-2">Page Not Found</h2>
        <p class="text-sm text-gray-500 mb-6">The page you're looking for doesn't exist or has been moved.</p>
        <a href="/" class="btn-primary">
            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>
            Go Home
        </a>
    </div>
@endsection