.not-found-page {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem 0.5rem;
    align-items: stretch;
}

.not-found-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    box-shadow: 0 10px 35px rgba(15, 23, 42, 0.08);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.not-found-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #0f172a;
}

.not-found-message {
    color: #475569;
    font-size: 1rem;
}

.not-found-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.not-found-hint {
    color: #64748b;
    font-size: 0.9rem;
}

.not-found-art {
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.not-found-code {
    font-size: clamp(2.5rem, 8vw, 4.5rem);
    font-weight: 800;
    color: #2563eb;
    letter-spacing: 0.15em;
    text-shadow: 0 12px 30px rgba(37, 99, 235, 0.2);
}

.not-found-wave {
    position: absolute;
    inset: auto -10% -20% -10%;
    height: 120px;
    background: radial-gradient(circle at 20% 20%, rgba(37, 99, 235, 0.15), transparent 60%),
        radial-gradient(circle at 70% 30%, rgba(14, 116, 144, 0.18), transparent 55%),
        radial-gradient(circle at 50% 50%, rgba(14, 165, 233, 0.12), transparent 65%);
}

@media (min-width: 900px) {
    .not-found-page {
        flex-direction: row;
        align-items: stretch;
    }

    .not-found-card,
    .not-found-art {
        flex: 1 1 50%;
    }
}