@page "/404"
@page "/not-found"

<div class="error-container">
    <div class="error-visual">
        <svg viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg" class="tech-svg">
            <line x1="20" y1="100" x2="180" y2="100" stroke="rgba(144, 224, 239, 0.08)" stroke-width="2" stroke-dasharray="4 4" />
            <line x1="100" y1="20" x2="100" y2="180" stroke="rgba(144, 224, 239, 0.08)" stroke-width="2" stroke-dasharray="4 4" />

            <circle cx="100" cy="100" r="70" stroke="var(--brand-blue)" stroke-width="1.5" stroke-dasharray="5 10" opacity="0.4" />
            <circle cx="100" cy="100" r="50" stroke="var(--payoff-color)" stroke-width="1" opacity="0.15" />

            <path d="M65,65 L135,135" stroke="var(--brand-blue)" stroke-width="2" stroke-linecap="round" opacity="0.3" />
            <path d="M135,65 L65,135" stroke="rgba(144, 224, 239, 0.2)" stroke-width="1.5" stroke-linecap="round" />

            <circle cx="100" cy="100" r="14" fill="var(--bar-bg)" stroke="var(--brand-blue)" stroke-width="3" />
            <circle cx="100" cy="100" r="4" fill="#4dabff" />

            <circle cx="65" cy="65" r="6" fill="var(--bar-bg)" stroke="var(--payoff-color)" stroke-width="2" />
            <circle cx="135" cy="65" r="6" fill="var(--bar-bg)" stroke="var(--payoff-color)" stroke-width="2" />
            <circle cx="135" cy="135" r="6" fill="var(--bar-bg)" stroke="var(--payoff-color)" stroke-width="2" />
            <circle cx="65" cy="135" r="6" fill="var(--bar-bg)" stroke="var(--payoff-color)" stroke-width="2" />
        </svg>
    </div>

    <div class="error-meta">
        <h1 class="error-code">404</h1>
        <h2 class="error-title">Resource Location Failure</h2>
        <p class="error-desc">
            The operational route, package schema, or data record you are querying cannot be resolved within this cluster context.
        </p>
        <a href="/" class="btn-return">
            <svg class="icon-left" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                <line x1="19" y1="12" x2="5" y2="12"></line>
                <polyline points="12 19 5 12 12 5"></polyline>
            </svg>
            Return to Core Dashboard
        </a>
    </div>
</div>