{% extends "base.html" %}

{% block title %}401 - Access Denied{% endblock %}

{% block content %}
<main class="max-w-4xl mx-auto px-6 py-40 text-center">
    <div class="glass p-16 rounded-3xl shadow-2xl relative overflow-hidden border-2 terminal-border group">
        <!-- Decorative Glows -->
        <div class="absolute -top-24 -right-24 w-96 h-96 neon-bg opacity-10 rounded-full blur-[100px]"></div>
        <div class="absolute -bottom-24 -left-24 w-96 h-96 neon-bg opacity-10 rounded-full blur-[100px]"></div>

        <div class="relative z-10">
            <div class="inline-block px-3 py-1 border border-amber-500/50 rounded-full mb-8 bg-amber-500/5">
                <span class="text-[9px] font-black tracking-[0.5em] text-amber-500 uppercase">Error_401_Unauthorized</span>
            </div>
            
            <h1 class="text-8xl font-black text-white tracking-tighter mb-6 group-hover:neon-text transition-all duration-700">401</h1>
            <p class="text-xl font-black text-zinc-300 uppercase tracking-widest mb-10">Restricted Protocol Access</p>
            
            <div class="max-w-md mx-auto p-6 bg-zinc-900/50 border terminal-border rounded-xl mb-12">
                <p class="text-[11px] text-zinc-500 leading-relaxed font-medium uppercase tracking-[0.1em]">
                    Your current credentials do not provide sufficient clearance for this segment. 
                    Please authenticate via the terminal or contact your administrator.
                </p>
            </div>

            <a href="/" class="inline-flex items-center px-12 py-5 neon-bg text-black font-black text-[11px] uppercase tracking-[0.3em] rounded-xl hover:brightness-125 transition-all">
                Return to Core
            </a>
        </div>
    </div>
</main>
{% endblock %}