{%extends 'base.html'%}
{%block title%}400 - Bad Request - White Neuron{%endblock%}
{%block description%}400 - Bad Request - White Neuron{%endblock%}
{%block content%}
<section class="error-section" id="error" style="position: relative; overflow: hidden;">
    <div class="stars-bg" style="position:absolute; inset:0; background: radial-gradient(ellipse at top, rgba(251,146,60,0.13), transparent 60%), radial-gradient(ellipse at bottom, rgba(234,179,8,0.1), transparent 60%);"></div>
    <div class="grid-lines" style="position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(circle at center, black, transparent 75%);"></div>
    <div class="container" style="position: relative; z-index: 1;">
        <div style="text-align: center; padding: 80px 0;">
            <div style="display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px;">
                <svg width="96" height="96" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="color: rgba(251,146,60,0.9); filter: drop-shadow(0 6px 18px rgba(251,146,60,0.35));">
                    <circle cx="12" cy="12" r="9"/>
                    <path d="M9 9l6 6M15 9l-6 6"/>
                </svg>
            </div>

            <h1 class="main-title" style="font-size: 5rem; line-height: 1; margin: 0; color: rgba(255,255,255,0.95); letter-spacing: 2px;">400</h1>
            <h2 class="subtitle1" style="margin-top: 12px; color: rgba(255,255,255,0.85); font-size: 1.5rem;">Bad Request</h2>
            <p style="margin: 12px auto 30px; max-width: 680px; color: rgba(255,255,255,0.7); font-size: 1rem; line-height: 1.7;">
                The server could not understand the request due to invalid syntax or malformed data.
                Please check your request and try again.
            </p>

            <div style="display: inline-flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: center;">
                <a href="javascript:history.back()" class="dashboard-btn" style="
                    background: linear-gradient(135deg, rgba(251,146,60,0.3), rgba(234,179,8,0.3));
                    border: 1px solid rgba(251,146,60,0.5);
                    color: rgba(255,255,255,1);
                    text-decoration: none;
                    padding: 12px 22px;
                    border-radius: 10px;
                    font-size: 0.95rem;
                    font-weight: 600;
                    display: inline-flex;
                    align-items: center;
                    gap: 8px;
                    transition: transform .2s ease, box-shadow .2s ease;
                ">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <polyline points="15 18 9 12 15 6"/>
                    </svg>
                    Go back
                </a>
                <a href="/" class="dashboard-btn" style="
                    background: rgba(255,255,255,0.08);
                    border: 1px solid rgba(255,255,255,0.18);
                    color: rgba(255,255,255,0.95);
                    text-decoration: none;
                    padding: 12px 22px;
                    border-radius: 10px;
                    font-size: 0.95rem;
                    font-weight: 600;
                    display: inline-flex;
                    align-items: center;
                    gap: 8px;
                    transition: transform .2s ease, box-shadow .2s ease;
                ">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M3 12l9-9 9 9"/>
                        <path d="M9 21V9h6v12"/>
                    </svg>
                    Back to home
                </a>
            </div>
        </div>
    </div>

    <div class="plus-symbol" style="position:absolute; top: 12%; left: 22%; color: rgba(255,255,255,0.15); font-size: 28px;">+</div>
    <div class="plus-symbol" style="position:absolute; bottom: 18%; right: 18%; color: rgba(255,255,255,0.12); font-size: 24px;">+</div>
    <div class="plus-symbol" style="position:absolute; top: 35%; right: 35%; color: rgba(255,255,255,0.1); font-size: 20px;">+</div>
</section>
{%endblock%}