{% extends "base.html" %}

{% block title %}Cartão não encontrado{% endblock %}

{% block content %}
<div class="min-h-[calc(100vh-4rem)] bg-slate-950 flex flex-col items-center justify-center p-4">
  <div class="bg-slate-900 border border-slate-800 rounded-3xl p-8 max-w-sm w-full text-center text-white shadow-2xl">
    <div class="w-16 h-16 bg-red-500/10 text-red-400 rounded-2xl flex items-center justify-center mx-auto mb-4">
      <i data-lucide="alert-circle" class="w-8 h-8"></i>
    </div>
    <h2 class="text-xl font-bold mb-2">Cartão não encontrado</h2>
    <p class="text-slate-400 text-xs mb-6">Não foi possível encontrar o cartão associado ao código: <code class="text-indigo-400 font-mono">{{ token }}</code></p>
    <a href="/" class="inline-flex items-center justify-center w-full py-3 px-4 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-xl text-xs transition-all">
      Voltar ao Início
    </a>
  </div>
</div>
{% endblock %}