{% extends "base.html" %}

{% block title %}{{ app_name }} — page not found{% endblock %}

{% block content %}
<section class="mx-auto max-w-md py-20 text-center">
  <p class="font-mono text-[10px] font-medium uppercase tracking-[0.24em] text-brand-300">404</p>
  <h1 class="mt-3 font-display text-4xl font-semibold tracking-tight text-slate-50">Not found</h1>
  <p class="mt-3 font-mono text-sm leading-relaxed text-slate-400">
    {{ detail or "The page you're looking for doesn't exist." }}
  </p>
  <a href="/ui"
     class="mt-8 inline-flex items-center gap-2 rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-semibold text-ink-950 shadow-glow transition hover:bg-brand-300">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
      <path d="M19 12H5M12 19l-7-7 7-7"/>
    </svg>
    Back to scans
  </a>
</section>
{% endblock %}