<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Erro | Thiago Sousa</title>

    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
    <link rel="stylesheet" href="/css/main.css">

    <style>
        body {
            margin: 0;
            padding: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100svh;
            width: 100vw;
            overflow: hidden;
            background-color: var(--color-background);
            background-image: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--color-primary-dark) 40%, transparent), transparent 60%);
        }

        .error-glow {
            position: absolute;
            width: 60vw;
            height: 60vw;
            background: radial-gradient(circle, var(--color-primary) 0%, transparent 70%);
            opacity: 0.15;
            filter: blur(80px);
            z-index: 0;
            animation: pulse 8s ease-in-out infinite;
            pointer-events: none;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 0.15; }
            50% { transform: scale(1.1); opacity: 0.2; }
        }

        .error-card {
            position: relative;
            width: 100%;
            max-width: 500px;
            padding: var(--spacing-2xl) var(--spacing-xl);
            text-align: center;
            border-radius: var(--radius-2xl);
            background: color-mix(in srgb, var(--pico-background-color) 60%, var(--color-primary-dark) 20%);
            backdrop-filter: blur(1rem);
            border: 1px solid color-mix(in srgb, var(--pico-border-color) 50%, transparent);
            box-shadow: 0 0 40px -10px color-mix(in srgb, var(--color-primary) 10%, transparent);
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .error-card::before {
            content: "";
            position: absolute;
            inset: -1px;
            border-radius: inherit;
            padding: 1px;
            background: linear-gradient(135deg, transparent, var(--color-primary), var(--color-accent), transparent);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            opacity: 0.5;
            pointer-events: none;
        }

        .error-status {
            font-size: clamp(4rem, 10vw, 6rem);
            font-weight: 800;
            line-height: 1;
            margin-bottom: var(--spacing-sm);
            background: linear-gradient(to right, var(--color-foreground), var(--color-primary-light), var(--color-accent));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            letter-spacing: -0.05em;
        }

        .error-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--color-foreground);
            margin-bottom: var(--spacing-md);
        }

        .error-message {
            color: var(--color-neutral);
            font-size: 0.95rem;
            line-height: 1.6;
            margin-bottom: var(--spacing-xl);
            opacity: 0.8;
            max-width: 40ch;
        }

        .error-details {
            font-size: 0.75rem;
            color: var(--color-neutral);
            opacity: 0.4;
            margin-top: var(--spacing-lg);
            font-family: monospace;
        }

        .error-content-layer {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
        }
    </style>
</head>
<body data-theme="dark">

<div class="error-glow"></div>

<div class="error-card">
    <div class="error-content-layer">

        <h1 class="error-status">Ops!</h1>

        <h2 class="error-title">
            
            
            
            <span>Algo deu errado</span>
        </h2>

        <p class="error-message">
            
            
            <span>Erro interno no servidor.</span>
        </p>

        <a href="/" class="btn btn--primary">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 0.5rem;">
                <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                <polyline points="9 22 9 12 15 12 15 22"></polyline>
            </svg>
            Voltar ao Início
        </a>

        

    </div>
</div>

</body>
</html>